allow export to Png

Author: imperosol

package-lock.json

@@ -59,6 +59,7 @@
     "d3-force-3d": "^3.0.5",
     "easymde": "^2.19.0",
     "glob": "^11.0.0",
+    "html2canvas": "^1.4.1",
     "htmx.org": "^2.0.3",
     "jquery": "^3.7.1",
     "js-cookie": "^3.0.5",

package.json

@@ -1,3 +1,5 @@
+import html2canvas from "html2canvas";
+
 // see https://regex101.com/r/QHSaPM/2
 const TIMETABLE_ROW_RE: RegExp =
   /^(?<ueCode>[A-Z\d]{4}(?:\+[A-Z\d]{4})?)\s+(?<courseType>[A-Z]{2}\d)\s+((?<weekGroup>[AB])\s+)?(?<weekday>(lundi)|(mardi)|(mercredi)|(jeudi)|(vendredi)|(samedi)|(dimanche))\s+(?<startHour>\d{2}:\d{2})\s+(?<endHour>\d{2}:\d{2})\s+[\dA-B]\s+(?:[\wé]*\s+)?(?<room>\w+(?:, \w+)?)$/;
@@ -117,5 +119,16 @@ document.addEventListener("alpine:init", () => {
         left: `${this.displayedWeekdays.indexOf(slot.weekday) * SLOT_WIDTH}px`,
       };
     },
+
+    async savePng() {
+      const elem = document.getElementById("timetable");
+      const img = (await html2canvas(elem)).toDataURL();
+      const downloadLink = document.createElement("a");
+      downloadLink.href = img;
+      downloadLink.download = "edt.png";
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      downloadLink.remove();
+    },
   }));
 });

timetable/static/bundled/timetable/generator-index.ts

@@ -1,4 +1,6 @@
 #timetable {
+  display: block;
+  margin: 2em auto ;
   .header {
     background-color: white;
     box-shadow: none;

timetable/static/timetable/css/generator.scss

@@ -28,7 +28,7 @@
     <div
       id="timetable"
       x-show="table.height > 0 && table.width > 0"
-      :style="{width: `${table.width}px`, height: `${table.height}px`}"
+      :style="{width: `${table.width}px`, height: `${table.height+40}px`}"
     >
       <div class="header">
         <template x-for="weekday in displayedWeekdays">
@@ -45,5 +45,12 @@
         </template>
       </div>
     </div>
+    <button
+      class="margin-bottom btn btn-blue"
+      @click="savePng"
+      x-show="table.height > 0 && table.width > 0"
+    >
+      {% trans %}Save to PNG{% endtrans %}
+    </button>
   </div>
 {% endblock content %}