Machine editing now works all the way

www/assets/js/machine.js

@@ -31,8 +31,8 @@ function addMachineToSearchHistory(machineid) {
     setStorage("machinehistory", JSON.stringify(history));
 }
 
-function openMachineInfo(machineid) {
+function openMachineEditor(machineid) {
-    app.dialog.preloader("Searching...");
+    app.dialog.preloader("Loading...");
 
     apirequest(
             "lookup",
@@ -48,26 +48,122 @@ function openMachineInfo(machineid) {
                         machineid: resp.id,
                         info: {}
                     };
-                    if (resp.editable) {
-                        context.editable = true;
-                    }
                     var tabindex = 0;
                     for (var k in resp.info) {
                         if (resp.info.hasOwnProperty(k)) {
                             context.info[k] = {
                                 name: k,
-                                value: resp.info[k],
+                                value: (resp.formdata.inputtypes[k] == "select" ? "val_" : "") + resp.info[k],
                                 type: (typeof resp.formdata.inputtypes[k] == "string" ? resp.formdata.inputtypes[k] : "text"),
                                 label: (typeof resp.formdata.labels[k] == "string" ? resp.formdata.labels[k] : k),
                                 icon: (typeof resp.formdata.icons[k] == "string" ? resp.formdata.icons[k] : "fas fa-square"),
                                 tabindex: tabindex
                             };
                             if (context.info[k].type == "select") {
-                                context.info[k].options = resp.formdata.options[k];
+                                console.log(resp.formdata.options[k]);
+                                var options = [];
+                                for (var m in resp.formdata.options[k]) {
+                                    if (resp.formdata.options[k].hasOwnProperty(m)) {
+                                        options.push({
+                                            value: "val_" + m,
+                                            label: resp.formdata.options[k][m]
+                                        });
+                                    }
+                                }
+                                console.log(options);
+                                context.info[k].options = options;
                             }
                             tabindex++;
                         }
                     }
+                    router.navigate("/machineeditor", {
+                        context: context
+                    });
+                }
+            },
+            function (xhr) {
+                app.dialog.close();
+                var error = $.parseJSON(xhr.responseText);
+                if (error && typeof error.msg != 'undefined') {
+                    app.dialog.alert(error.msg, "Error");
+                } else {
+                    app.dialog.alert("A server or network error occurred.", "Error");
+                }
+            },
+            getStorage("username"),
+            getStorage("password")
+            );
+}
+
+function openMachineInfo(machineid) {
+    app.dialog.preloader("Searching...");
+
+    apirequest(
+            "lookup",
+            {
+                id: machineid
+            },
+            function (resp) {
+                app.dialog.close();
+                if (resp.status == "ERROR") {
+                    app.dialog.alert(resp.msg, "Error");
+                } else {
+                    var context = {
+                        machineid: resp.id,
+                        type: resp.type,
+                        icon: resp.icon,
+                        machineprops: {
+                            machineid: {
+                                name: "machineid",
+                                value: resp.id,
+                                label: "ID",
+                                icon: "fas fa-hashtag"
+                            }
+                        },
+                        editable: resp.editable
+                    };
+
+                    if (resp.clientinfo != [] && Object.entries(resp.clientinfo).length > 0) {
+                        context.clientinfo = {
+                            name: resp.clientinfo.name
+                        };
+                        if (resp.clientinfo.phone) {
+                            context.clientinfo.phone = resp.clientinfo.phone;
+                            context.clientinfo.phonestripped = resp.clientinfo.phone.replace(/\D/g, '');
+                        }
+                        if (resp.clientinfo.billingaddress) {
+                            context.clientinfo.billingaddress = resp.clientinfo.billingaddress.replace("\n", "\n<br />");
+                        }
+                        if (resp.clientinfo.mailingaddress) {
+                            context.clientinfo.mailingaddress = resp.clientinfo.mailingaddress.replace("\n", "\n<br />");
+                        }
+                    }
+                    var tabindex = 0;
+                    for (var k in resp.info) {
+                        if (resp.info.hasOwnProperty(k)) {
+                            switch (k) {
+                                case "type":
+                                case "clientid":
+                                    // skip these
+                                    break;
+                                default:
+                                    var value = resp.info[k];
+                                    if (value == false || value == 0) {
+                                        value = false;
+                                    } else {
+                                        value = value.toString().replace("\n", " <br />");
+                                    }
+                                    context.machineprops[k] = {
+                                        name: k,
+                                        value: value,
+                                        label: (typeof resp.formdata.labels[k] == "string" ? resp.formdata.labels[k] : k),
+                                        icon: (typeof resp.formdata.icons[k] == "string" ? resp.formdata.icons[k] : "fas fa-square"),
+                                        tabindex: tabindex
+                                    };
+                                    tabindex++;
+                            }
+                        }
+                    }
                     addMachineToSearchHistory(resp.id);
                     router.navigate("/machine", {
                         context: context
@@ -88,28 +184,49 @@ function openMachineInfo(machineid) {
             );
 }
 
-function enableEditMachine() {
+function saveMachineEdits(machineid) {
-    $(".machinefield").prop("disabled", false);
+    app.dialog.preloader("Saving...");
-    $(".machinefield-clear-button").removeClass("display-none");
-    $("#save-fab").removeClass("display-none");
-    $("#canceledit-fab").removeClass("display-none");
-    $("#menu-fab").addClass("display-none");
-}
 
-function disableEditMachine() {
+    var machinedata = {
-    $(".machinefield").prop("disabled", true);
+        id: machineid
-    $(".machinefield-clear-button").addClass("display-none");
+    };
-    $("#save-fab").addClass("display-none");
+    $("#machineform .machinefield").each(function (i, o) {
-    $("#canceledit-fab").addClass("display-none");
+        if ($(this).parent().is(".smart-select")) {
-    $("#menu-fab").removeClass("display-none");
+            machinedata[$(this).attr("name")] = app.smartSelect.get('#smartselect-' + $(this).attr("name")).getValue().replace("val_", "");
-}
+        } else {
+            machinedata[$(this).attr("name")] = $(this).val();
+        }
+    });
 
-function saveMachineEdits() {
+    apirequest(
-    // TODO
+            "editmachine",
+            machinedata,
+            function (resp) {
+                app.dialog.close();
+                if (resp.status == "ERROR") {
+                    app.dialog.alert(resp.msg, "Error");
+                } else {
+                    app.toast.create({
+                        text: 'Machine saved!',
+                        closeTimeout: 2000,
+                    }).open();
+                    openMachineInfo(machineid);
+                }
+            },
+            function (xhr) {
+                app.dialog.close();
+                var error = $.parseJSON(xhr.responseText);
+                if (error && typeof error.msg != 'undefined') {
+                    app.dialog.alert(error.msg, "Error");
+                } else {
+                    app.dialog.alert("A server or network error occurred.", "Error");
+                }
+            },
+            getStorage("username"),
+            getStorage("password")
+            );
 }
 
-$("#app").on("click", "#machineEditButton", enableEditMachine);
-
 $("#app").on("keypress", "#machineform .machinefield", function (evt) {
     // Catch Enter key in form because it's likely a barcode scanner
     // Instead switch to the next input box
@@ -121,10 +238,3 @@ $("#app").on("keypress", "#machineform .machinefield", function (evt) {
         $("#machineform .machinefield[tabindex=" + (tabindex + 1) + "]").focus();
     }
 });
-
-$("#app").on("smartselect:beforeopen", "#machineform", function (evt) {
-    // Don't allow changing selection if rest of form is readonly
-    if ($(".machinefield").prop("disabled")) {
-        evt.detail.prevent();
-    }
-});

www/assets/js/util.js

@@ -44,6 +44,7 @@ function apirequest(action, data, success, error, username, password) {
         },
         success: function (val) {
             if (typeof success == 'function') {
+                console.log(val);
                 success(val);
             }
         },

www/pages/credits.template.html

@@ -10,7 +10,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         <div class="navbar-bg"></div>
         <div class="navbar-inner">
             <div class="left">
-                <a href="#" class="link icon-only back">
+                <a href="#" class="link icon-only" onclick="router.back({force: true, ignoreCache: true})">
                     <i class="icon icon-back"></i>
                 </a>
             </div>

www/pages/login.html

@@ -10,7 +10,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         <div class="navbar-bg"></div>
         <div class="navbar-inner">
             <div class="left">
-                <a href="#" class="link icon-only back">
+                <a href="#" class="link icon-only" onclick="router.back({force: true, ignoreCache: true})">
                     <i class="icon icon-back"></i>
                 </a>
             </div>

www/pages/machine.html

@@ -11,103 +11,108 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         <div class="navbar-bg"></div>
         <div class="navbar-inner">
             <div class="left">
-                <a href="#" class="link icon-only back">
+                <a href="#" class="link icon-only" onclick="router.navigate('/')">
                     <i class="icon icon-back"></i>
                 </a>
             </div>
-            <div class="title">{{machineid}}</div>
+            <div class="title"><i class="{{icon}}"></i> {{type.label}} #{{machineid}}</div>
         </div>
     </div>
 
-    <div class="fab fab-right-bottom" id="menu-fab">
+    {{#if editable}}
-        <a href="#" data-fab="#menu-fab">
+    <div class="fab fab-right-bottom" id="edit-fab">
-            <!-- Icons For iOS Theme -->
+        <a href="#" onclick="openMachineEditor('{{machineid}}');">
-            <i class="icon f7-icons if-not-md">plus</i>
+            <span class="material-icons">edit</span>
-            <i class="icon f7-icons if-not-md">xmark</i>
-            <!-- Icons For MD Theme -->
-            <i class="icon material-icons md-only">menu</i>
-            <i class="icon material-icons md-only">close</i>
-        </a>
-
-        <div class="fab-buttons fab-buttons-top">
-            {{#if editable}}
-            <a href="#" id="machineEditButton" class="fab-label-button fab-close" data-fab="#menu-fab">
-                <span><i class="fas fa-edit"></i></span>
-                <span class="fab-label">Edit Machine</span>
-            </a>
-            {{/if}}
-            <a href="#" class="fab-label-button" data-fab="#menu-fab">
-                <span><i class="fas fa-location"></i></span>
-                <span class="fab-label">Add Event</span>
-            </a>
-        </div>
-    </div>
-
-    <div class="fab fab-extended fab-left-bottom color-red display-none" id="canceledit-fab">
-        <a href="#">
-            <!-- Icons For iOS Theme -->
-            <i class="icon f7-icons if-not-md">xmark</i>
-            <!-- Icons For MD Theme -->
-            <i class="icon material-icons md-only">close</i>
-
-            <div class="fab-text">Cancel</div>
-        </a>
-    </div>
-
-    <div class="fab fab-extended fab-right-bottom color-green display-none" id="save-fab">
-        <a href="#" onclick="saveMachineEdits()">
-            <!-- Icons For iOS Theme -->
-            <i class="icon f7-icons if-not-md">floppy_disk</i>
-            <!-- Icons For MD Theme -->
-            <i class="icon material-icons md-only">save</i>
-            <div class="fab-text">Save</div>
         </a>
     </div>
+    {{/if}}
 
     <div class="page-content">
-        <form id="machineform" style="margin-bottom: 5rem;">
+        <div class="card elevation-4">
-            <div class="list no-hairlines no-margin-top">
+            <div class="card-content">
-                <ul>
+                <div class="list">
-                    {{#each info}}
+                    <ul>
-                    {{#js_if "this.type == 'select'"}}
+                        {{#each machineprops}}
-                    <li>
+                        {{#if value}}
-                        <a class="item-link smart-select smart-select-init" data-searchbar="true" data-searchbar-placeholder="Search">
+                        <li>
-                            <select name="{{name}}" class="machinefield" disabled="true" tabindex="{{tabindex}}">
-                                {{#each options}}
-                                <option value="{{@key}}" {{#js_if "../value == @key"}}selected{{/js_if}}>{{this}}</option>
-                                {{/each}}
-                            </select>
                             <div class="item-content">
                                 <div class="item-inner">
-                                    <div class="item-title">{{label}}</div>
+                                    <div class="item-title" style="white-space: normal !important;">
+                                        <div class="item-header"><i class="{{icon}}"></i> {{label}}</div>
+                                        {{value}}
+                                    </div>
                                 </div>
                             </div>
-                        </a>
+                        </li>
-                    </li>
+                        {{/if}}
-                    {{else}}
+                        {{/each}}
-                    <li class="item-content item-input">
+                    </ul>
-                        <div class="item-inner">
+                </div>
-                            <div class="item-title item-floating-label">{{label}}</div>
-                            <div class="item-input-wrap">
-                                {{#js_if "this.type == 'textarea'"}}
-                                <textarea class="machinefield" disabled="true" rows="4" name="{{name}}" placeholder="" tabindex="{{tabindex}}">{{value}}</textarea>
-                                {{else}}
-                                <input class="machinefield" disabled="true" type="{{type}}" name="{{name}}" placeholder="" value="{{value}}" tabindex="{{tabindex}}">
-                                <span class="input-clear-button machinefield-clear-button display-none"></span>
-                                {{/js_if}}
-                            </div>
-                        </div>
-                    </li>
-                    {{/js_if}}
-                    {{/each}}
-                </ul>
             </div>
-        </form>
+        </div>
+
+        {{#if clientinfo}}
+        {{#with clientinfo}}
+        <div class="card">
+            <div class="card-header"><h4 class="no-margin"><i class="fas fa-user"></i> Client</h4></div>
+
+            <div class="card-content">
+                <div class="list">
+                    <ul>
+                        <li>
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">
+                                        {{name}}
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        {{#if phone}}
+                        <li>
+                            <a class="item-content item-link" href="tel:{{phonestripped}}">
+                                <div class="item-inner">
+                                    <div class="item-title">
+                                        <div class="item-header">Phone</div>
+                                        {{phone}}
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        {{/if}}
+                        {{#if billingaddress}}
+                        <li>
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">
+                                        <div class="item-header">Billing Address</div>
+                                        {{billingaddress}}
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        {{/if}}
+                        {{#if mailingaddress}}
+                        <li>
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">
+                                        <div class="item-header">Mailing Address</div>
+                                        {{mailingaddress}}
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        {{/if}}
+                    </ul>
+                </div>
+            </div>
+        </div>
+        {{/with}}
+        {{/if}}
     </div>
 
     <script>
         var machineid = "{{machineid}}";
-
-        //$("textarea.machinefield")
     </script>
 </div>

www/pages/machineeditor.html

@@ -0,0 +1,76 @@
+<!--
+Copyright 2020 Netsyms Technologies.
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="page" data-name="machineeditor">
+
+    <div class="navbar">
+        <div class="navbar-bg"></div>
+        <div class="navbar-inner">
+            <div class="left">
+                <a href="#" class="link icon-only" onclick="openMachineInfo('{{machineid}}')">
+                    <i class="icon icon-back"></i>
+                </a>
+            </div>
+            <div class="title">Editing #{{machineid}}</div>
+        </div>
+    </div>
+
+    <div class="fab fab-extended fab-right-bottom color-green" id="save-fab">
+        <a href="#" onclick="saveMachineEdits('{{machineid}}')">
+            <!-- Icons For iOS Theme -->
+            <i class="icon f7-icons if-not-md">floppy_disk</i>
+            <!-- Icons For MD Theme -->
+            <i class="icon material-icons md-only">save</i>
+            <div class="fab-text">Save</div>
+        </a>
+    </div>
+
+    <div class="page-content">
+        <form id="machineform" style="margin-bottom: 5rem;">
+            <div class="list no-hairlines no-margin-top">
+                <ul>
+                    {{#each info}}
+                    {{#js_if "this.type == 'select'"}}
+                    <li>
+                        <a class="item-link smart-select smart-select-init" id="smartselect-{{name}}" data-searchbar="true" data-searchbar-placeholder="Search">
+                            <select name="{{name}}" class="machinefield" tabindex="{{tabindex}}">
+                                {{#each options}}
+                                <option value="{{value}}" {{#js_if "../value == this.value"}}selected{{/js_if}}>{{label}}</option>
+                                {{/each}}
+                            </select>
+                            <div class="item-content">
+                                <div class="item-inner">
+                                    <div class="item-title">{{label}}</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                    {{else}}
+                    <li class="item-content item-input">
+                        <div class="item-inner">
+                            <div class="item-title item-floating-label">{{label}}</div>
+                            <div class="item-input-wrap">
+                                {{#js_if "this.type == 'textarea'"}}
+                                <textarea class="machinefield" rows="4" name="{{name}}" placeholder="" tabindex="{{tabindex}}">{{value}}</textarea>
+                                {{else}}
+                                <input class="machinefield" type="{{type}}" name="{{name}}" placeholder="" value="{{value}}" tabindex="{{tabindex}}">
+                                <span class="input-clear-button machinefield-clear-button display-none"></span>
+                                {{/js_if}}
+                            </div>
+                        </div>
+                    </li>
+                    {{/js_if}}
+                    {{/each}}
+                </ul>
+            </div>
+        </form>
+    </div>
+
+    <script>
+        var machineid = "{{machineid}}";
+    </script>
+</div>

www/routes.js

@@ -24,6 +24,11 @@ var routes = [
         name: "machine",
         templateUrl: "pages/machine.html"
     },
+    {
+        path: "/machineeditor",
+        name: "machineeditor",
+        templateUrl: "pages/machineeditor.html"
+    },
     {
         path: "/login",
         name: "login",

www/settings.js

@@ -1,12 +0,0 @@
-/*
- * Copyright 2020 Netsyms Technologies.
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-
-var SETTINGS = {
-    synckeyblacklist: [],
-    apiserver: "http://localhost/machinemanager/api/",
-    loginurl: "https://localhost/login/"
-}

www/settings.js

@@ -0,0 +1 @@
+settings_prod.js

www/settings_dev.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright 2020 Netsyms Technologies.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+var SETTINGS = {
+    synckeyblacklist: [],
+    apiserver: "http://localhost/machinemanager/api/",
+    loginurl: "https://localhost/login/"
+}