svg + responsive

static/builder.js

@@ -295,8 +295,8 @@ document
             const loader =
                 document.querySelector(".loader");
 
-            const iframe =
-                document.getElementById("pdf_iframe");
+            const frame =
+                document.getElementById("img_svg");
 
             const pdflink =
                 document.getElementById("pdf_link");
@@ -304,9 +304,33 @@ document
 
             submitButton.disabled = true;
             loader.style.display = "block";
+            pdflink.disabled = true;
 
             try {
 
+                const response_svg =
+                    await fetch("/edt.svg", {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify({ cours })
+                    });
+
+                if (!response_svg.ok)
+                    throw new Error("Erreur lors de la génération du SVG.");
+
+                const blob_svg =
+                    await response_svg.blob();
+
+                const url_svg =
+                    URL.createObjectURL(blob_svg);
+
+
+                frame.src = url_svg;
+                frame.style.display = "block";
+
+
                 const response =
                     await fetch("/edt.pdf", {
                         method: "POST",
@@ -325,9 +349,6 @@ document
                 const url =
                     URL.createObjectURL(blob);
 
-                iframe.src = url;
-                iframe.style.display = "block";
-
                 pdflink.href = url;
                 pdflink.style.display = "block";
 
@@ -340,6 +361,7 @@ document
 
                 loader.style.display = "none";
                 submitButton.disabled = false;
+		pdflink.disabled = false;
 
             }
 

static/style.css

@@ -169,9 +169,15 @@
 }
 
 
-#pdf_iframe {
-    width: min(100%, 1400px);
-    aspect-ratio: 297 / 210;
+.container {
+height: 100%;
+overflow-x: scroll;    
+white-space: nowrap;
+width: 100%;
+}
+
+#img_svg {
+    width: max(800px, 70%);
     border: 1px solid #ccc;
     margin: 1rem auto;
 }

templates/index.html

@@ -244,7 +244,10 @@ Générer PDF
 <div class="loader" style="margin: auto; display: none"></div>
 
 <a id="pdf_link" target="_blank" style="display: none;margin-top: 2em;">Ouvrir dans une nouvelle fenêtre</a>
-<iframe id="pdf_iframe" style="display: none"></iframe>
+
+<div class="container">
+<img src="" alt="Emploi du temps" id="img_svg" style="display: none">
+</div>
 
 </form>
 

wsgi.py

@@ -9,6 +9,8 @@ from pprint import pprint
 
 app = Flask(__name__)
 
+compiler = typst.Compiler()
+
 @app.route("/")
 def index():
     cours_base = [
@@ -211,32 +213,25 @@ def index():
 def favicon():
     return send_file("favicon.ico")
 
-@app.route('/edt.pdf', methods=["GET", "POST"])
+@app.route('/edt.pdf', methods=["POST"])
 def generate_pdf():
-    if request.method != "POST":
-        data = {
-            "cours": [
-                {"day": 0, "start": "08:15", "end": "10:xx", "name": "Algèbre (CM)",       "prof": "Jean-Benoît Bost", "room": "OA1", "color": "#ff80b3"},
-                {"day": 0, "start": "10:30", "end": "13:00", "name": "Algèbre (TD)",       "prof": "x",                "room": "OA1", "color": "#ff80b3"},
-                {"day": 3, "start": "14:00", "end": "16:00", "name": "Algèbre (CM)",       "prof": "Jean-Benoît Bost", "room": "OA1", "color": "#ff80b3"},
-                {"day": 3, "start": "16:15", "end": "18:45", "name": "Algèbre (TD)",       "prof": "x",                "room": "OA1", "color": "#ff80b3"},
-
-                {"day": 0, "start": "14:00", "end": "16:00", "name": "Analyse (CM)",       "prof": "Blanche Buet",     "room": "OA1", "color": "#80ffcc"},
-                {"day": 0, "start": "16:15", "end": "18:45", "name": "Analyse (TD)",       "prof": "x",                "room": "OA1", "color": "#80ffcc"},
-                {"day": 2, "start": "08:15", "end": "10:15", "name": "Analyse (CM)",       "prof": "Blanche Buet",     "room": "OA1", "color": "#80ffcc"},
-                {"day": 2, "start": "10:30", "end": "13:00", "name": "Analyse (TD)",       "prof": "x",                "room": "OA1", "color": "#80ffcc"},
-
-                {"day": 1, "start": "14:00", "end": "16:00", "name": "Cryptographie (CM)", "prof": "Stéphane Fischler","room": "OA1", "color": "#e6b3ff"},
-                {"day": 4, "start": "10:30", "end": "12:30", "name": "Cryptographie (TP)", "prof": "Chimène Fischler", "room": "OA1", "color": "#e6b3ff"},
-            ]
-        }
-        print(data)
-    else:
-        data = json.loads(request.data)
-        pprint(data)
+    data = json.loads(request.data)
+    pprint(data)
     
     sys_inputs = {"data": json.dumps(data)}
 
-    pdf_file = BytesIO(typst.compile(input="templates/edt.typ", sys_inputs=sys_inputs))
+    pdf_file = BytesIO(compiler.compile(input="templates/edt.typ", sys_inputs=sys_inputs))
 
     return send_file(pdf_file, download_name="edt.pdf")
+
+@app.route('/edt.svg', methods=["POST"])
+def generate_svg():
+    data = json.loads(request.data)
+    pprint(data)
+    
+    sys_inputs = {"data": json.dumps(data)}
+
+    pdf_file = BytesIO(compiler.compile(input="templates/edt.typ", sys_inputs=sys_inputs, format="svg"))
+
+    return send_file(pdf_file, download_name="edt.svg")
+