Merge branch 'minor-bugfixes-after-bootstrap-integration' into 'develop'

Minor bugfixes after bootstrap integration

See merge request bluekay/shopping-list!10

.htaccess

@@ -14,7 +14,7 @@
   #Rezept Seite
   RewriteRule ^recipe/([0-9]+)$ ?site=recipe&number=$1
 
-  #Rezepteditieren
+  #Rezept editieren
   RewriteRule ^edit-recipe/([0-9]+)$ ?site=edit-recipe&number=$1
 
   #Loginseite

bin/adduser.js

@@ -30,8 +30,8 @@ function userPopover(title, text){
     $("#newuser").data("toggle", "popover");
     $("#newuser").data("container", "body");
     $("#newuser").data("placement", "bottom");
+    $("#newuser").data("trigger", "focus");
     $("#newuser").data("html", true);
-    // $("#newuser").data("trigger", "focus");
     $("#newuser").attr("title", title);
     $("#newuser").data("content", text);
     $("#newuser").popover('show');

bin/autocomplete.js

@@ -1,80 +1,34 @@
-function autocomplete(textelement, values) {
+function autocomplete() {
-  var currentFocus;
+    var apiurl = $(this).data("apiurl");
-  textelement.addEventListener("input", function(e){
+    var search = $(this).val();
-    var a, b, i, val = this.value;
+    var elem = $(this);
-    closeAllLists();
+    if (search.length > $(this).data("strlen")) {
-    if(!val){ return false;}
+        $.post({
-    currentFocus = -1;
+            url: apiurl,
-    a = document.createElement("div");
+            data: {
-    a.setAttribute("id", this.id + "ingredientAutocomplete-list");
+                q: search
-    a.setAttribute("class", "ingredientAutocomplete-items");
+            },
-    this.parentNode.appendChild(a);
+            success: function (data) { createAutocompleteDropdown(elem, JSON.parse(data)); }
-    for (var i = 0; i < values.length; i++) {
-      if(values[i].substr(0, val.length).toUpperCase() == val.toUpperCase()){
-        b = document.createElement("div");
-        b.innerHTML = "<strong>" + values[i].substr(0, val.length) + "</strong>";
-        b.innerHTML += values[i].substr(val.length);
-        b.innerHTML += "<input type='hidden' value='" + values[i] + "'>";
-        b.addEventListener("click", function(e){
-          textelement.value = this.getElementsByTagName("input")[0].value;
-          closeAllLists();
         });
-        a.appendChild(b);
-      }
     }
-  });
-  textelement.addEventListener("keydown", function(e){
-    var x = document.getElementById(this.id + "ingredientAutocomplete-list");
-    if (x) {x.getElementsByTagName("div");}
-    if (e.keyCode == 40) {
-      currentFocus++;
-      addActive(x);
-    }
-    else if (e.keyCode == 38) {
-      currentFocus--;
-      addActive(x);
-    }
-    else if (e.keyCode == 13) {
-      e.preventDefault();
-      if (currentFocus > -1) {
-        if (x) {
-          var y = $("#"+x.id).parent().find("input");
-          x.childNodes[currentFocus].click();
-          y.focus();
-        }
-      }
-    }
-  });
-  function addActive(x) {
-    if(!x) {return false;}
-    removeActive(x);
-    if(currentFocus>=x.childNodes.length){currentFocus=0;}
-    if(currentFocus<0){currentFocus = (x.childNodes.length-1);}
-    x.childNodes[currentFocus].classList.add("ingredientAutocomplete-active");
-  }
-  function removeActive(x) {
-    for (var i = 0; i < x.childNodes.length; i++) {
-      x.childNodes[i].classList.remove("ingredientAutocomplete-active");
-    }
-  }
-  function closeAllLists(elmnt){
-    var x = document.getElementsByClassName("ingredientAutocomplete-items");
-    for (var i = 0; i < x.length; i++) {
-      x[i].parentNode.removeChild(x[i]);
-    }
-  }
-  document.addEventListener("click", function(e){
-      closeAllLists(e.target);
-  });
 }
-var values = [];
+function createAutocompleteDropdown(elem, values) {
-$(document).ready(function(){
+    var dropdownmenue = $('[aria-labelledby=' + elem.attr("id") + ']');
-  $.ajax({
+    var dropdownItems = dropdownmenue.find(".dropdown-item");
-    type: "POST",
+    dropdownItems.remove();
-    url: "/api/recipes/auto",
+
-    data: {},
+    for (index = 0; index < values.length; index++) {
-    success: function(data){
+        var value = values[index];
-      values = data.split("||");
+        var regex = new RegExp((elem).val(), "ig");
+        var displayvalue = value.replace(regex, ("<b><u>" + (elem).val() + "</u></b>"));
+
+        var button = $("<button class=\"dropdown-item\" type=\"button\" data-val='" + value + "' aria-textfield='" + elem.attr("id") + "'>" + displayvalue + "</button>");
+        button.click(dropdownButtonClick);
+        
+        dropdownmenue.append(button);
     }
-  });
+}
-});
+function dropdownButtonClick() {
+    var string = $(this).data("val");
+    $('#' + $(this).attr("aria-textfield")).val(string);
+}

bin/list.js

@@ -1,3 +1,11 @@
+$(document).ready(function () {
+  $("input[type=checkbox]").change(checkItem);
+  $("#remove").click(deleteCheckeditems);
+  $("#nameField").focus();
+  $("#anzahl").on("focus", function () { $(this).select(); });
+  $("#nameField").on("focus", function () { $(this).select(); });
+});
+
 function deleteCheckeditems() {
   $.post({
     url: "api/list/del",
@@ -45,12 +53,4 @@ function checkItem() {
       $("[data-id='" + dataId + "'").parent().parent().popover('show');
     }
   });
-}
+}
-
-$(document).ready(function () {
-  $("input[type=checkbox]").change(checkItem);
-  $("#remove").click(deleteCheckeditems);
-  $("#nameField").focus();
-  $("#anzahl").on("focus", function () { $(this).select(); });
-  $("#nameField").on("focus", function () { $(this).select(); });
-});

bin/manageRecipe.js

@@ -4,16 +4,7 @@ $(document).ready(function () {
   $("input[type=number]").on("focus", function () { $(this).select(); });
   $("input[type=text]").on("focus", function () { $(this).select(); });
 
-  // $(".ingredientName").on("focus", function () {
+  $(".autocomplete-ingredient").on("input", autocomplete);
-  //   autocomplete(this, values);
-  // });
-  // $(".ingredientName").keydown(function (x) {
-  //   if ((x.keyCode == 9) && ($(this).parent().parent().next().prop("class") != $(this).parent().parent().prop("class"))) {
-  //     $(this).parent().parent().find(".addIngredient").click();
-  //   }
-  // });
-  // $(".ingredientAmount").on("focus", function () { $(this).select(); });
-
 });
 
 function removeItem(elem) {
@@ -34,6 +25,7 @@ function addItem() {
 
   clone.find("input[type=text]").attr("name", ("ingredient[" + dataID + "][Name]"));
   clone.find("input[type=text]").val("");
+  clone.find("input[type=text]").on("input", autocomplete);
   clone.find("input[type=text]").on("focus", function () { $(this).select(); });
   clone.find("input[type=number]").attr("name", ("ingredient[" + dataID + "][Amount]"));
   clone.find("input[type=number]").val("1");

bin/settings.js

@@ -1,4 +1,6 @@
 $(document).ready(function () {
+    $(".user-input").on("input", checkUserStrings);
+    $("#userSaveButton").click(userChange);
     $(".password-input").on("input", checkPasswordStrings);
     $("#passwordSaveButton").click(savePassword);
     $("#export-recipe-button").click(exportRecipe);
@@ -46,18 +48,46 @@ $(document).ready(function () {
     });
 });
 
-function themeChange(){
+function userChange() {
+    var mail = $('.user-input.is-valid[aria-label="email"]').val();
+    var userName = $('.user-input.is-valid[aria-label="Username"]').val();
+    if(mail != null){
+        $.post(
+            "/api/user/change-mail",
+            {
+                mail: mail
+            },
+            function(){
+                window.location.href = window.location.href;
+            }
+        )
+    }
+    
+    if (userName != null) {
+        $.post(
+            "/api/user/change-username",
+            {
+                username: userName
+            },
+            function () {
+                window.location.href = window.location.href;
+            }
+        )
+    }
+}
+
+function themeChange() {
     $("#themeSaveButton").removeClass("disabled");
     $("#themeSaveButton").attr("disabled", false);
 }
 
 function changeTheme() {
     $.post(
-        "/api/user/change-theme", 
+        "/api/user/change-theme",
         {
             theme: $('#changeThemePrepend option:selected').val()
         },
-        function(){
+        function () {
             window.location.href = window.location.href;
         }
     );
@@ -113,6 +143,42 @@ function checkPasswordStrings() {
     }
 }
 
+function checkUserStrings() {
+    switch ($(this).attr("aria-label")) {
+        case "Username":
+            if ($(this).val().length >= 3) {
+                $("#userSaveButton").attr("disabled", false);
+                $("#userSaveButton").removeClass("disabled");
+                $(this).removeClass("is-invalid");
+                $(this).addClass("is-valid");
+            }
+            else {
+                $("#userSaveButton").attr("disabled", true);
+                $("#userSaveButton").addClass("disabled");
+                $(this).addClass("is-invalid");
+                $(this).removeClass("is-valid");
+            }
+            break;
+        case "email":
+            mailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+            if (($(this).val().length > 5) && (mailRegEx.exec($(this).val()) !== null)) {
+                $("#userSaveButton").attr("disabled", false);
+                $("#userSaveButton").removeClass("disabled");
+                $(this).removeClass("is-invalid");
+                $(this).addClass("is-valid");
+            }
+            else {
+                $("#userSaveButton").attr("disabled", true);
+                $("#userSaveButton").addClass("disabled");
+                $(this).addClass("is-invalid");
+                $(this).removeClass("is-valid");
+            }
+            break;
+        default:
+            break;
+    }
+}
+
 function downloadObjectAsJson(exportObj, exportName) {
     var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
     var downloadAnchorNode = document.createElement('a');

cont/list.php

@@ -34,24 +34,25 @@
             print_r("<div class='$div_item_name_classes'>$item->Name</div>");
         print_r("</div>");
       }
-      print_r("<div class='$div_item_row_classes  d-flex flex-row align-items-center' data-id='new'>");
-            print_r("<div class='$div_item_checkbox_classes col-0'><input type='checkbox' class='$input_item_checkbox_classes' disabled></div>");
-
-            print_r("<div class='$div_item_quantity_classes'>");
-              print_r("<input type='number' name='anzahl' value='1' class='m-1 p-0 col-4' id='list_row_anzahl_input'>");
-              print_r("<select name='einheit' class='p-0 m-1 col-5'>");
-              foreach ($units->list as $index => $unit) {
-              if($unit->Standard){$selected="selected";}else{$selected=NULL;}
-                print_r("<option value='$unit->ID' $selected>$unit->Name</option>");
-              }
-              print_r("</select>");
-            print_r("</div>");
-
-            print_r("<div class='$div_item_name_classes col-9 align-self-end'>");
-              print_r("<input type='text' name='name' id='nameField' class='col-8 w-100' autocomplete='off' required />");
-              print_r("<input class='btn bg-secondary ml-1 col-2' type='submit' name='submit' value='+' id='add'>");
-            print_r("</div>");
-      print_r("</div>");
     ?>
+
+    <div class="input-group mb-3 mt-3" data-id='new'>
+      <div class="input-group-prepend col-3 p-0">
+        <input type='number' name='anzahl' value='1' class='w-50'>
+        <select class="w-50" name="einheit">
+          <?php
+            foreach ($units->list as $index => $unit) {
+              if($unit->Standard){$selected="selected";}else{$selected=NULL;}
+              print_r("<option value='$unit->ID' $selected>$unit->Name</option>");
+            }
+          ?>
+        </select>
+      </div>
+      <input type="text" name='name' class="form-control" id="nameField" placeholder="Item" aria-label="Item" aria-describedby="button-addon2"  autocomplete='off' required>
+      <div class="input-group-append">
+        <button class="btn btn-outline-secondary" type="submit" id="button-addon2"><i class="fas fa-plus"></i></button>
+      </div>
+    </div>
+
   </form>
 </div>

cont/manageRecipe.php

@@ -12,8 +12,8 @@
     $additionalInput = "";
   }
 ?>
-<!-- <script src="/bin/autocomplete.js" charset="utf-8"></script> -->
 <script src="/bin/manageRecipe.js" charset="utf-8"></script>
+<script src="/bin/autocomplete.js" charset="utf-8"></script>
 <?php echo $script; ?>
 <div class="container mt-5">
   <h1><?php echo $title ?></h1>
@@ -54,12 +54,19 @@
         }
       ?>
     </select>
+
     <div class="input-group">
-      <input type="text" class="form-control" name="ingredient[1][Name]" placeholder="Zutat" required>
+      <input type="text" data-apiurl="/api/recipes/auto" data-strlen="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuAutocomplete" class="autocomplete-ingredient form-control dropdown"  name="ingredient[1][Name]" placeholder="Zutat" autocomplete="off" required>
+      
+      <div class="dropdown-menu" aria-labelledby="dropdownMenuAutocomplete">
+        <button class="dropdown-item" type="button" data-value="-1">Tippen um zu suchen... </button>
+      </div>
+
       <div class="input-group-append">
         <span class="input-group-text p-0"><button onclick="removeItem(this);" class="removeItem fas fa-trash-alt bg-transparent rounded-right border-0 p-2 pl-3 pr-3 text-danger"></button></span>
       </div>
     </div>
+
   </div>
 
 

cont/recipe.php

@@ -23,7 +23,7 @@
     echo "<h1 data-recipeid='$recipe->ID'>$recipe->Name</h1>";
   echo '</div>';
 
-  echo '<div class="card mw-50">';
+  echo '<div class="card mw-50 mb-3">';
     echo "<div class='card-body' id='ingredients'>";
     echo "<h2 class='card-title'>Zutaten</h2>";
     foreach($recipe->Zutaten as $index => $Zutat){

cont/settings.php

@@ -12,14 +12,14 @@
                 <div class="input-group-prepend">
                     <span class="input-group-text" id="userPrepend">Benutzername</span>
                 </div>
-                <input type="text" class="form-control" placeholder="<?php echo $user->username; ?>" aria-label="Username" aria-describedby="userPrepend">
+                <input type="text" class="user-input form-control" placeholder="<?php echo $user->username; ?>" aria-label="Username" aria-describedby="userPrepend">
             </div>
 
             <div class="input-group mb-3">
                 <div class="input-group-prepend">
                     <span class="input-group-text" id="mailPrepend">Mail</span>
                 </div>
-                <input type="email" class="form-control" placeholder="<?php echo $user->email; ?>" aria-label="email" aria-describedby="mailPrepend">
+                <input type="email" class="user-input form-control" placeholder="<?php echo $user->email; ?>" aria-label="email" aria-describedby="mailPrepend">
             </div>
 
             <div class="input-group mb-3">
@@ -28,7 +28,7 @@
                 </div>
                 <input type="text" class="form-control" value="<?php echo $user->last_login; ?>" aria-label="login" aria-describedby="loginPrepend" readonly>
             </div>
-            <button class="btn btn-primary" id="userSaveButton">Speichern</button>
+            <button class="btn btn-primary disabled" id="userSaveButton" disabled>Speichern</button>
         </div>
     </div>
 

fonts/lato/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

fonts/newscycle/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2011, Nathan Willis (nwillis@glyphography.com), with Reserved Font Name "News Cycle."
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

index.php

@@ -28,16 +28,20 @@ $user->get_info($_COOKIE["token"]);
 
 <head>
   <meta charset="utf-8">
-  <meta name="theme-color" content="#4CAF50" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="apple-touch-icon" href="/pic/fav.ico">
   <link rel="shortcut icon" type="image/png" href="/pic/fav.ico" />
   <link rel="stylesheet" href="/style/fontawesome/css/all.css">
   <?php
   if (file_exists($_SESSION["docroot"] . '/style/themes/' . $user->theme . ".css")) {
+    $cssFileContents = file_get_contents($_SESSION["docroot"]."/style/themes/".$user->theme.".css");
+    preg_match_all('/\s+--primary:\s#(.{3,6})/m', $cssFileContents, $matches, PREG_SET_ORDER, 0);
+    $themecolor = $matches[0][1];
     print_r('<link rel="stylesheet" href="/style/themes/' . $user->theme . '.css">');
+    print_r('<meta name="theme-color" content="#'.$themecolor.'">');
   } else {
     print_r('<link rel="stylesheet" href="/style/main.css">');
+    print_r('<meta name="theme-color" content="#007bff">');
   }
   ?>
   <link rel="stylesheet" href="/style/helper.css">

php/classes.recipe.php

@@ -175,13 +175,14 @@
       $mysqli->close();
     }
 
-    function getAllIngredients(){
+    function getAllIngredientsContaining($q){
       include $_SESSION["docroot"].'/php/connect.php';
       $values = array();
-      $result = $mysqli->query("SELECT Name FROM Zutat ORDER BY Name ASC");
+      $result = $mysqli->query("SELECT Name FROM Zutat WHERE Name LIKE '%$q%' ORDER BY Name ASC");
       while($item = $result->fetch_assoc()){
-        echo $item["Name"]."||";
+        array_push($values, $item["Name"]);
       }
+      print_r(json_encode($values));
       $mysqli->close();
     }
 

php/classes.user.php

@@ -34,6 +34,29 @@
       }
     }
 
+    function change_mail($mailaddress){
+      include $_SESSION["docroot"].'/php/hash.php';
+      include $_SESSION["docroot"].'/php/connect.php';
+      $this->mail = $mailaddress;
+      $result = $mysqli->query("UPDATE `users` SET `email` = '$mailaddress' WHERE `users`.`uid` = $this->uid;");
+      $mysqli->close();
+    }
+
+    function change_username($newname){
+      include $_SESSION["docroot"].'/php/hash.php';
+      include $_SESSION["docroot"].'/php/connect.php';
+      $this->username = $newname;
+      $result = $mysqli->query("SELECT * WHERE `username` = $this->username;");
+      if($result->num_rows==0){
+        $result = $mysqli->query("UPDATE `users` SET `username` = '$newname' WHERE `users`.`uid` = $this->uid;");
+        print_r("0");
+      }
+      else{
+        print_r("1");
+      }
+      $mysqli->close();
+    }
+
     function change_theme($theme){
       include $_SESSION["docroot"].'/php/connect.php';
       $result = $mysqli->query("UPDATE `users` SET `theme` = '$theme' WHERE `users`.`uid` = $this->uid;");

php/edit-recipes.php

@@ -13,7 +13,7 @@
       break;
 
     case 'auto':
-      $book->getAllIngredients();
+      $book->getAllIngredientsContaining($_POST["q"]);
       break;
 
     case 'edit':

php/edit-user.php

@@ -13,7 +13,14 @@
     case 'change-theme':
       $user->change_theme($_POST["theme"]);
       break;
-  
+
+    case 'change-mail':
+      $user->change_mail($_POST["mail"]);
+      break;
+
+    case 'change-username':
+      $user->change_username($_POST["username"]);
+      break;
 
     case 'new':
       $user->new($_POST["username"], $_POST["passwd"]);

style/bkp/adduser.css

@@ -1,20 +0,0 @@
-label {
-    margin-top: 3em;
-}
-#button_newuser {
-    margin-top: 3em;
-}
-#text_user {
-    margin-top: 1em;
-}
-.adduser {
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    width: 50%;
-}
-#adduser-button-done {
-  position: absolute;
-  bottom: 2em;
-  right: 2em;
-}

style/bkp/error.css

@@ -1,3 +0,0 @@
-body {
-    font-family: 'Open Sans', sans-serif;
-}

style/bkp/install.css

@@ -1,24 +0,0 @@
-.installer {
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  width: 50%;
-}
-label {
-  margin-top: 3em;
-}
-#text_database {
-  margin-top: 1em;
-}
-#text_dbhost {
-  margin-top: 1em;
-}
-#text_user {
-  margin-top: 1em;
-}
-#text_passwd {
-  margin-top: 1em;
-}
-#button_install {
-  margin-top: 3em;
-}

