přidání Settings

css/style.css

@@ -31,6 +31,7 @@ li:hover {
 li {
   cursor: pointer;
   user-select: none;
+  white-space: nowrap;
 }
 
 li::before {
@@ -91,9 +92,52 @@ sub {
   position: absolute;
   z-index: 5;
   display: none;
-  background-color: rgba(0, 0, 0, 0.438);
+  background-color: rgba(0, 0, 0, 0.75);
   width: 100%;
   height: 100%;
   justify-items: center;
   align-items: center;
 }
+
+.settingsBtn {
+  float: right;
+}
+
+.settingsbg {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.75);
+  width: 100%;
+  height: 100%;
+  display: none;
+  justify-items: center;
+  align-items: center;
+}
+
+.settings {
+  background-color: white;
+  width: 30vw;
+  height: 30vh;
+  padding: 1.5em;
+  border: 5px solid #c3c3c3;
+}
+
+form {
+  display: grid;
+  grid-template-columns: max-content auto;
+  align-items: center;
+  column-gap: 2em;
+  text-align: end;
+}
+
+#settingsClose {
+  background-color: rgb(88, 88, 88);
+  color: rgb(255, 255, 255);
+  cursor: pointer;
+  user-select: none;
+  width: 2em;
+  height: 2em;
+  margin: 0 0 1em auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

index.php

@@ -17,6 +17,7 @@
         <nav>
             <button class="clone">Clone</button>
             <button class="wipe">Wipe FS</button>
+            <button class="settingsBtn">Settings</button>
         </nav>
         <aside>
             <ul>
@@ -35,6 +36,19 @@
         <footer>
             CoMato © 2020 David Zálešák<sub>Seminární práce do předmětu tvorba www aplikací</sub>
         </footer>
+        <div class="settingsbg">
+            <div class="settings">
+                <div id="settingsClose" class="close">X</div>
+                <form action="javascript:void(0);">
+                    <label for="inputRepository">Git repository:</label>
+                    <input type="text" id="inputRepository">
+                    <label for="inputBaseDir">Base directory:</label>
+                    <input type="text" id="inputBaseDir">
+                    <button id="settingsSubmit">Submit</button>
+                    <button id="settingsCancel" class="close">Cancel</button>
+                </form>
+            </div>
+        </div>
     </div>
 
 

js/controller.js

@@ -7,8 +7,17 @@ class Controller {
 
     var cloneBtn = document.getElementsByClassName("clone")[0];
     var purgeBtn = document.getElementsByClassName("wipe")[0];
+    var settingsBtn = document.getElementsByClassName("settingsBtn")[0];
+    var settingsClose = document.getElementsByClassName("close");
+    var settingsSubmit = document.getElementById("settingsSubmit");
+
     cloneBtn.addEventListener("click", this.cloneRep.bind(this));
     purgeBtn.addEventListener("click", this.wipeFS.bind(this));
+    settingsBtn.addEventListener("click", view.openSettings.bind(this));
+    for (let i = 0; i < settingsClose.length; i++) {
+      settingsClose[i].addEventListener("click", view.closeSettings.bind(this));
+    }
+    settingsSubmit.addEventListener("click", this.saveSettings.bind(this));
   }
 
   wipeFS() {
@@ -40,4 +49,16 @@ class Controller {
       function (error) {}
     );
   }
+
+  saveSettings() {
+    let repo = document.getElementById("inputRepository");
+    let baseDir = document.getElementById("inputBaseDir");
+
+    this.model.setRepo(repo.value);
+    this.model.setBaseDir(baseDir.value);
+
+    this.redrawDirTree(this.view);
+    this.view.closeSettings();
+    console.log(repo.value);
+  }
 }

js/model.js

@@ -35,8 +35,9 @@ class Model {
     return dirtree;
   }
 
-  async dirTree(dir = "/") {
-    var tree = await this.dirList(dir);
+  async dirTree() {
+    let baseDir = localStorage.getItem("baseDir");
+    var tree = await this.dirList(baseDir);
 
     return tree;
   }
@@ -47,12 +48,22 @@ class Model {
   }
 
   async cloneRep() {
+    this.wipeFS();
+
     await git.clone({
       fs,
       http,
       dir,
-      url: "https://git.microlab.space/microlab/website.git",
+      url: localStorage.getItem("repo"),
       corsProxy: "https://cors.isomorphic-git.org",
     });
   }
+
+  setRepo(repoURL) {
+    localStorage.setItem("repo", repoURL);
+  }
+
+  setBaseDir(baseDir) {
+    localStorage.setItem("baseDir", baseDir);
+  }
 }

js/view.js

@@ -53,4 +53,20 @@ class View {
     }
     toggler[0].removeEventListener("click", addClass);
   }
+
+  openSettings() {
+    var settings = document.getElementsByClassName("settingsbg")[0];
+    settings.style.display = "grid";
+
+    let repo = document.getElementById("inputRepository");
+    let baseDir = document.getElementById("inputBaseDir");
+
+    repo.value = localStorage.getItem("repo")
+    baseDir.value = localStorage.getItem("baseDir");
+  }
+
+  closeSettings() {
+    var settings = document.getElementsByClassName("settingsbg")[0];
+    settings.style.removeProperty("display");
+  }
 }