frontend: initial setting panel

stv0g · Mar 24, 2022 · 93f89e2 · 93f89e2
1 parent ce02132
commit 93f89e2
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/frontend/css/index.scss b/frontend/css/index.scss
@@ -5,6 +5,10 @@ body > div.container {
   margin-bottom: 3em;
 }
 
+.hidden {
+  display: none;
+}
+
 .dropzone {
   box-sizing: border-box;
   display: none;
@@ -65,3 +69,7 @@ body > div.container {
 }
 
 @import "~bootstrap/scss/bootstrap";
+
+body > .container .row {
+  margin-bottom: 1rem;
+}
diff --git a/frontend/index.html b/frontend/index.html
@@ -31,7 +31,36 @@ <h4 class="subtitle">A terascale file uploader</h4>
         </div>
         <div class="row">
             <div class="col">
-                <div id="result" class="alert" role="alert"></div>
+                <div id="result" class="alert hidden" role="alert"></div>
+            </div>
+        </div>
+        <div class="row settings">
+            <div class="col">
+                <div class="accordion" id="accordion-settings">
+                    <div class="accordion-item">
+                      <h2 class="accordion-header" id="heading-settings">
+                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#settings" aria-expanded="false" aria-controls="settings">
+                          Settings
+                        </button>
+                      </h2>
+                      <div id="settings" class="accordion-collapse collapse" aria-labelledby="heading-settings" data-bs-parent="#accordion-settings">
+                        <div class="accordion-body">
+                            <div class="mb-3">
+                                <label for="expiration" class="form-label">Expiration Time</label>
+                                <select class="form-select" aria-label="Expiration" id="expiration"></select>
+                            </div>
+                            <div class="mb-3">
+                                <input class="form-check-input" type="checkbox" value="" id="shorten">
+                                <label for="shorten" class="form-label">Shorten Link</label>
+                            </div>
+                        </div>
+                      </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
                 <div id="statistics" class="card">
                     <div class="card-body">
                         <h5 class="card-title">Transfer statistics</h5>
@@ -64,4 +93,4 @@ <h5 class="card-title">Transfer statistics</h5>
     </div>
 </body>
 
-</html>
+</html>
diff --git a/frontend/src/index.ts b/frontend/src/index.ts
@@ -157,6 +157,15 @@ async function fileChanged(ev: Event) {
     await startUpload(tgt.files);
 }
 
+function onConfig(config: Config) {
+    for (let exp of config.expiration_classes) {
+        var opt = document.createElement('option');
+        opt.value = exp.tag;
+        opt.innerHTML = exp.title;
+        selExpiration.appendChild(opt);
+    }
+}
+
 export async function load() {
     inputElm = document.getElementById("file") as HTMLInputElement;
     progressElm = document.getElementById("progress") as HTMLProgressElement;
@@ -178,6 +187,10 @@ export async function load() {
     dropZone.addEventListener("dragover", allowDrag);
     dropZone.addEventListener("drop", handleDrop);
     dropZone.addEventListener("dragleave", hideDropZone);
+
+    config = await apiRequest("config", {}, "GET");
+
+    onConfig(config as Config);
 }
 
 window.addEventListener("load", load);