style/bkp/login.css

@@ -1,38 +0,0 @@
-#login {
-  display: flex;
-  flex-direction: column;
-}
-.loginform {
-  width: 75%;
-  max-width: 30em;
-  font-size: 16px;
-  padding: 12px 20px 12px 40px;
-  border: 1px solid #ddd;
-  margin: .1em auto;
-}
-#rememberme {
-  border: none;
-  cursor: pointer;
-  user-select: none;
-}
-#rememberme input {
-  margin-right: .4em;
-  cursor: pointer;
-}
-#loginButton {
-  border: none;
-}
-#wrongpw {
-  width: 100%;
-  margin: 0 auto;
-  color: red;
-  font-weight: 800;
-  text-align: center;
-}
-#logout {
-  width: 100%;
-  margin: 0 auto;
-  color: #4CAF50;
-  font-weight: 800;
-  text-align: center;
-}

style/bkp/manageRecipe.css

@@ -1,116 +0,0 @@
-#newRecipeForm {
-  display: flex;
-  flex-direction: column;
-}
-#safeRecipe {
-  float: right;
-}
-#newRecipeForm div font {
-  font-weight: 800;
-  padding-right: 1em;
-}
-#RecipeFormName {
-  font-size: 16px;
-  padding: .2em;
-  border: 1px solid #ddd;
-}
-#recipeDurationInput {
-  width: 3em;
-  font-size: 16px;
-  padding: .2em;
-  border: 1px solid #ddd;
-  margin-right: .5em;
-}
-#recipeDescription {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 16px;
-  padding: .2em;
-  border: 1px solid #ddd;
-  width: 100%;
-  box-sizing: border-box;
-}
-.ingredientLine {
-  display: flex;
-  margin-bottom: .1em;
-}
-.ingredientAmount {
-  width: 3em;
-  font-size: 16px;
-  padding: .2em;
-  border: 1px solid #ddd;
-}
-.ingredientUnit {
-  -webkit-appearance: none;
-  width: 3em;
-  margin-left: .5em;
-  font-size: 16px;
-  padding: .2em;
-  border: none;
-  color: white;
-  font-weight: 800;
-  background-color: #5f5f5f;
-}
-.ingredientName {
-  font-size: 16px;
-  padding: .2em;
-  border: 1px solid #ddd;
-}
-.ingredientAutocomplete {
-  position: relative;
-  margin-left: .5em;
-  display: flex;
-  flex-direction: column-reverse;
-}
-.ingredientAutocomplete-items {
-  position: absolute;
-  border: 1px solid #d4d4d4;
-  border-bottom: none;
-  border-top: none;
-  width: 100%;
-  z-index: 99;
-  transform: translateY(-2em);
-}
-.ingredientAutocomplete-items div {
-  padding: 10px;
-  cursor: pointer;
-  background-color: #fff;
-  border-bottom: 1px solid #d4d4d4;
-}
-.ingredientAutocomplete-items div:hover {
-  background-color: #e9e9e9;
-}
-.ingredientAutocomplete-active {
-  background-color: DodgerBlue !important;
-  color: #ffffff;
-}
-.removeIngredient {
-  display: inline-block;
-  text-align: center;
-  padding: .1em .2em .3em .2em;
-  margin-left: .5em;
-  height: 1em;
-  width: 1em;
-  height: 20px;
-  width: 20px;
-  border-radius: 100%;
-  background-color: black;
-  color: white;
-  cursor: pointer;
-  user-select: none;
-}
-
-.addIngredient {
-  display: inline-block;
-  text-align: center;
-  padding: .1em .2em .3em .2em;
-  margin-left: .5em;
-  height: 1em;
-  width: 1em;
-  height: 20px;
-  width: 20px;
-  border-radius: 100%;
-  background-color: #5f5f5f;
-  color: white;
-  cursor: pointer;
-  user-select: none;
-}

