Einstellungen angefangen

src/module/Application/pwa/html/application/fragment/settings.html

@@ -0,0 +1,99 @@
+<div class='max-height fill-me'>
+    <div class='row max-width grow flex-center'>
+        <div class='columns small-centered small-12 smedium-9 medium-11 large-7'>
+            <div class='row'>
+                <span class='columns small-6' data-translation="theme"></span>
+                <span class='columns small-6'>
+                    <label id = 'theme-radio-template'><input type="radio" class='setting' name='theme'></label>
+                </span>
+            </div>
+
+
+            <button id = 'reset-levels' class = "button" data-translation="reset-levels"></button>
+
+
+
+
+
+
+
+
+
+
+            <!--<label class='row'>-->
+                <!--<span class='columns small-6' data-translation="ignore-card-always"></span>-->
+                <!--<span class='columns small-6'><input type="checkbox" class='setting' name='ignore-card-always'-->
+                                                     <!--value='true'></span>-->
+            <!--</label>-->
+            <!--<br/>-->
+
+            <!--<label class='row'>-->
+                <!--<span class='columns small-6' data-translation="use-included-latex"></span>-->
+                <!--<span class='columns small-6'><input type="checkbox" class='setting' name='use-included-latex' data-default="true" value="true"></span>-->
+            <!--</label>-->
+
+            <!--<div class='row'>-->
+                <!--<div class="columns small-12 smedium-6">-->
+                    <!--<label>-->
+                        <!--<input type="text" class='setting' required name="ignore-button-1-text"-->
+                               <!--data-default="ignore-card-1" data-default-translateable="1">-->
+                        <!--<span data-translation="settings-ignore-button-1-text"></span>-->
+                    <!--</label>-->
+                <!--</div>-->
+                <!--<div class="columns small-12 smedium-6">-->
+                    <!--<label>-->
+                        <!--<input type="number" class='setting' required name="ignore-button-1-time" data-default="120">-->
+                        <!--<span data-translation="settings-ignore-button-1-time"></span>-->
+                    <!--</label>-->
+                <!--</div>-->
+            <!--</div>-->
+            <!--<div class='row'>-->
+                <!--<div class="columns small-12 smedium-6">-->
+                    <!--<label>-->
+                        <!--<input type="text" class='setting' required name="ignore-button-2-text"-->
+                               <!--data-default="ignore-card-2" data-default-translateable="1">-->
+                        <!--<span data-translation="settings-ignore-button-2-text"></span>-->
+                    <!--</label>-->
+                <!--</div>-->
+                <!--<div class="columns small-12 smedium-6">-->
+                    <!--<label>-->
+                        <!--<input type="number" class='setting' required name="ignore-button-2-time" data-default="1440">-->
+                        <!--<span data-translation="settings-ignore-button-2-time"></span>-->
+                    <!--</label>-->
+                <!--</div>-->
+            <!--</div>-->
+            <!--<div class='row'>-->
+                <!--<div class="columns small-12 smedium-6">-->
+                    <!--<label>-->
+                        <!--<input type="text" class='setting' required name="ignore-button-3-text"-->
+                               <!--data-default="ignore-card-3" data-default-translateable="1">-->
+                        <!--<span data-translation="settings-ignore-button-3-text"></span>-->
+                    <!--</label>-->
+                <!--</div>-->
+                <!--<div class="columns small-12 smedium-6">-->
+                    <!--<label>-->
+                        <!--<input type="number" class='setting' required name="ignore-button-3-time" data-default="7200">-->
+                        <!--<span data-translation="settings-ignore-button-3-time"></span>-->
+                    <!--</label>-->
+                <!--</div>-->
+            <!--</div>-->
+            <!--<div class='row'>-->
+                <!--<div class="columns small-12 smedium-6">-->
+                    <!--<label>-->
+                        <!--<input type="text" class='setting' required name="ignore-button-4-text" data-default="ignore-card-4"-->
+                               <!--data-default-translateable="1">-->
+                        <!--<span data-translation="settings-ignore-button-4-text"></span>-->
+                    <!--</label>-->
+                <!--</div>-->
+                <!--<div class="columns small-12 smedium-6">-->
+                    <!--<label>-->
+                        <!--<input type="number" class='setting' required name="ignore-button-4-time" data-default="525600">-->
+                        <!--<span data-translation="settings-ignore-button-4-time"></span>-->
+                    <!--</label>-->
+                <!--</div>-->
+            <!--</div>-->
+
+
+        </div>
+    </div>
+</div>

src/module/Application/pwa/html/application/setting-template.html

