Add settings page

www/assets/js/main.js

@@ -62,7 +62,7 @@ if (localStorage.getItem("alertradius") == null) {
     localStorage.setItem("alertradius", 100);
 }
 
-if (localStorage.getItem("darktheme") == true) {
+if (localStorage.getItem("darktheme") == "true") {
     $("#app").addClass("theme-dark");
 }
 

www/assets/js/settings.js

@@ -0,0 +1,18 @@
+/*
+ * 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/.
+ */
+
+
+$('.item-content[data-setting=darktheme] .toggle input').on("change", function () {
+    var checked = $(this).prop('checked');
+    console.log(checked);
+    localStorage.setItem("darktheme", checked);
+
+    if (localStorage.getItem("darktheme") == "true") {
+        $("#app").addClass("theme-dark");
+    } else {
+        $("#app").removeClass("theme-dark");
+    }
+})

www/pages/home.html

@@ -54,11 +54,10 @@
                     </a>
                 </li>
                 <li>
-                    <a href="/setup" class="item-link item-content">
+                    <a href="/settings" class="item-link item-content">
                         <div class="item-media"><i class="icon fas fa-cog"></i></div>
                         <div class="item-inner">
-                            <div class="item-title">Setup</div>
-                            <div class="item-footer">Configure route</div>
+                            <div class="item-title">Settings</div>
                         </div>
                     </a>
                 </li>

www/pages/settings.html

@@ -6,25 +6,54 @@
 
     <div class="navbar">
         <div class="navbar-inner">
-            <div class="title"><i class="fas fa-cog"></i> Settings</div>
+            <div class="left">
+                <a href="#" class="link icon-only back">
+                    <i class="icon icon-back"></i>
+                </a>
+            </div>
+            <div class="title">Settings</div>
         </div>
     </div>
 
+
     <div class="page-content">
-        <div class="row no-gap justify-content-center">
-            <div class="list no-hairlines tablet-inset col-100 tablet-75 desktop-50">
-                <ul id="settings-bin">
-                </ul>
-            </div>
+        <div class="list media-list no-hairlines tablet-inset" style="margin-top: 0;">
+            <ul>
+                {{#each settings}}
+                <li>
+                    {{#if toggle}}
+                    <div class="item-content" data-setting="{{setting}}">
+                        <div class="item-inner">
+                            <div style="display: flex; justify-content: between;">
+                                <div class="item-title">
+                                    {{title}}
+                                </div>
+                                <div class="item-after" onclick="{{onclick}}">
+                                    <label class="toggle toggle-init">
+                                        <input type="checkbox" {{#if checked}}checked{{/if}}>
+                                               <span class="toggle-icon"></span>
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="item-text">{{text}}</div>
+                        </div>
+                    </div>
+                    {{else}}
+                    <div class="item-content" data-setting="{{setting}}" onclick="{{onclick}}">
+                        <div class="item-inner">
+                            <div class="item-title-row">
+                                <div class="item-title">{{title}}</div>
+                            </div>
+                            <div class="item-text">{{text}}</div>
+                        </div>
+                    </div>
+                    {{/if}}
+                </li>
+                {{/each}}
+            </ul>
         </div>
     </div>
 
-    <div class="fab fab-center-bottom">
-        <a href="#" class="back">
-            <i class="fas fa-2x fa-times"></i>
-        </a>
-    </div>
-
-    <script src="js/settings.js"></script>
+    <script src="assets/js/settings.js"></script>
 
 </div>

www/routes.js

@@ -65,5 +65,44 @@ var routes = [
                 }
             }
         }
-    }
+    },
+    {
+        path: '/settings',
+        name: 'settings',
+        async: function (routeTo, routeFrom, resolve, reject) {
+            resolve({
+                templateUrl: './pages/settings.html'
+            }, {
+                context: {
+                    settings: [
+                        {
+                            setting: "darktheme",
+                            title: "Use dark theme",
+                            text: "",
+                            toggle: true,
+                            checked: localStorage.getItem("darktheme") == "true",
+                            onclick: ""
+                        },
+                        {
+                            setting: "versions",
+                            title: "PackageHelper app v1.0.0",
+                            text: "Copyright © 2019 Netsyms Technologies.  Licensed under the Mozilla Public License 2.0.",
+                            onclick: ""
+                        },
+                        {
+                            setting: "opensource",
+                            title: "Open Source Information",
+                            text: "",
+                            onclick: "router.navigate('/credits')"
+                        },
+                        {
+                            setting: "privacy",
+                            title: "Privacy Policy and Terms",
+                            text: "",
+                            onclick: "openBrowser('https://netsyms.com/legal?pk_campaign=PackageHelpterApp')"
+                        }]
+                }
+            });
+        }
+    },
 ];