From 0a20eede96db3dfbee7ad14355a9627aeacb43d1 Mon Sep 17 00:00:00 2001
From: Jason N <cyderize@users.noreply.github.com>
Date: Sun, 26 Nov 2023 12:48:47 +1100
Subject: [PATCH] Allow importing from URL

---
 src/App.svelte              |  34 ++++--
 src/lib/NewFileModal.svelte | 224 ++++++++++++++++++++++++------------
 src/lib/Playground.svelte   |  23 +++-
 src/lib/loadFromUrl.js      |  70 +++++++++++
 4 files changed, 266 insertions(+), 85 deletions(-)
 create mode 100644 src/lib/loadFromUrl.js

diff --git a/src/App.svelte b/src/App.svelte
index 47501f2..8cdfe28 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,7 @@
 <script>
     import { onMount } from 'svelte';
     import Playground from './lib/Playground.svelte';
+    import { loadFromUrl } from './lib/loadFromUrl';
 
     let playground;
     let project = {
@@ -42,7 +43,7 @@
             Array(6)
                 .fill(0)
                 .map(
-                    () => alphabet[Math.floor(Math.random() * alphabet.length)]
+                    () => alphabet[Math.floor(Math.random() * alphabet.length)],
                 )
                 .join('');
         let id = genId();
@@ -64,7 +65,7 @@
         return p;
     }
 