@@ -0,0 +1,5 @@
+<div class="max-height fill-me">
+    <ul class="menu vertical plain dropdown hidden" id="settings-fragment-list"></ul>
+    <h2 data-translation="settings"></h2>
+    <div id="settings-fragments"></div>
+</div>

src/module/Application/pwa/js/Fragment/WordRotatorSettingFragment.js

@@ -0,0 +1,47 @@
+import {LocalStorageSettingsFragment, SettingsManager, SettingsSite} from "../../../../../js/lib/pwa-core";
+import {Helper, InitPromise, ThemeManager, Translator} from "../../../../../js/lib/pwa-lib";
+import {WordRotatorDb} from "../WordRotatorDb";
+
+export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
+    constructor(site) {
+        super(site, "html/application/fragment/settings.html");
+    }
+
+    onFirstStart() {
+        let themeTemplate = this.findBy("#theme-radio-template");
+        delete themeTemplate["id"];
+        let themeTemplateContainer = themeTemplate.parentNode;
+        themeTemplateContainer.removeAllChildren();
+
+        for (let i = 0; i < ThemeManager.themes.length; i++) {
+            let themeElem = Helper.cloneNode(themeTemplate);
+            let theme = ThemeManager.themes[i];
+            themeElem.appendChild(Translator.makePersistentTranslation(theme._name));
+
+            let inputElem = themeElem.querySelector("input");
+            inputElem.value = theme._className;
+
+            inputElem.addEventListener("change", function() {
+                if (this.checked){
+                    ThemeManager.changeCurrentTheme(theme)
+                }
+            });
+            themeTemplateContainer.appendChild(themeElem);
+        }
+
+        SettingsManager.getInstance().setSetting("theme", ThemeManager.currentTheme._name);
+
+        this.findBy("#reset-levels").addEventListener("click", () => {
+            localStorage.removeItem("currentLevel");
+            localStorage.removeItem("date-last-sync");
+            localStorage.removeItem("levelCounter");
+            WordRotatorDb.getInstance().removeAll(WordRotatorDb.OBJECT_STORE.LEVEL);
+        });
+
+        return super.onFirstStart();
+    }
+}
+
+InitPromise.addPromise(function () {
+    SettingsSite.addSettingsFragment("settings", WordRotatorSettingFragment);
+});

src/module/Application/pwa/js/site/LevelSite.js

@@ -12,6 +12,7 @@ import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
 export class LevelSite extends WordRotatorBaseSite {
     constructor(siteManager) {
         super(siteManager, "html/application/level.html");
+        this.levelScaler = ()=>{};
     }
 
     onConstruct(args) {
@@ -88,7 +89,7 @@ export class LevelSite extends WordRotatorBaseSite {
                 let levelSegment = this.findBy("#level");
                 levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
                 let scaleHelper = new ScaleHelper();
-                scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
+                this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
 
                 this.level = level;
                 return;
@@ -125,7 +126,7 @@ export class LevelSite extends WordRotatorBaseSite {
             let levelSegment = this.findBy("#level");
             levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
             let scaleHelper = new ScaleHelper();
-            scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
+            this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
 
             this.level = level;
             this.levelCounterAction.innerText = this.levelCounter;
@@ -139,10 +140,9 @@ export class LevelSite extends WordRotatorBaseSite {
     onStart(args) {
         let res = super.onStart(args);
 
-        let scaleHelper = new ScaleHelper();
-        scaleHelper.s
         this.levelCounterAction.innerText = this.levelCounter;
         this.levelCounterActionContainer.classList.add("visible");
+        this.levelScaler();
         return res;
     }
 

src/module/Application/pwa/js/site/WordRotatorBaseSite.js

@@ -1,15 +1,16 @@
 import {AbstractSite, Menu, MenuAction} from "../../../../../js/lib/pwa-lib";
+import {SettingsSite} from "../../../../../js/lib/pwa-core";
 
 export class WordRotatorBaseSite extends AbstractSite {
-
-    createActionBarMenu(menu) {
-        menu = super.createActionBarMenu(menu);
-        let actions = menu.actions;
-        for (let i = 0; i < actions.length; i++) {
-            if (actions[i].title === "login" || actions[i].title === "registration"){
-                actions[i].setVisible(false);
-            }
-        }
-        return menu;
-    }
+    // createActionBarMenu(menu) {
+    //     menu = super.createActionBarMenu(menu);
+    //     // menu.addAction(SettingsSite.settingsAction.copy());
+    //     // let actions = menu.actions;
+    //     // for (let i = 0; i < actions.length; i++) {
+    //     //     if (actions[i].title === "login" || actions[i].title === "registration"){
+    //     //         actions[i].setVisible(false);
+    //     //     }
+    //     // }
+    //     return menu;
+    // }
 }