From 2a919d5d56ab9ec419e7d735ac5e74a1a8977400 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Z=C3=A1le=C5=A1=C3=A1k?= <dz@pixx.cz>
Date: Wed, 23 Dec 2020 22:00:59 +0100
Subject: [PATCH] =?UTF-8?q?p=C5=99id=C3=A1n=C3=AD=20Settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css    | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 index.php        | 14 ++++++++++++++
 js/controller.js | 21 +++++++++++++++++++++
 js/model.js      | 17 ++++++++++++++---
 js/view.js       | 16 ++++++++++++++++
 5 files changed, 110 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 12b2185..0f0e36d 100644
--- a/css/style.css
+++ b/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;
+}
diff --git a/index.php b/index.php
index ba54c66..2b37039 100644
--- a/index.php
+++ b/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>
 
 
diff --git a/js/controller.js b/js/controller.js
index f41cd83..0318b84 100644
--- a/js/controller.js
+++ b/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);
+  }
 }
diff --git a/js/model.js b/js/model.js
index f377ca6..7468253 100644
--- a/js/model.js
+++ b/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);
+  }
 }
diff --git a/js/view.js b/js/view.js
index 12a2742..36c948d 100644
--- a/js/view.js
+++ b/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");
+  }
 }