style/bkp/master.css

@@ -1,111 +0,0 @@
-@font-face {
-    font-family: Roboto;
-    src: url("/fonts/Roboto-Regular.ttf");
-}
-
-html {
-  transition: .6s;
-  font-family: 'Roboto';
-  background-color: #ccc;
-}
-
-h1 {
-  font-size: 3em;
-  margin-top: .5em;
-  padding-bottom: .5em;
-  border-bottom: 1px solid grey;
-  text-align: center;
-}
-
-h2 {
-  font-size: 2em;
-  text-align: left;
-  margin-top: .5em;
-  padding-bottom: .5em;
-  border-bottom: 1px solid grey;
-  width: 80%;
-}
-
-h3 {
-  font-size: 1.5em;
-  text-align: left;
-  margin-top: .5em;
-  padding-bottom: .5em;
-  border-bottom: 1px solid grey;
-  width: 75%;
-}
-
-.even {
-  background-color: #565656;
-}
-
-.odd {
-  background-color: #888;
-}
-
-.search {
-  background-image: url('/pic/search.png');
-  background-position: 10px 12px;
-  background-repeat: no-repeat;
-  font-size: 16px;
-  padding: 12px 20px 12px 40px;
-  border: 1px solid #ddd;
-}
-
-.button {
-  -webkit-appearance: none;
-  border: none;
-  display: inline-block;
-  padding: 5px 15px;
-  text-align: center;
-  text-decoration: none;
-  font-weight: 800;
-  background-color: #4CAF50;
-  color: white;
-  cursor: pointer;
-}
-
-.button:hover {
-  background-color: #4CAFFF;
-}
-
-.button-disabled {
-  background-color: grey;
-  cursor: not-allowed;
-}
-
-.button-disabled:hover {
-  background-color: grey;
-}
-
-.hover:hover {
-  background-color: #4CAF50;
-  cursor: pointer;
-}
-
-#info-popup {
-  pointer-events: none;
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  bottom: 2%;
-  margin: 0;
-  left: 0;
-  width: 100%;
-}
-#info-popup-text {
-  color: #ffffff;
-  background-color: #000000;
-  padding: .1em .5em .2em;
-  border-radius: 50px;
-  opacity: 0;
-}
-
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-  10% {
-    opacity: 1;
-  }
-}

