mirror of
https://github.com/ae-utbm/sith.git
synced 2025-06-27 21:55:19 +00:00
allow export to Png
This commit is contained in:
imperosol
parent
db6c356f73
commit
b52dbdd4fc
57
package-lock.json
generated
57
package-lock.json
generated
@ -29,6 +29,8 @@
|
||||
"d3-force-3d": "^3.0.5",
|
||||
"easymde": "^2.19.0",
|
||||
"glob": "^11.0.0",
|
||||
"html-to-image": "^1.11.13",
|
||||
"html2canvas": "^1.4.1",
|
||||
"htmx.org": "^2.0.3",
|
||||
"jquery": "^3.7.1",
|
||||
"js-cookie": "^3.0.5",
|
||||
@ -3083,6 +3085,15 @@
|
||||
"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/base64-arraybuffer": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
|
||||
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||
@ -3471,6 +3482,15 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/css-line-break": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
|
||||
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"utrie": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/cytoscape": {
|
||||
"version": "3.32.0",
|
||||
"resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.32.0.tgz",
|
||||
@ -4149,6 +4169,25 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/html-to-image": {
|
||||
"version": "1.11.13",
|
||||
"resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
|
||||
"integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/html2canvas": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
|
||||
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"css-line-break": "^2.1.0",
|
||||
"text-segmentation": "^1.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/htmx.org": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.4.tgz",
|
||||
@ -5451,6 +5490,15 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/text-segmentation": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
|
||||
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"utrie": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/three": {
|
||||
"version": "0.177.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.177.0.tgz",
|
||||
@ -5708,6 +5756,15 @@
|
||||
"browserslist": ">= 4.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/utrie": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
|
||||
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"base64-arraybuffer": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.3.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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();
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
#timetable {
|
||||
display: block;
|
||||
margin: 2em auto ;
|
||||
.header {
|
||||
background-color: white;
|
||||
box-shadow: none;
|
||||
|
||||
@ -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 %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user