List, export, recommendations done

public/js/custom.ts

@@ -1,8 +1,18 @@
-
-
-const HTTP_BASE = "http://127.0.0.1:3000";
+//const HTTP_BASE = "http://localhost:3000";
+const HTTP_BASE = "";
 const tokens = {};
 
+declare var componentHandler;
+
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
 function httpGetAsync(token: string, theUrl, callback = null) {
   if (!!token && tokens[token]) {
     clearTimeout(tokens[token]);
@@ -26,6 +36,9 @@ function httpGetAsync(token: string, theUrl, callback = null) {
   }
 }
 
+
+
+
 function addProgressBarFunctionality(id: string) {
   const rangediv = document.getElementById(id);
   rangediv.getElementsByClassName("mdl-progress")[0].addEventListener("mdl-componentupgraded", () => {
@@ -64,7 +77,7 @@ function sendSex(elem) {
 }
 
 function sendNewCocktail() {
-  const cocktail = document.getElementById("cocktails").value;
+  const cocktail = (document.getElementById("cocktails") as any).value;
   if (cocktail === "") {
     return;
   }
@@ -75,17 +88,21 @@ function sendNewCocktail() {
     setProgress(elem, level);
   } else {
     const list = document.getElementById("cocktaillist");
-    let NAME = cocktail;
-    let LEVEL = level;
+    let NAME = escapeHtml(cocktail);
+    let LEVEL = escapeHtml(level);
+    httpGetAsync(null, `${HTTP_BASE}/update/getingredients?cocktail=${encodeURI(cocktail)}`, (data) => {
+      document.getElementById(cocktail).parentElement.parentElement.getElementsByClassName("mdl-list__item-sub-title")[0].innerHTML = escapeHtml(data);
+    });
     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 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);
+    addProgressBarFunctionality(cocktail);
+    componentHandler.upgradeElement(document.getElementById(cocktail).getElementsByClassName("mdl-progress")[0]);
   }
 }
 
@@ -94,3 +111,28 @@ function sendCocktail(id, value) {
   const level = value;
   httpGetAsync("updatetoken" + id, `${HTTP_BASE}/update/newcocktail?cocktail=${encodeURI(cocktail)}&level=${encodeURI(level)}`);
 }
+
+
+
+
+
+
+
+
+
+function createCookie(name, value) {
+  const maxAge = "; max-age=21474836470";
+  console.log(name + "=" + value + maxAge + "; path=/");
+  document.cookie = name + "=" + value + maxAge + "; path=/";
+}
+
+function loadUID(elem) {
+  const uid = elem.getElementsByClassName("mdl-textfield__input")[0].value;
+  httpGetAsync(null, `${HTTP_BASE}/update/isvaliduid?uid=${encodeURI(uid)}`, (data) => {
+    if (data === "valid") {
+      console.log("cookie", document.cookie);
+      createCookie("uid", uid);
+      location.href = "/";
+    }
+  });
+}