style/bkp/print.css

@@ -1,25 +0,0 @@
-@media print {
-  html{
-    background-color: white;
-  }
-  #remove{display: none;}
-  div #done{display: none;}
-  div #count font, div #name font{
-    color: black;
-  }
-  div #count font {
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-    padding-left: 2em;
-  }
-  div #name font {
-    padding-right: 3em;
-  }
-  .even {
-    background-color: #fff;
-  }
-
-  .odd {
-    background-color: #b9b9b9;
-  }
-  .new{display: none;}

style/bkp/recipe.css

@@ -1,83 +0,0 @@
-#recipeHeader {
-  margin-top: 2em;
-  font-size: 2em;
-  text-align: center;
-}
-#ingredients {
-  display: inline-flex;
-  flex-direction: column;
-  margin-top: 1em;
-  color: white;
-  width: 100%;
-}
-.ingredients_row {
-  display: flex;
-  flex-direction: row;
-  min-height: 24px;
-  margin-bottom: .1em;
-  align-items: center;
-  border-left: 3px solid #4CAF50;
-  border-bottom-right-radius: 5px;
-  border-top-right-radius: 5px;
-  max-width: 30em;
-}
-.ingredients_row_amount {
-  width: auto;
-  min-width: 2em;
-  max-width: 3em;
-  text-align: right;
-}
-.ingredients_row_unit {
-  width: 4em;
-  text-indent: .5em;
-  text-align: left;
-}
-.ingredients_row_name {
-  text-indent: 2em;
-}
-#editingMenu font {
-  display: block;
-}
-#editingMenu {
-  position: fixed;
-  width: 2em;
-  height: 3em;
-  top: 1em;
-  right: .5em;
-  background-image: url("/pic/editingMenu.png");
-  background-repeat: no-repeat;
-  background-size: contain;
-  transition: .6s;
-  cursor: pointer;
-}
-#editingMenuOpen {
-  display: flex;
-  position: fixed;
-  top: 1em;
-  right: .5em;
-  flex-direction: column;
-  justify-content: center;
-  transition: .6s;
-  transform: translate(0, -12em);
-}
-
-#editingMenuOpen font {
-  text-align: center;
-  background-color: /*#4CAF50*/ black;
-  font-family: "Lucida Console", Monaco, monospace;
-  color: white;
-  font-size: 2em;
-  height: 40px;
-  width: 40px;
-  padding: .1em .2em .3em .2em;
-  margin-bottom: .1em;
-  border-radius: 100%;
-  cursor: pointer;
-  user-select: none;
-}
-section.parsedown-section {
-  padding: 1em;
-  margin: 1em;
-  border: 1px solid grey;
-  border-radius: 5px;
-}