-    function hashChange() {
+    async function hashChange() {
         if (currentSession && playground.hasFiles()) {
             const project = playground.getProject();
             settings.sessions[currentSession] = project;
@@ -73,14 +74,14 @@
         if (window.location.hash.startsWith('#project=')) {
             try {
                 const json = decodeURIComponent(
-                    window.location.hash.substring(9)
+                    window.location.hash.substring(9),
                 );
                 project = migrateProject(JSON.parse(json));
                 currentSession = newSession();
                 window.history.replaceState(
                     undefined,
                     undefined,
-                    `#session=${currentSession}`
+                    `#session=${currentSession}`,
                 );
                 return;
             } catch (e) {
@@ -91,7 +92,7 @@
         if (window.location.hash.startsWith('#code=')) {
             try {
                 const contents = decodeURIComponent(
-                    window.location.hash.substring(6)
+                    window.location.hash.substring(6),
                 );
                 project = {
                     files: [
@@ -106,8 +107,27 @@
                 window.history.replaceState(
                     undefined,
                     undefined,
-                    `#session=${currentSession}`
+                    `#session=${currentSession}`,
                 );
+                return;
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
+        if (window.location.hash.startsWith('#url=')) {
+            try {
+                const url = decodeURIComponent(
+                    window.location.hash.substring(5),
+                );
+                project = await loadFromUrl(url);
+                currentSession = newSession();
+                window.history.replaceState(
+                    undefined,
+                    undefined,
+                    `#session=${currentSession}`,
+                );
+                return;
             } catch (e) {
                 console.error(e);
             }
@@ -118,7 +138,7 @@
             window.history.replaceState(
                 undefined,
                 undefined,
-                `#session=${newSession()}`
+                `#session=${newSession()}`,
             );
         }
 
diff --git a/src/lib/NewFileModal.svelte b/src/lib/NewFileModal.svelte
index 3895b8a..26d75ce 100644
--- a/src/lib/NewFileModal.svelte
+++ b/src/lib/NewFileModal.svelte
@@ -1,12 +1,24 @@
 <script>
     import { createEventDispatcher, tick } from 'svelte';
     import Modal from './Modal.svelte';
+    import { loadFromUrl } from './loadFromUrl';
     export let active = false;
 
     const dispatch = createEventDispatcher();
     let fileInput;
     let files;
     let element;
+    let url = '';
+    let importingFromUrl = false;
+    let error = null;
+
+    $: reset(active);
+
+    function reset(active) {
+        importingFromUrl = false;
+        url = '';
+        error = null;
+    }
 
     async function setFocus() {
         await tick();
@@ -25,89 +37,142 @@
                     };
                     reader.onerror = (e) => reject(e);
                     reader.readAsText(file);
-                })
+                }),
             );
         }
         const result = await Promise.all(promises);
         dispatch('open', { files: result });
     }
+
+    async function importFromUrl() {
+        try {
+            dispatch('open', await loadFromUrl(url));
+        } catch (e) {
+            error = `Failed to import from URL: ${e.message || e}`;
+            console.error(e);
+        }
+    }
 </script>
 
-<Modal
-    {active}
-    title="Create new file"
-    on:activate={setFocus}
-    on:cancel={() => dispatch('cancel')}
->
-    <aside class="menu">
-        <p class="menu-label">Model</p>
-        <ul class="menu-list">
-            <li>
-                <button
-                    type="button"
-                    class="button is-text"
+{#if importingFromUrl}
+    <Modal
+        {active}
+        title="Import from URL"
+        on:activate={setFocus}
+        on:cancel={() => dispatch('cancel')}
+        on:submit={importFromUrl}
+    >
+        {#if error}
+            <div class="error">
+                {error}
+            </div>
+        {/if}
+        <div class="field">
+            <p class="control is-expanded">
+                <input
                     bind:this={element}
-                    on:click={() => dispatch('new', { type: '.mzn' })}
-                >
-                    Model file (.mzn)
-                </button>
-            </li>
-            <li>
-                <button
-                    type="button"
-                    class="button is-text"
-                    on:click={() => dispatch('new', { type: '.mzc.mzn' })}
-                >
-                    Solution checker model (.mzc.mzn)
-                </button>
-            </li>
-        </ul>
-        <p class="menu-label">Data</p>
-        <ul class="menu-list">
-            <li>
-                <button
-                    type="button"
-                    class="button is-text"
-                    on:click={() => dispatch('new', { type: '.dzn' })}
-                >
-                    Data file (.dzn)
-                </button>
-            </li>
-            <li>
-                <button
-                    type="button"
-                    class="button is-text"
-                    on:click={() => dispatch('new', { type: '.json' })}
-                >
-                    JSON data file (.json)
-                </button>
-            </li>
-        </ul>
-        <p class="menu-label">Visualisation</p>
-        <ul class="menu-list">
-            <li>
-                <button
-                    type="button"
-                    class="button is-text"
-                    on:click={() => dispatch('new', { type: '.html' })}
-                >
-                    Custom visualisation (.html)
-                </button>
-            </li>
-        </ul>
-        <p class="menu-label">Import</p>
-        <ul class="menu-list">
-            <li>
-                <button
-                    type="button"
-                    class="button is-text"
-                    on:click={() => fileInput.click()}>Upload file(s)</button
-                >
-            </li>
-        </ul>
-    </aside>
-</Modal>
-
+                    class="input"
+                    type="text"
+                    pattern=".+\.(mzn|dzn|json|js|html|css|mzp|mzc)"
+                    bind:value={url}
+                    required
+                />
+            </p>
+        </div>
+        <div slot="footer">
+            <button class="button is-primary">OK</button>
+            <button
+                class="button"
+                type="button"
+                on:click={() => dispatch('cancel')}>Cancel</button
+            >
+        </div>
+    </Modal>
+{:else}
+    <Modal
+        {active}
+        title="Create new file"
+        on:activate={setFocus}
+        on:cancel={() => dispatch('cancel')}
+    >
+        <aside class="menu">
+            <p class="menu-label">Model</p>
+            <ul class="menu-list">
+                <li>
+                    <button
+                        type="button"
+                        class="button is-text"
+                        bind:this={element}
+                        on:click={() => dispatch('new', { type: '.mzn' })}
+                    >
+                        Model file (.mzn)
+                    </button>
+                </li>
+                <li>
+                    <button
+                        type="button"
+                        class="button is-text"
+                        on:click={() => dispatch('new', { type: '.mzc.mzn' })}
+                    >
+                        Solution checker model (.mzc.mzn)
+                    </button>
+                </li>
+            </ul>
+            <p class="menu-label">Data</p>
+            <ul class="menu-list">
+                <li>
+                    <button
+                        type="button"
+                        class="button is-text"
+                        on:click={() => dispatch('new', { type: '.dzn' })}
+                    >
+                        Data file (.dzn)
+                    </button>
+                </li>
+                <li>
+                    <button
+                        type="button"
+                        class="button is-text"
+                        on:click={() => dispatch('new', { type: '.json' })}
+                    >
+                        JSON data file (.json)
+                    </button>
+                </li>
+            </ul>
+            <p class="menu-label">Visualisation</p>
+            <ul class="menu-list">
+                <li>
+                    <button
+                        type="button"
+                        class="button is-text"
+                        on:click={() => dispatch('new', { type: '.html' })}
+                    >
+                        Custom visualisation (.html)
+                    </button>
+                </li>
+            </ul>
+            <p class="menu-label">Import</p>
+            <ul class="menu-list">
+                <li>
+                    <button
+                        type="button"
+                        class="button is-text"
+                        on:click={() => fileInput.click()}
+                        >Upload file(s)</button
+                    >
+                </li>
+                <li>
+                    <button
+                        type="button"
+                        class="button is-text"
+                        on:click={() => (importingFromUrl = true)}
+                        >Import from URL</button
+                    >
+                </li>
+            </ul>
+        </aside>
+    </Modal>
+{/if}
 <input
     class="is-hidden"
     type="file"
@@ -115,7 +180,7 @@
     bind:files
     on:change={uploaded}
     multiple
-    accept=".mzn,.mzc,.dzn,.json,.html"
+    accept=".mzn,.mzc,.dzn,.json,.html,.js,.css"
 />
 
 <style>
@@ -129,4 +194,11 @@
         width: 100%;
         text-align: left;
     }
+    .error {
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        background: rgb(255, 227, 227);
+        color: rgb(175, 16, 16);
+        margin-bottom: 1rem;
+    }
 </style>
diff --git a/src/lib/Playground.svelte b/src/lib/Playground.svelte
index 0590084..2d4ef1c 100644
--- a/src/lib/Playground.svelte
+++ b/src/lib/Playground.svelte
@@ -127,14 +127,33 @@
         files = [];
         openFiles(project.files, autoFocus);
         currentIndex = project.tab || 0;
+        await loadSolvers();
         if (project.solverId) {
-            await loadSolvers();
             currentSolverIndex = solvers.findIndex(
                 (s) => s.id === project.solverId,
             );
+        } else {
+            currentSolverIndex =
+                solvers.findIndex(
+                    (s) => s.extraInfo && s.extraInfo.isDefault,
+                ) || 0;
         }
         if (project.solverConfig) {
             solverConfig.load(project.solverConfig);
+        } else {
+            solverConfig.reset();
+        }
+    }
+
+    async function importFiles(e) {
+        const offset = files.length;
+        openFiles(e.files);
+        if (e.tab !== undefined && e.tab !== null && e.tab >= 0) {
+            selectTab(offset + e.tab);
+        }
+        if (e.solverId) {
+            await loadSolvers();
+            currentSolverIndex = solvers.findIndex((s) => s.id === e.solverId);
         }
     }
 
@@ -1388,7 +1407,7 @@
         active={newFileRequested}
         on:cancel={() => (newFileRequested = false)}
         on:new={(e) => newFile(e.detail.type)}
-        on:open={(e) => openFiles(e.detail.files)}
+        on:open={(e) => importFiles(e.detail)}
     />
 
     <Modal
diff --git a/src/lib/loadFromUrl.js b/src/lib/loadFromUrl.js
new file mode 100644
index 0000000..bbc72e1
--- /dev/null
+++ b/src/lib/loadFromUrl.js
@@ -0,0 +1,70 @@
+const allowedExtensions = [
+    '.mzn',
+    '.mzc',
+    '.dzn',
+    '.json',
+    '.html',
+    '.js',
+    '.css',
+];
+
+export async function loadFromUrl(url) {
+    const src =
+        url.startsWith('http://') || url.startsWith('https://')
+            ? url
+            : `http://${url}`;
+    const name = src.split('/').pop();
+    if (
+        !name.endsWith('.mzp') &&
+        allowedExtensions.every((ext) => !name.endsWith(ext))
+    ) {
+        throw new Error('File type not recognised');
+    }
+    const response = await fetch(new URL(src));
+    if (!response.ok) {
+        throw new Error(
+            `Request failed (${response.status} ${response.statusText})`
+        );
+    }
+    if (name.endsWith('.mzp')) {
+        const project = await response.json();
+        const files = [];
+        const openFile = project.openFiles[project.openTab];
+        let tab = 0;
+        for (const file of project.projectFiles) {
+            const name = file.split('/').pop();
+            if (allowedExtensions.every((ext) => !name.endsWith(ext))) {
+                continue;
+            }
+            if (file === openFile) {
+                tab = files.length;
+            }
+            const res = await fetch(new URL(file, src));
+            if (!res.ok) {
+                throw new Error(
+                    `Request failed (${res.status} ${res.statusText})`
+                );
+            }
+            const contents = await res.text();
+            files.push({
+                name,
+                contents,
+                hidden: project.openFiles.indexOf(file) === -1,
+            });
+        }
+        let solverId = project.selectedBuiltinConfigId;
+        if (solverId === 'org.gecode.gecode') {
+            solverId = 'org.minizinc.gecode_presolver';
+        } else if (solverId === 'org.chuffed.chuffed') {
+            solverId = 'org.minizinc.chuffed';
+        }
+        return {
+            files,
+            tab,
+            solverId,
+        };
+    } else {
+        const contents = await response.text();
+        return { files: [{ name, contents }] };
+    }
+}