forked from EdddieN/machinon-domoticz_theme
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request EdddieN#33 from DewGew/settingsTab
Added Settings tab
- Loading branch information
Showing
4 changed files
with
249 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
|
|
||
| // Function to add theme tab | ||
| function showThemeSettings() { | ||
|
|
||
| if( !$('#tabsystem').length ){ | ||
| setTimeout(showThemeSettings, 100); | ||
| return; | ||
| } | ||
|
|
||
| // Merge email tab into notification | ||
| $('#emailsetup').prepend('<br/>'); | ||
| $('#emailsetup').appendTo('#notifications'); | ||
| $("#tabs li a[data-target='#tabemail']").parent().remove(); | ||
|
|
||
| // Adding the settings tab. | ||
| if (!$('#tabtheme').length){ | ||
|
|
||
| // Modifying settings menu | ||
| $('#tabs .pull-right').before('<li id="themeTabButton"><a data-target="#tabtheme" data-toggle="tab" data-i18n="Theme">Theme</a></li>'); | ||
|
|
||
| // Translate | ||
| $("#tabs").i18n(); | ||
|
|
||
| // Inserting the themesettings.html | ||
| $('#my-tab-content').append('<div class="tab-pane" id="tabtheme"><section id="theme">Loading..</section></div>'); | ||
| $('#my-tab-content #theme').load("acttheme/themesettings.html",loadSettingsHTML); | ||
| } | ||
| } | ||
|
|
||
| function loadSettingsHTML(){ | ||
| // Move active menus to theme tab | ||
| $('#ActiveTabs').appendTo('#theme'); | ||
| $('#ActiveTabs').wrapAll('<div class="row-fluid" />'); | ||
|
|
||
| // Update check | ||
| $("#tabtheme .span6 input:checkbox").each(function() { | ||
| if(typeof theme.features[this.value] !== "undefined"){ | ||
| if (theme.features[this.value].enabled === true) { | ||
| $(this).prop("checked", true); | ||
| }else if (theme.features[this.value].enabled === false) { | ||
| $(this).prop( "checked", false ); | ||
| } | ||
| }else{ | ||
| if ( typeof theme.upgradeAlerted === "undefined"){ | ||
| bootbox.alert('<h3>Congratulations on the theme upgrade!</h3><p>Please reset the theme by clicking here:</p><p><a onClick="resetTheme(); return false;" href=""><button class="btn btn-info">Reset theme</button></a></p><p>(or find the theme reset button on the theme settings page)<p>'); | ||
| if (isEmptyObject(theme) === false){ | ||
| localStorage.setObject("themeSettings", theme); | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| // The theme immediately saves the changes. | ||
| $("#tabtheme input:checkbox").click(function() { | ||
| if ($(this).is(':checked')) { | ||
| theme.features[this.value].enabled = true; | ||
| if (this.value === "custom_settings_menu" && theme.features.custom_settings_menu.enabled === true) { | ||
| bootbox.alert('<h3>Information!</h3><br/><p>This also disables the custom menu. Navbar looks better with disabled custom menu.</p>'); | ||
| } | ||
| } else { | ||
| theme.features[this.value].enabled = false; | ||
|
|
||
| } | ||
| // Saves the new settings. | ||
| localStorage.setObject("themeSettings", theme); | ||
| console.log('Saved new settings'); | ||
| }); | ||
|
|
||
| // Resetbutton theme tab | ||
| $('#themeResetButton').click(function() { | ||
| resetTheme(); | ||
| }); | ||
| } | ||
|
|
||
| // Load theme settings | ||
| function loadSettings() { | ||
| if (typeof (Storage) !== "undefined") { | ||
| if (localStorage.getItem("themeSettings") === null) { // If theme settings is missing in localstorage(browser) then load settings from local file e.g theme.json | ||
| $.ajax({url: 'acttheme/theme.json' , cache: false, async: false, dataType: 'json', success: function(localJson) { | ||
| theme = localJson; | ||
| themeName = theme.name; | ||
| if (isEmptyObject(theme) === false) { | ||
| localStorage.setObject("themeSettings", theme); | ||
| } | ||
| console.log(themeName + " - local theme settingsfile loaded and saved to localSto"); | ||
| } | ||
| }); | ||
| } else { // If setting is saved in localstorge(browser), try to load those. | ||
| theme = localStorage.getObject("themeSettings", theme); | ||
| themeName = theme.name; | ||
| console.log(themeName + " - theme settings was already found in the browser."); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // reset theme to defaults. Useful after an upgrade. | ||
| function resetTheme(){ | ||
| if (typeof(Storage) !== "undefined") { | ||
| localStorage.clear(); | ||
| location.reload(); | ||
| } | ||
| } | ||
|
|
||
| // Helper functions | ||
| Storage.prototype.setObject = function(key, value) { | ||
| this.setItem(key, JSON.stringify(value)); | ||
| } | ||
|
|
||
| Storage.prototype.getObject = function(key) { | ||
| var value = this.getItem(key); | ||
| return value && JSON.parse(value); | ||
| } | ||
|
|
||
| function isEmptyObject(obj) { | ||
| for(var prop in obj) { | ||
| if (Object.prototype.hasOwnProperty.call(obj, prop)) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <style> | ||
| #themesettings h1 { display: inline } | ||
| </style> | ||
|
|
||
| <div id="themesettings"> | ||
| <br/> | ||
| <h1 data-i18n="Theme">Theme</h1><h1> </h1><h1 data-i18n="Settings">Settings</h1> | ||
| <div class="row-fluid"> | ||
| <div class="span6"> | ||
| <br/> | ||
| <h2><span data-i18n="General options">General options</span>:</h2> | ||
| <p> | ||
| <input id="themevar10" name="themevar10" value="dark_theme" type="checkbox"><label for="themevar10" data-i18n="Dark Theme">Dark Theme (Inverted Colors)</label> | ||
| <br/> | ||
| <input id="themevar11" name="themevar11" value="footer_text_disabled" type="checkbox"><label for="themevar11" data-i18n="Footer text">Footer Text Disabled</label> | ||
| <br/> | ||
| <input id="themevar12" name="themevar12" value="custom_settings_menu" type="checkbox"><label for="themevar12" data-i18n="Custom Settings Menu">Machinon Settings Menu</label> | ||
| <br/> | ||
| <!-- <input id="themevar13" name="themevar13" value="cool_function_3" type="checkbox"><label for="themevar13" data-i18n="Cool Function 3">Cool Function 3</label> | ||
| </p> | ||
| <br/> | ||
| <h2><span data-i18n="Dashboard options">Dashboard options</span>:</h2> | ||
| <p> | ||
| <input id="themevar20" name="themevar20" value="dashboard_show_last_update" type="checkbox"><label for="themevar21" data-i18n="Show the last update time">Show items' last update time</label> | ||
| <br/> | ||
| <input id="themevar21" name="themevar21" value="time_ago" type="checkbox"><label for="themevar28" data-i18n="Show how long ago items updated">Show how long ago items updated</label> | ||
| </p> --> | ||
|
|
||
| </div> | ||
| <div class="span6"> | ||
| <div id="aboutTheme"> | ||
| <h3>Machinon theme</h3> | ||
| <p> | ||
| This is a theme for Domoticz. Theme is in progress with project machinon.<br/> | ||
| Follow us on <a href="https://github.com/EdddieN/machinon">github</a>. If you have any issues with the theme, report them <a href="https://github.com/EdddieN/machinon-domoticz_theme/issues">here</a>. | ||
| </p> | ||
|
|
||
| <h3>General features</h3> | ||
| <p> | ||
| Machinon saves the settings in localStorge in your browser. You can have diffrent settings in seperate devices. | ||
| </p> | ||
| <b>Design:</b> | ||
| <p> | ||
| Minimalistic design for better view for the user. | ||
| </p> | ||
| <b>Machinon settings menu:</b> | ||
| <p> | ||
| A custom settings menu instead of the dropdown list. Better overview for the user.<br/> | ||
| <i><b>(This also disables the custom menu. Navbar looks better with disabled custom menu. We are working on a solution)</b></i> | ||
| </p> | ||
| <b>Footer Text Disabled:</b> | ||
| <p> | ||
| Matter of taste. Looks great on Tablets. | ||
| </p> | ||
|
|
||
| <p></p> | ||
| <p>Designed in 2018 by EdddieN.</p> | ||
| </div> | ||
| <p> | ||
| <button class="btn btn-info" id="themeResetButton" data-i18n="Reset theme">Reset theme</button> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script> | ||
| $("#themesettings").i18n(); | ||
| </script> | ||
|
|