style/bkp/recipes.css

@@ -1,28 +0,0 @@
-#searchRecipe {
-  width: 75%;
-  margin-top: 2em;
-}
-
-#recipes {
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  margin: 0 auto;
-  padding: 0;
-  margin-top: 1em;
-  left: 0;
-  width: 100%;
-}
-
-#recipes font {
-  height: 24px;
-  margin: .1em;
-  padding: 0 1em;
-  color: #ffffff;
-  border-radius: 5px;
-}
-
-#new-recipe {
-  float: right;
-}

style/helper.css

@@ -1,9 +1,3 @@
-#nameField {
-    min-width: calc(100% - 67px);
-}
-#add {
-    width: 40px;
-}
 .toast {
     right: 0;
     left: unset !important;

style/parsedown.css

@@ -1,100 +0,0 @@
-.parsedown-section h1 {
-  font-size: 1.3em;
-  text-align: left;
-  border-bottom: 1px solid grey;
-  color: #333;
-  text-transform: uppercase;
-  max-width: 75%;
-}
-
-.parsedown-section h2 {
-  font-size: 1.2em;
-  text-align: left;
-  border-bottom: 1px solid grey;
-  color: #333;
-  text-transform: uppercase;
-  max-width: 70%;
-}
-
-.parsedown-section h3 {
-  font-size: 1.1em;
-  text-align: left;
-  border-bottom: 1px solid grey;
-  color: #444;
-  text-transform: capitalize;
-  max-width: 60%;
-}
-
-.parsedown-section h4 {
-  font-size: 1em;
-  text-align: left;
-  border-bottom: 1px solid grey;
-  color: #444;
-  text-transform: capitalize;
-  max-width: 60%;
-}
-
-.parsedown-section h5 {
-  font-size: .9em;
-  text-align: left;
-  border-bottom: 1px solid grey;
-  color: #555;
-  text-transform: lowercase;
-  font-weight: normal;
-  max-width: 55%;
-}
-
-.parsedown-section h6 {
-  font-size: .8em;
-  text-align: left;
-  border-bottom: 1px solid grey;
-  color: #555;
-  text-transform: lowercase;
-  font-weight: normal;
-  max-width: 50%;
-}
-
-.parsedown-section table {
-  border-collapse: collapse;
-  border: 1px solid black;
-  margin: 1em 0;
-}
-
-.parsedown-section th {
-  background-color: #4CAF50;
-  color: white;
-}
-
-.parsedown-section td, th {
-  /* border: 1px solid black; */
-  padding: .2em .5em;
-}
-
-.parsedown-section tr:nth-child(even) {
-  background-color: #f2f2f2;
-}
-
-.parsedown-section button {
-  display: block;
-  border: 1px solid #777777;
-  padding: .5em 1em;
-  margin: 1em .25em;
-}
-
-.parsedown-section pre {
-  max-height: calc(50vh - 9em);
-  background: #f4f4f4;
-  border: 1px solid #ddd;
-  border-left: 3px solid #a0c391;
-  color: #666;
-  page-break-inside: avoid;
-  font-family: monospace;
-  font-size: 15px;
-  line-height: 1.6;
-  margin-bottom: 1.6em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1em 1.5em;
-  display: block;
-  word-wrap: break-word;
-}

style/settings.css

@@ -1,61 +0,0 @@
-.settings {
-  display: flex;
-  justify-content: flex-start;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.pane {
-  border: 1px solid grey;
-  border-radius: 5px;
-  background-color: #ddd;
-  margin: 1%;
-  width: auto;
-  min-width: max-content;
-  max-width: 45%;
-  height: max-content;
-}
-.userprofile-pane {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-.userprofile {
-  width: 22em;
-  display: flex;
-  flex-direction: column;
-}
-.userpassword-pane {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-.userpassword {
-  width: 22em;
-  display: flex;
-  flex-direction: column;
-}
-.userprofile span {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.userpassword span {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-.attribute {
-  width: 6em;
-  padding: 1em;
-}
-.change-attribute-input {
-  text-indent: 1em;
-  color: grey;
-}
-.value {
-  padding: 1em;
-}
-#passwordSaveButton, #userSaveButton {
-  align-self: flex-end;
-  margin: 1em;
-}

style/themes/cyborg.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
+@import url("/fonts/roboto/Roboto-Regular.ttf");
 :root {
   --blue: #2A9FD6;
   --indigo: #6610f2;

style/themes/flatly.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
+@import url("/fonts/lato/Lato-Regular.ttf");
 :root {
   --blue: #2C3E50;
   --indigo: #6610f2;

style/themes/journal.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=News+Cycle:400,700");
+@import url("/fonts/newscycle/NewsCycle-Regular.ttf");
 :root {
   --blue: #EB6864;
   --indigo: #6610f2;

style/themes/sandstone.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
+@import url("/fonts/roboto/Roboto-Regular.ttf");
 :root {
   --blue: #325D88;
   --indigo: #6610f2;