From 1eaea3391914e8478757b4eb8ec26b06d781d054 Mon Sep 17 00:00:00 2001
From: chylex <info@chylex.com>
Date: Tue, 25 Oct 2016 15:10:28 +0200
Subject: [PATCH] Add a settings overlay to gui.js

---
 src/tracker/gui.js | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/tracker/gui.js b/src/tracker/gui.js
index 98f80f2..e4d0056 100644
--- a/src/tracker/gui.js
+++ b/src/tracker/gui.js
@@ -1,5 +1,6 @@
 var GUI = (function(){
   var controller;
+  var settings;
   
   var stateChangedEvent = (type, detail) => {
     var force = type === "gui";
@@ -39,6 +40,7 @@ var GUI = (function(){
       
       controller.ele.innerHTML = [
         "<button id='dht-ctrl-upload'>Upload Previous File</button>",
+        "<button id='dht-ctrl-settings'>Settings</button>",
         "<button id='dht-ctrl-track'></button>",
         "<button id='dht-ctrl-download'>Download</button>",
         "<button id='dht-ctrl-reset'>Reset</button>",
@@ -50,6 +52,7 @@ var GUI = (function(){
       
       controller.ui = {
         btnUpload: DOM.id("dht-ctrl-upload"),
+        btnSettings: DOM.id("dht-ctrl-settings"),
         btnToggleTracking: DOM.id("dht-ctrl-track"),
         btnDownload: DOM.id("dht-ctrl-download"),
         btnReset: DOM.id("dht-ctrl-reset"),
@@ -63,6 +66,10 @@ var GUI = (function(){
         controller.ui.inputUpload.click();
       });
       
+      controller.ui.btnSettings.addEventListener("click", () => {
+        root.showSettings();
+      });
+      
       controller.ui.btnToggleTracking.addEventListener("click", () => {
         STATE.toggleTracking();
       });
@@ -113,6 +120,44 @@ var GUI = (function(){
         DOM.removeElement(controller.styles);
         controller = null;
       }
+    },
+    
+    showSettings: function(){
+      settings = {};
+      
+      // styles
+      
+      settings.styles = DOM.createStyle([
+        "#dht-cfg-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.5; display: block; z-index: 1000; }",
+        "#dht-cfg { position: absolute; left: 50%; top: 50%; width: 500px; height: 300px; margin-left: -250px; margin-top: -174px; padding: 8px; background-color: #fff; z-index: 1001; }"
+      ]);
+      
+      // overlay
+      
+      settings.overlay = DOM.createElement("div", document.body);
+      settings.overlay.id = "dht-cfg-overlay";
+      
+      settings.overlay.addEventListener("click", () => {
+        root.hideSettings();
+      });
+      
+      // main
+      
+      settings.ele = DOM.createElement("div", document.body);
+      settings.ele.id = "dht-cfg";
+      
+      // events
+      
+      stateChangedEvent("gui", "settings");
+    },
+    
+    hideSettings: function(){
+      if (settings){
+        DOM.removeElement(settings.overlay);
+        DOM.removeElement(settings.ele);
+        DOM.removeElement(settings.styles);
+        settings = null;
+      }
     }
   };