Merge pull request #52 from mohsin-r/fun

Demo page update
ramp4-pcar4 · Sep 13, 2024 · 2f8c2a9 · 2f8c2a9
2 parents e0728fc + 53725d9
commit 2f8c2a9
Show file tree

Hide file tree

Showing 2 changed files with 142 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -4,9 +4,149 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RAMP4 Config Editor</title>
+    <script>
+      let rampConfig = undefined
+      let started = false
+      let isFile = false
+      let isError = false
+      function showHelpInstructions() {
+        alert("Click the start editor button to start the app with an empty config. Alternately, you may upload a default config file in json format via the upload config button and then click start editor to start the app with your own default config. At any point in the session, you may download the current config in json format via the download config button.")
+      }
+
+      function openFileUpload() {
+        document.getElementById('upload-config').click()
+      }
+
+      function onFileUpload(file) {
+        const reader = new FileReader()
+        reader.onload = onReaderLoad
+        reader.readAsText(file);
+      }
+
+      function onReaderLoad(event){
+        isFile = true
+        document.getElementById('upload-config').value = ''
+        setStartingConfig(event.target.result)
+      }
+
+      function setStartingConfig(config) {
+        try {
+          rampConfig = JSON.parse(config)
+          if (isFile) {
+            alert("Successfully uploaded config.")
+          }
+          isError = false
+        } catch (error) {
+          if (isFile) {
+            alert("An error occurred. Please ensure that the config is in json format.")
+          }
+          else {
+            isError = true
+          }
+        }
+      }
+
+      function toggleInput() {
+        document.getElementById('config-input').hidden = !document.getElementById('config-input').hidden
+        const button = document.getElementById('buttons').children[2]
+        button.innerHTML = document.getElementById('config-input').hidden ? 'Input Config' : 'Hide Input'
+      }
+
+      function onConfigInput(config) {
+        isFile = false
+        setStartingConfig(config)
+      }
+
+      function startEditor() {
+        if (isError) {
+          alert("An error occurred. Please ensure that the config is in json format.")
+          return;
+        }
+        const loopy = setInterval(() => {
+          if (window.ramp4EditorAPI) {
+            clearInterval(loopy)
+            window.ramp4EditorAPI.initialize(rampConfig)
+            started = true
+          }
+        })
+      }
+
+      function downloadConfig(){
+        if (!started) {
+          alert('Cannot download config without starting the app.');
+          return;
+        }
+        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(window.ramp4EditorAPI.getConfig()));
+        const downloadAnchorNode = document.createElement('a');
+        downloadAnchorNode.setAttribute("href", dataStr);
+        downloadAnchorNode.hidden = true
+        downloadAnchorNode.setAttribute("download", "ramp_config.json");
+        document.body.appendChild(downloadAnchorNode); // required for firefox
+        downloadAnchorNode.click();
+        downloadAnchorNode.remove();
+      }
+    </script>
   </head>
   <body>
-    <div id="app" style="height: 95vh"></div>
+    <div id="container">
+      <div id="buttons">
+        <button onclick="showHelpInstructions()">Help Instructions</button>
+        <button onclick="openFileUpload()">Upload Config</button>
+        <button onclick="toggleInput()">Input Config</button>
+        <input oninput="onFileUpload(this.files[0])" type="file" id="upload-config" hidden accept=".json" />
+        <button onclick="downloadConfig()">Download Config</button>
+        <button onclick="startEditor()">Start Editor</button>
+      </div>
+      <textarea id="config-input" hidden oninput="onConfigInput(this.value)"></textarea>
+      <div id="app"></div>
+    </div>
     <script type="module" src="src/main.ts"></script>
+    <style>
+      body {
+        margin: 0;
+      }
+      #container {
+        display: flex;
+        flex-direction: column;
+        padding: 8px;
+        height: calc(100vh - 16px);
+        gap: 16px;
+      }
+      #app {
+        flex-grow: 1;
+        overflow-y: scroll;
+      }
+      #buttons {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+      }
+      #buttons button, #done-button {
+        font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+      sans-serif, Apple Color Emoji, Segoe UI Emoji;
+        background-color: black;
+        color: white;
+        padding: 8px;
+        width: 20%;
+        border-radius: 0.5rem;
+        height: 100%;
+        cursor: pointer;
+        font-size: 18px;
+      }
+
+      #config-input {
+        min-height: 200px;
+        padding: 8px;
+      }
+
+      #buttons button:hover {
+        opacity: 0.8;
+      }
+
+      #buttons button:focus-visible {
+        opacity: 0.8;
+      }
+    </style>
   </body>
 </html>
diff --git a/src/config-editor.vue b/src/config-editor.vue
@@ -53,7 +53,7 @@ onMounted(() => {
     </div>
     <div v-else class="h-full flex flex-col">
       <h1 class="flex-none h-9 text-3xl font-semibold">{{ t('title') }}</h1>
-      <div class="grow mt-3 flex overflow-y-scroll">
+      <div class="grow mt-3 flex">
         <Navbar class="basis-1/5 h-full" />
         <div class="basis-4/5 h-full px-5">
           <StartingFixturesEditor v-if="store.editingTemplate === 'starting-fixtures'" />