Installierbar und Settings bearbeitet

src/module/Application/pwa/html/application/dialog/chooseTheme.html

@@ -1,7 +1,7 @@
 <div>
     <div id='theme-choose-container'>
-        <div id='choose-theme-template'>
-            <div class='name'></div>
+        <div id='choose-theme-template' class = 'setting-row row'>
+            <div class='name column small-12'></div>
         </div>
     </div>
 </div>

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

@@ -1,6 +1,10 @@
 <div class='max-height fill-me'>
     <div class='row max-width grow flex-center'>
         <div class='columns small-centered small-12 smedium-11 medium-9 large-7'>
+            <div class='row setting-row hidden' id='install-button'>
+                <span class='columns small-6' data-translation="install"></span>
+                <span class='columns small-6 text-right' data-translation=">"></span>
+            </div>
             <div class='row setting-row' id="theme-chooser">
                 <span class='columns small-6' data-translation="theme"></span>
                 <span class='columns small-6 text-right'>

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

@@ -1,7 +1,7 @@
 import {LocalStorageSettingsFragment, SettingsManager, SettingsSite} from "../../../../../js/lib/pwa-core";
 import {Helper, InitPromise, ThemeManager, Translator} from "../../../../../js/lib/pwa-lib";
 import {WordRotatorDb} from "../WordRotatorDb";
-import {Matomo, SoundManager} from "../../../../../js/lib/pwa-assets";
+import {InstallManager, Matomo, SoundManager} from "../../../../../js/lib/pwa-assets";
 import {CreditsSite} from "../site/CreditsSite";
 import {PrivacyPolicySite} from "../site/PrivacyPolicySite";
 import {ChooseThemeDialog} from "../dialog/ChooseThemeDialog";
@@ -19,7 +19,7 @@ export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
         themeNameElem.removeAllChildren().appendChild(Translator.makePersistentTranslation(currentThemeName));
         this.findBy("#theme-chooser").addEventListener("click", async () => {
             let newTheme = await (new ChooseThemeDialog()).show();
-            if (Helper.isNotNull(newTheme)){
+            if (Helper.isNotNull(newTheme)) {
                 SettingsManager.getInstance().setSetting("theme", newTheme);
                 ThemeManager.changeCurrentTheme(newTheme);
                 themeNameElem.removeAllChildren().appendChild(Translator.makePersistentTranslation(newTheme));
@@ -35,7 +35,7 @@ export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
             WordRotatorDb.getInstance().removeAll(WordRotatorDb.OBJECT_STORE.LEVEL);
         });
 
-        if (location.hostname.includes("beta") || location.hostname.includes("127.0.0.1")){
+        if (location.hostname.includes("beta") || location.hostname.includes("127.0.0.1")) {
             this.findBy("#reset-levels").classList.remove("hidden");
         }
 
@@ -43,12 +43,12 @@ export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
         playMusicButton.addEventListener("change", () => {
             let soundManager = SoundManager.getInstance();
             soundManager.set({muted: !playMusicButton.checked}, SoundManager.CHANNELS.MUSIC);
-            if (playMusicButton.checked){
+            if (playMusicButton.checked) {
                 soundManager.play(SoundManager.CHANNELS.MUSIC);
             }
         });
 
-        this.findBy("#track-switch").addEventListener("change", function(e) {
+        this.findBy("#track-switch").addEventListener("change", function (e) {
             Matomo.setTrack(this.checked === true);
             e.stopPropagation();
             e.preventDefault();
@@ -61,6 +61,14 @@ export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
             this.getSite().startSite(PrivacyPolicySite);
         });
 
+        InstallManager.setCanInstallListener((e) => {
+            let installButton =this.findBy("#install-button");
+            installButton.addEventListener("click", () => {
+                e.prompt();
+            });
+            installButton.classList.remove("hidden");
+        });
+
         return super.onFirstStart();
     }
 

src/module/Application/pwa/translations/de.json

@@ -25,5 +25,6 @@
   "impressum":"Impressum",
   "track":"Anonymisierte Nutzungsdaten senden:",
   ">":">",
-  "choose-theme-dialog-title":"Theme auswählen:"
+  "choose-theme-dialog-title":"Theme auswählen:",
+  "install":"Installieren"
 }

src/scss/_wordrotatorTheme.scss

@@ -49,6 +49,12 @@
       }
     }
   }
+  //.setting-row{
+  //  border-bottom: 1px solid  #{map-get($theme, textColor)};
+  //  &:not(.hidden):first-child{
+  //    border-top: 1px solid  #{map-get($theme, textColor)};
+  //  }
+  //}
 }
 
 body {
@@ -93,11 +99,13 @@ body {
     font-size: 1em !important;
 
   }
-  .setting-row{
+  .setting-row:not(.hidden){
     line-height: 1;
     padding-top: 0.5em;
     padding-bottom: 0.5em;
     width: 100%;
     cursor: pointer;
+    background: rgba(195, 195, 195, 0.13);
+    display: inline-block;
   }
 }