List implemented

2019-01-11 16:57:22 +01:00
parent 62985d2e2a
commit fc582eb48c
11 changed files with 241 additions and 156 deletions
--- a/public/js/custom.ts
+++ b/public/js/custom.ts
@@ -1,24 +1,96 @@
-const HTTP_BASE = "http://localhost:3000";

-function httpGetAsync(theUrl, callback) {
-  const xmlHttp = new XMLHttpRequest();
-  xmlHttp.onreadystatechange = () => {
-    if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
-      if (!!callback) {
-        callback(xmlHttp.responseText);
+
+const HTTP_BASE = "http://127.0.0.1:3000";
+const tokens = {};
+
+function httpGetAsync(token: string, theUrl, callback = null) {
+  if (!!token && tokens[token]) {
+    clearTimeout(tokens[token]);
+    delete tokens[token];
+  }
+  const t = setTimeout(() => {
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = () => {
+      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
+        if (!!callback) {
+          callback(xmlHttp.responseText);
+        }
      }
-    }
-  };
-  xmlHttp.open("GET", theUrl, true);  // true for asynchronous
-  xmlHttp.send(null);
+    };
+    xmlHttp.open("GET", theUrl, true);  // true for asynchronous
+    xmlHttp.send(null);
+    delete tokens[token];
+  }, 500);
+  if (!!token) {
+    tokens[token] = t;
+  }
+}
+
+function addProgressBarFunctionality(id: string) {
+  const rangediv = document.getElementById(id);
+  rangediv.getElementsByClassName("mdl-progress")[0].addEventListener("mdl-componentupgraded", () => {
+    let value = parseInt(rangediv.dataset.value, 10);
+    setProgress(rangediv, value);
+    rangediv.getElementsByClassName("mdl-list__item-secondary-info")[0].innerHTML = `${value}/7`;
+    rangediv.getElementsByClassName("minus-arrow")[0].addEventListener("click", () => {
+      value = Math.max(1, parseInt(rangediv.dataset.value, 10) - 1);
+      setProgress(rangediv, value);
+      if (!!rangediv.dataset.dosend) {
+        sendCocktail(id, value);
+      }
+    });
+    rangediv.getElementsByClassName("plus-arrow")[0].addEventListener("click", () => {
+      value = Math.min(7, parseInt(rangediv.dataset.value, 10) + 1);
+      setProgress(rangediv, value);
+      if (!!rangediv.dataset.dosend) {
+        sendCocktail(id, value);
+      }
+    });
+  });
+}
+
+function setProgress(rdiv, v) {
+  rdiv.dataset.value = v.toString();
+  rdiv.getElementsByClassName("mdl-progress")[0].MaterialProgress.setProgress(100 * (v - 1 ) / 6);
+  rdiv.getElementsByClassName("mdl-list__item-secondary-info")[0].innerHTML = `${v}/7`;
 }

 function sendAge(elem) {
-  console.log(`age: ${elem.value}`);
-  httpGetAsync(`${HTTP_BASE}/update/personal?age=${encodeURI(elem.value)}`, null);
+  httpGetAsync("agetoken", `${HTTP_BASE}/update/personal?age=${encodeURI(elem.value)}`);
 }

 function sendSex(elem) {
-  console.log("gender: " + elem.value);
-  httpGetAsync(`${HTTP_BASE}/update/personal?sex=${encodeURI(elem.value)}`, null);
+  httpGetAsync("sextoken", `${HTTP_BASE}/update/personal?sex=${encodeURI(elem.value)}`);
+}
+
+function sendNewCocktail() {
+  const cocktail = document.getElementById("cocktails").value;
+  if (cocktail === "") {
+    return;
+  }
+  const level = document.getElementById("pnew").dataset.value;
+  httpGetAsync(null, `${HTTP_BASE}/update/newcocktail?cocktail=${encodeURI(cocktail)}&level=${encodeURI(level)}`);
+  const elem = document.getElementById(cocktail);
+  if (!!elem) {
+    setProgress(elem, level);
+  } else {
+    const list = document.getElementById("cocktaillist");
+    let NAME = cocktail;
+    let LEVEL = level;
+    list.innerHTML += (`<li class="mdl-list__item mdl-list__item--two-line"><span class="mdl-list__item-primary-content"><i class="material-icons mdl-list__item-avatar">local_bar</i><span>${NAME}</span><span class="mdl-list__item-sub-title"> </span></span><span class="mdl-list__item-secondary-content">
+    <div id="${NAME}" class="mdl-grid" style="width:100px;text-align:center;padding:0;margin:0" data-value=""+LEVEL+"">
+      <div class="mdl-cell" style="width:33.33333333%;margin-right:0px;margin-left:0px"><a class="minus-arrow mdl-list__item-secondary-action" href="#"><i class="material-icons">remove</i></a></div>
+      <div class="mdl-cell" style="width:33.33333333%;margin-right:0px;margin-left:0px">
+        <div class="mdl-progress mdl-js-progress" style="text-align:center"><span class="mdl-list__item-secondary-info"></span></div>
+      </div>
+      <div class="mdl-cell" style="width:33.33333333%;margin-right:0px;margin-left:0px"><a class="plus-arrow mdl-list__item-secondary-action" href="#"><i class="material-icons">add</i></a></div>
+    </div></span></li>`);
+    addProgressBarFunctionality(NAME);
+  }
+}
+
+function sendCocktail(id, value) {
+  const cocktail = id;
+  const level = value;
+  httpGetAsync("updatetoken" + id, `${HTTP_BASE}/update/newcocktail?cocktail=${encodeURI(cocktail)}&level=${encodeURI(level)}`);
 }