Add note search/filter

langs/en/search.json

@@ -0,0 +1,3 @@
+{
+    "Search": "Search"
+}

pages/home.php

@@ -86,15 +86,26 @@ foreach ($colors as $c) {
 ?>
 </style>
 
-<div class="btn-group mb-4">
-    <?php if ($notequotareached) { ?>
-        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#quotamodal">
-            <i class="fas fa-plus"></i> <?php $Strings->get("New note"); ?>
-        </button>
-    <?php } else { ?>
-        <a href="app.php?page=newnote" class="btn btn-success"><i class="fas fa-plus"></i> <?php $Strings->get("New note"); ?></a>
-    <?php } ?>
-    <a href="app.php?page=home" class="btn btn-light"><i class="fas fa-sync-alt"></i> <?php $Strings->get("Refresh"); ?></a>
+<div class="row justify-content-between px-4">
+    <div class="flex-fill btn-group mb-4">
+        <?php if ($notequotareached) { ?>
+            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#quotamodal">
+                <i class="fas fa-plus"></i> <?php $Strings->get("New note"); ?>
+            </button>
+        <?php } else { ?>
+            <a href="app.php?page=newnote" class="btn btn-success"><i class="fas fa-plus"></i> <?php $Strings->get("New note"); ?></a>
+        <?php } ?>
+        <a href="app.php?page=home" class="btn btn-light"><i class="fas fa-sync-alt"></i> <?php $Strings->get("Refresh"); ?></a>
+    </div>
+
+    <div class="flex-fill d-none yesscript">
+        <div class="input-group pl-4">
+            <input type="text" class="form-control" id="searchbox" placeholder="<?php $Strings->get("Search"); ?>" aria-label="<?php $Strings->get("Search"); ?>">
+            <div class="input-group-append">
+                <button class="btn btn-outline-secondary" type="button" id="searchbtn"><i class="fas fa-search"></i></button>
+            </div>
+        </div>
+    </div>
 </div>
 
 <div class="row" id="grid">

static/js/home.js

@@ -87,4 +87,16 @@ $(".note-text").on("click", ".parsedown-task-list", function (e) {
         }
     });
     return false;
+});
+
+$("#searchbtn").on("click", function () {
+    window.shuffleInstance.filter(function (element) {
+        var searchtext = $("#searchbox").val().toLowerCase();
+        var notetext = $(".note-text", $(element)).text().toLowerCase();
+        return (notetext.indexOf(searchtext) !== -1);
+    });
+});
+
+$("#searchbox").on("input change", function () {
+    $("#searchbtn").click();
 });