diff --git a/incl/css/styleMain.css b/incl/css/styleMain.css index fbd9fb7..6d2e92f 100644 --- a/incl/css/styleMain.css +++ b/incl/css/styleMain.css @@ -1,56 +1,74 @@ .modal { - display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ - z-index: 101; /* Sit on top */ - padding-top: 100px; /* Location of the box */ - left: 0; - top: 0; - width: 100%; /* Full width */ - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 101; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } .modal-content { - background-color: #fefefe; - margin: auto; - padding: 20px; - border: 1px solid #888; - width: 80%; - overflow-y: auto; + background-color: #fefefe; + margin: auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + overflow-y: auto; } .close { - color: #aaaaaa; - float: right; - font-size: 28px; - font-weight: bold; + color: #aaaaaa; + float: right; + font-size: 28px; + font-weight: bold; } .close:hover, .close:focus { - color: #000; - text-decoration: none; - cursor: pointer; + color: #000; + text-decoration: none; + cursor: pointer; +} + + +/* Collapsible content, hidden by default */ +.collapsible-content { + padding: 0 18px; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; } /* 100% Image Width on Smaller Screens */ -@media only screen and (max-width: 700px){ - .modal-content { - width: 98%; - height: 98%; - padding: 5px; - } +@media only screen and (max-width: 700px) { + .modal-content { + width: 98%; + height: 98%; + padding: 5px; + } - .modal { - padding-top: 0px; - } + .modal { + padding-top: 0px; + } + + .button-mobile-fullsize { + width: 100%; + } +} - #button_add_manual { - width: 100%; - } +.grid-container { + display: grid; + align-content: center; + justify-content: end; + grid-template-columns: auto auto auto auto auto; + grid-gap: 10px; + padding: 10px; } diff --git a/incl/js/scripts.js b/incl/js/scripts.js index be6f66c..5feae77 100644 --- a/incl/js/scripts.js +++ b/incl/js/scripts.js @@ -1,50 +1,49 @@ -function enableButton(idSelect, idButtonAdd, idButtonConsume) - { - - var oSelect = document.getElementById(idSelect); - var oButtonAdd = document.getElementById(idButtonAdd); - var oButtonConsume = document.getElementById(idButtonConsume); - oButtonAdd.disabled = oSelect.value == "0"; - oButtonConsume.disabled = oSelect.value == "0"; - } - -function sleep (time) { - return new Promise((resolve) => setTimeout(resolve, time)); +function enableButton(idSelect, idButtonAdd, idButtonConsume) { + + var oSelect = document.getElementById(idSelect); + var oButtonAdd = document.getElementById(idButtonAdd); + var oButtonConsume = document.getElementById(idButtonConsume); + oButtonAdd.disabled = oSelect.value == "0"; + oButtonConsume.disabled = oSelect.value == "0"; +} + +function sleep(time) { + return new Promise((resolve) => setTimeout(resolve, time)); } function checkAndReturn() { - var button = document.getElementById("save-settings"); - - button.setAttribute("disabled",""); - componentHandler.upgradeElement(button); - - var form1 = document.getElementById("settings1_form"); - var form2 = document.getElementById("settings2_form"); - var form3 = document.getElementById("settings3_form"); - - var postString = serialize(form1)+'&'+serialize(form2)+'&'+serialize(form3); - - var xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function() { - if (this.readyState == 4) { - if (this.status == 200) { - //window.location.href = 'settings.php'; - if (xhr.responseText == "OK") - showToast("Settings saved."); - else - showToast("Settings not saved, unknown response!"); - button.removeAttribute("disabled"); - componentHandler.upgradeElement(button); - } else { - showToast("Error communicating, settings not saved!"); - } - } - }; - xhr.open("POST", 'settings.php', true); - xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); - xhr.send(postString); - } + var button = document.getElementById("save-settings"); + + button.setAttribute("disabled", ""); + componentHandler.upgradeElement(button); + + var form1 = document.getElementById("settings1_form"); + var form2 = document.getElementById("settings2_form"); + var form3 = document.getElementById("settings3_form"); + + var postString = serialize(form1) + '&' + serialize(form2) + '&' + serialize(form3); + + var xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function () { + if (this.readyState == 4) { + if (this.status == 200) { + //window.location.href = 'settings.php'; + if (xhr.responseText == "OK") + showToast("Settings saved."); + else + showToast("Settings not saved, unknown response!"); + button.removeAttribute("disabled"); + componentHandler.upgradeElement(button); + } else { + showToast("Error communicating, settings not saved!"); + } + } + }; + xhr.open("POST", 'settings.php', true); + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.send(postString); +} /*! @@ -55,48 +54,48 @@ function checkAndReturn() { */ var serialize = function (form) { - // Setup our serialized data - var serialized = []; + // Setup our serialized data + var serialized = []; - // Loop through each field in the form - for (var i = 0; i < form.elements.length; i++) { + // Loop through each field in the form + for (var i = 0; i < form.elements.length; i++) { - var field = form.elements[i]; + var field = form.elements[i]; - // Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields - if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue; + // Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields + if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue; - // If a multi-select, get all selections - if (field.type === 'select-multiple') { - for (var n = 0; n < field.options.length; n++) { - if (!field.options[n].selected) continue; - serialized.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[n].value)); - } - } + // If a multi-select, get all selections + if (field.type === 'select-multiple') { + for (var n = 0; n < field.options.length; n++) { + if (!field.options[n].selected) continue; + serialized.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[n].value)); + } + } - // Convert field data to a query string - else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) { - serialized.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); - } - } + // Convert field data to a query string + else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) { + serialized.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); + } + } - return serialized.join('&'); + return serialized.join('&'); }; function enableButtonGen(buttonId, textId, previousInput) { - var text=document.getElementById(textId).value; - document.getElementById(buttonId).disabled=(text===previousInput); + var text = document.getElementById(textId).value; + document.getElementById(buttonId).disabled = (text === previousInput); } function openNewTab(url, barcode) { - var win = window.open(url, "New Grocy product"); - var timer = setInterval(function() { - if (win.closed) { - clearInterval(timer); - window.location = "index.php?refreshbarcode="+barcode; - } - }, 500); + var win = window.open(url, "New Grocy product"); + var timer = setInterval(function () { + if (win.closed) { + clearInterval(timer); + window.location = "index.php?refreshbarcode=" + barcode; + } + }, 500); } function showToast(messageText) { @@ -108,14 +107,23 @@ function showToast(messageText) { function showQrCode(content) { - document.getElementsByClassName("close")[0].onclick = function() { - document.getElementById("qrcode-modal").style.display = "none"; - document.getElementById('btn_apilinks').style.display = "block"; - } - var qr = qrcode(0, 'L'); - qr.addData(content); - qr.make(); - document.getElementById('btn_apilinks').style.display = "none"; - document.getElementById('placeHolder').innerHTML = qr.createImgTag(10,5); - document.getElementById("qrcode-modal").style.display = "block"; + document.getElementsByClassName("close")[0].onclick = function () { + document.getElementById("qrcode-modal").style.display = "none"; + document.getElementById('btn_apilinks').style.display = "block"; + } + var qr = qrcode(0, 'L'); + qr.addData(content); + qr.make(); + document.getElementById('btn_apilinks').style.display = "none"; + document.getElementById('placeHolder').innerHTML = qr.createImgTag(10, 5); + document.getElementById("qrcode-modal").style.display = "block"; +} + +function addBarcodeToTextbox(barcode) { + var textbox = document.getElementById("newbarcodes"); + var lines = textbox.value.split("\n"); + var lastLine = lines[lines.length - 1]; + if (lastLine !== '') + textbox.value = textbox.value + "\n"; + textbox.value = textbox.value + barcode; } diff --git a/incl/js/scripts_top.js b/incl/js/scripts_top.js index 73b08ba..ac683f0 100644 --- a/incl/js/scripts_top.js +++ b/incl/js/scripts_top.js @@ -38,4 +38,22 @@ function updateQrCode() { qrData["url"] = document.getElementById("qr_url").value; qrData["key"] = document.getElementById("qr_key").value; generateAppQrCode(qrData); +} + + +function addCollapsables() { + var coll = document.getElementsByClassName("collapsible"); + var i; + + for (i = 0; i < coll.length; i++) { + coll[i].addEventListener("click", function() { + this.classList.toggle("fl-hidden"); //originally "active", so that it is still visible + var content = this.nextElementSibling; + if (content.style.maxHeight){ + content.style.maxHeight = null; + } else { + content.style.maxHeight = content.scrollHeight + "px"; + } + }); + } } \ No newline at end of file diff --git a/incl/uiEditor.inc.php b/incl/uiEditor.inc.php index 2fb0f7c..8d72d99 100644 --- a/incl/uiEditor.inc.php +++ b/incl/uiEditor.inc.php @@ -16,19 +16,19 @@ class ButtonBuilder { - private $name = null; - private $id = null; - private $label = null; - private $editorUi = null; - private $onClick = null; - private $isRaised = false; - private $isHidden = false; - private $isColoured = false; - private $isDisabled = false; + private $name = null; + private $id = null; + private $label = null; + private $editorUi = null; + private $onClick = null; + private $isRaised = false; + private $isHidden = false; + private $isColoured = false; + private $isDisabled = false; private $additionalClasses = null; - private $isSubmit = false; - private $value = null; - private $isAccent = false; + private $isSubmit = false; + private $value = null; + private $isAccent = false; function __construct($name, $label, $editorUi) { @@ -52,32 +52,38 @@ function setRaised($isRaised = true) { $this->isRaised = $isRaised; return $this; } + function setHidden($isHidden = true) { $this->isHidden = $isHidden; return $this; } - function setIsColoured($isColoured = true) { + function setIsColoured($isColoured = true) { $this->isColoured = $isColoured; return $this; } - function setIsAccent($isAccent = true) { + + function setIsAccent($isAccent = true) { $this->isColoured = true; $this->isAccent = $isAccent; return $this; } + function setDisabled($isDisabled = true) { $this->isDisabled = $isDisabled; return $this; } + function setAdditionalClasses($additionalClasses) { $this->additionalClasses = $additionalClasses; return $this; } + function setSubmit($isSubmit = true) { $this->isSubmit = $isSubmit; return $this; } + function setValue($value) { $this->value = $value; return $this; @@ -86,50 +92,49 @@ function setValue($value) { function generate($asHtml = false) { return $this->editorUi->addButton($this->name, - $this->label, - $this->onClick, - $this->isRaised, - $this->isHidden, - $asHtml, - $this->isColoured, - $this->isDisabled, - $this->additionalClasses, - $this->id, - $this->isSubmit, - $this->value, - $this->isAccent); + $this->label, + $this->onClick, + $this->isRaised, + $this->isHidden, + $asHtml, + $this->isColoured, + $this->isDisabled, + $this->additionalClasses, + $this->id, + $this->isSubmit, + $this->value, + $this->isAccent); } } - + class EditFieldBuilder { //required - private $name = null; - private $label = null; - private $value = null; - private $editorUi = null; + private $name = null; + private $label = null; + private $value = null; + private $editorUi = null; //optional - private $pattern = null; - private $type = "text"; - private $disabled = false; - private $autocompleteEntries = null; + private $pattern = null; + private $type = "text"; + private $disabled = false; + private $autocompleteEntries = null; private $autocompleteEntriesLinked = null; - private $autocompleteRunAjax = false; - private $required = true; - private $minmax = null; - private $maxlength = null; - private $minlength = null; - private $capitalize = false; - private $onfocusout = null; - private $isTimeInput = false; - private $onkeyup = null; - private $floatingLabel = true; - private $placeHolder = null; - private $onKeyPress = null; - private $width = null; - + private $autocompleteRunAjax = false; + private $required = true; + private $minmax = null; + private $maxlength = null; + private $minlength = null; + private $capitalize = false; + private $onfocusout = null; + private $isTimeInput = false; + private $onkeyup = null; + private $floatingLabel = true; + private $placeHolder = null; + private $onKeyPress = null; + private $width = null; function __construct($name, $label, $value, $editorUi) { @@ -143,6 +148,7 @@ function pattern($pattern) { $this->pattern = $pattern; return $this; } + function type($type) { // Max length does not work with "number" if ($this->maxlength != null && $type == "number") { @@ -157,30 +163,36 @@ function type($type) { } return $this; } + function disabled($disabled = true) { $this->disabled = $disabled; return $this; } + function autocompleteEntries($autocompleteEntries, $linked = null, $runAjax = false) { $this->autocompleteEntries = $autocompleteEntries; $this->autocompleteEntriesLinked = $linked; $this->autocompleteRunAjax = $runAjax; return $this; } + function required($required) { $this->required = $required; return $this; } + function setDefault($array) { if (isset($array[$this->name])) { $this->value = $array[$this->name]; } return $this; } + function minmax($minmax) { $this->minmax = $minmax; return $this; } + function maxlength($maxlength) { $this->maxlength = $maxlength; if ($this->type == "number") { @@ -203,14 +215,17 @@ function minlength($minlength) { } return $this; } + function capitalize($capitalize = true) { $this->capitalize = $capitalize; return $this; } + function setPlaceholder($placeHolder) { $this->placeHolder = $placeHolder; return $this; } + function onfocusout($onfocusout) { $this->onfocusout = $onfocusout; return $this; @@ -220,10 +235,12 @@ function onKeyUp($onkeyup) { $this->onkeyup = $onkeyup; return $this; } + function onKeyPress($onKeyPress) { $this->onKeyPress = $onKeyPress; return $this; } + function setFloatingLabel($floatingLabel = false) { $this->floatingLabel = $floatingLabel; return $this; @@ -237,8 +254,6 @@ function generate($asHtml = false) { } - - class AutoComplete { private $formId = null; private $items = null; @@ -247,7 +262,6 @@ class AutoComplete { private $runAjax = false; - function __construct($id, $items, $linkedItems = null, $runAjax = false) { $this->formId = $id; $this->items = $items; @@ -289,19 +303,21 @@ function __construct($createForm = true, $onSubmit = null, $formname = null) { } if ($createForm) { if ($formname == null) - $name = 'editform' . rand(); + $name = 'editform' . rand(); else - $name = $formname; + $name = $formname; $this->htmlOutput = '