added preferences page

tappi287 · Apr 11, 2023 · bddd141 · bddd141
1 parent 6e2ad61
commit bddd141
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 18 deletions.
diff --git a/rf2settings/app/app_main.py b/rf2settings/app/app_main.py
@@ -120,6 +120,16 @@ def get_apply_webui_settings():
     return app_main_fn.get_apply_webui_settings()
 
 
+@eel.expose
+def save_app_preferences(app_preferences):
+    return app_main_fn.save_app_preferences(app_preferences)
+
+
+@eel.expose
+def load_app_preferences():
+    return app_main_fn.load_app_preferences()
+
+
 def expose_main_methods():
     """ empty method we import to have the exposed methods registered """
     pass
diff --git a/rf2settings/app/app_main_fn.py b/rf2settings/app/app_main_fn.py
@@ -169,3 +169,15 @@ def set_apply_webui_settings(setting: bool):
 def get_apply_webui_settings():
     logging.debug('Providing Ui with apply_webui_settings: %s', AppSettings.apply_webui_settings)
     return json.dumps({'result': True, 'setting': AppSettings.apply_webui_settings})
+
+
+@capture_app_exceptions
+def save_app_preferences(app_preferences: dict):
+    AppSettings.app_preferences = app_preferences
+    AppSettings.save()
+    return json.dumps({'result': True})
+
+
+@capture_app_exceptions
+def load_app_preferences():
+    return json.dumps({'result': True, 'preferences': AppSettings.app_preferences})
diff --git a/rf2settings/app_settings.py b/rf2settings/app_settings.py
@@ -17,6 +17,7 @@ class AppSettings(JsonRepr):
     needs_admin = False
     selected_presets: Dict[str, str] = dict()
     replay_preset = str()
+    app_preferences = dict()
 
     rf_overwrite_location = ''
 

diff --git a/vue/package.json b/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rF2-Settings-Widget",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/vue/src/components/MainPage.vue b/vue/src/components/MainPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="main" class="position-relative" v-cloak @focus.once="startSlideShow">
+  <div id="main" class="position-relative" v-cloak>
     <b-navbar class="text-left pl-0 pr-0" type="dark">
       <b-navbar-brand href="#" @click="navActive=0" class="r-icon-brand position-relative"
                       v-b-popover.bottomleft.hover="'DashBoard'">
@@ -63,6 +63,12 @@
             <div class="vr-nav-icon"><b-icon icon="square-fill"></b-icon></div>
           </div>
         </b-nav-item>
+        <b-nav-item id="preferences-nav" right :active="navActive === 12" @click="navActive=12">
+          <b-iconstack>
+            <b-icon stacked icon="square-fill"></b-icon>
+            <b-icon stacked icon="gear-fill" scale="0.75" class="gear-icon"></b-icon>
+          </b-iconstack>
+        </b-nav-item>
         <b-nav-item id="wiki-nav" right :active="navActive === 7" @click="navActive=7">
           <b-icon icon="question-square-fill"></b-icon>
         </b-nav-item>
@@ -87,7 +93,7 @@
 
     <!-- Dashboard -->
     <keep-alive>
-      <DashBoard ref="dash" :gfx-handler="$refs.gfx" v-if="navActive === 0 && gfxReady"
+      <DashBoard ref="dash" :gfx-handler="$refs.gfx" :prefs="$refs.preferences" v-if="navActive === 0 && gfxReady"
                  :refresh-favs="refreshDashFavs" @favs-updated="refreshDashFavs = false"
                  :rfactor-version="rfactorVersion"
                  @make-toast="makeToast" @error="setError" @set-busy="setBusy" @nav="navigate"/>
@@ -115,7 +121,7 @@
       </b-overlay>
     </template>
     <keep-alive>
-      <ControllerDeviceList :visible="navActive === 2"/>
+      <ControllerDeviceList :visible="navActive === 2 || navActive === 0"/>
     </keep-alive>
 
     <!-- Generic Settings-->
@@ -200,6 +206,11 @@
                        @content-launched="navActive = 0" :ses-handler="$refs.ses" :search="search"
                        @make-toast="makeToast" @set-busy="setBusy"/>
 
+    <!-- App Preferences -->
+    <keep-alive>
+      <PreferencesPage :visible="navActive === 12" ref="preferences" />
+    </keep-alive>
+
     <!-- rFactor Actions -->
     <b-container fluid class="mt-3 p-0">
       <b-row cols="2" class="m-0">
@@ -266,6 +277,7 @@ import SessionPresetArea from "@/components/presets/SessionPresetArea";
 import ChatPage from "@/components/pages/ChatPage";
 import ControllerDeviceList from "@/components/ControllerDeviceList";
 import RfactorOverlay from "@/components/RfactorOverlay";
+import PreferencesPage from "@/components/pages/PreferencesPage";
 
 export default {
   name: 'MainPage',
@@ -283,6 +295,7 @@ export default {
       quitBusy: false,
       refreshDashFavs: false,
       contentModal: false,
+      constantFalse: false,
     }
   },
   props: { rfactorVersion: String },
@@ -408,7 +421,6 @@ export default {
         this.makeToast(r.msg, 'danger', 'SteamVR Launch')
       }
     },
-    startSlideShow: async function() { await sleep(5000); await this.$refs.dash.$refs.slider.play() },
     stopSlideShow: async function() {
       if (this.$refs.dash !== undefined) { await this.$refs.dash.$refs.slider.stop() }
     },
@@ -442,6 +454,7 @@ export default {
     this.$eventHub.$off('navigate', this.navigate)
   },
   components: {
+    PreferencesPage,
     RfactorOverlay,
     ControllerDeviceList,
     ChatPage,
@@ -479,7 +492,10 @@ export default {
 .vr-nav-icon {
   position: absolute;
 }
+#vr-nav a { padding-right: 0.275rem; }
 #wiki-nav a { padding-right: 0; }
+#preferences-nav a { padding-right: 0; }
+.gear-icon { color: rgba(0.1, 0.1, 0.1, 0.75); }
 .nav-link.active {
   text-decoration: underline;
   text-decoration-skip-ink: auto;

diff --git a/vue/src/components/pages/DashBoard.vue b/vue/src/components/pages/DashBoard.vue
@@ -58,6 +58,7 @@
 <script>
 import ServerBrowser from "@/components/pages/ServerBrowser"
 import PresetHandler from "@/components/presets/PresetHandler";
+import PreferencesPage from "@/components/pages/PreferencesPage";
 import { VueFlux, FluxCaption, FluxPreloader } from 'vue-flux';
 import {getEelJsonObject, chooseIndex, userScreenShotsUrl, getMaxWidth, getRequest } from "@/main"
 import rfWPoster from "@/assets/rfW_Poster.webp"
@@ -98,7 +99,7 @@ export default {
       posterImg: rfWPoster
     }
   },
-  props: {gfxHandler: PresetHandler, refreshFavs: Boolean, rfactorVersion: String },
+  props: {gfxHandler: PresetHandler, prefs: PreferencesPage, refreshFavs: Boolean, rfactorVersion: String },
   methods: {
     makeToast(message, category = 'secondary', title = 'Update', append = true, delay = 8000) {
       this.$emit('make-toast', message, category, title, append, delay)
@@ -108,13 +109,22 @@ export default {
       this.vfImages = r.images; this.vfCaptions = r.captions
     },
     getRemoteScreenShots: async function() {
-      const request = await getRequest(userScreenShotsUrl)
-      if (request.result === false) {
-        console.error('Error fetching Screenshots: ' + request.data.result)
-        return
+      let slideShowActivated = false
+      if (this.prefs !== undefined) {
+        slideShowActivated = this.prefs.dashboardModules.indexOf('img') !== -1
+      }
+
+      if (slideShowActivated) {
+        const request = await getRequest(userScreenShotsUrl)
+        if (request.result === false) {
+          console.error('Error fetching Screenshots: ' + request.data.result)
+          return
+        }
+        userScreenShots = request.data
+        await this.setupScreenShots()
+      } else {
+        this.$refs.slider.stop()
       }
-      userScreenShots = request.data
-      await this.setupScreenShots()
     },
     setBusy: function (busy) {this.$emit('set-busy', busy) },
     getDriver: async function () {
@@ -161,14 +171,15 @@ export default {
     setTimeout(() => {
       this.equalPresetButtonWidth()
     }, 0)
-
-    await this.getRemoteScreenShots()
   },
-  created() {
+  async created() {
     this.setBusy(true)
-    this.setupScreenShots()
-    this.getDriver()
-    this.setBusy(false)
+    await this.setupScreenShots()
+    await this.getDriver()
+    await this.setBusy(false)
+    setTimeout( () => {
+      this.getRemoteScreenShots()
+    }, 500)
     window.onresize = this.updateImageClip
   },
   components: {

diff --git a/vue/src/components/pages/PreferencesPage.vue b/vue/src/components/pages/PreferencesPage.vue
@@ -0,0 +1,91 @@
+<template>
+  <div v-cloak v-if="visible" id="settings" class="position-relative mb-5 text-left">
+    <b-input-group class="pb-2" size="sm">
+      <b-input-group-prepend>
+        <div class="pl-0 pr-1 rpl-con position-relative bg-transparent">
+          <b-img width=".3rem" class="rpl-icon" src="@/assets/rfW_logo_color.svg"></b-img>
+        </div>
+        <!-- Title -->
+        <b-input-group-text class="bg-transparent no-border title text-white pl-0">
+          App Preferences
+        </b-input-group-text>
+      </b-input-group-prepend>
+
+      <!-- Spacer -->
+      <div class="form-control bg-transparent no-border"></div>
+    </b-input-group>
+
+    <b-card class="setting-card mb-2" bg-variant="dark" text-variant="white" footer-class="pt-0">
+      <template #header>
+        <h6 class="mb-0 text-center"><span class="title">General</span></h6>
+      </template>
+
+      <b-checkbox-group :options="appOptions" v-model="appModules" @change="save" />
+
+    </b-card>
+
+    <b-card class="setting-card" bg-variant="dark" text-variant="white" footer-class="pt-0">
+      <template #header>
+        <h6 class="mb-0 text-center"><span class="title">Dashboard</span></h6>
+      </template>
+
+      <b-checkbox-group :options="dashboardOptions" v-model="dashboardModules" @change="save" />
+
+      <b-card-text class="mt-3">
+        Choose what you would like to see on your dashboard. There is no need to disable the Image Slideshow for
+        performance reasons. It will stop once rF2 is running.
+      </b-card-text>
+
+    </b-card>
+  </div>
+</template>
+
+<script>
+import {getEelJsonObject} from "@/main";
+
+export default {
+  name: "PreferencesPage",
+  props: {visible: Boolean},
+  data: function () {
+    return {
+      dashboardModules: ['img', 'favs', 'cont'],
+      dashboardOptions: [
+          {text: 'Image Slideshow', value: 'img'},
+          {text: 'Show Favourites', value: 'favs'},
+          {text: 'Show Controller', value: 'cont'}
+      ],
+      appModules: ['audio'],
+      appOptions: [
+        {text: 'Enable Audio Feedback', value: 'audio'}
+      ]
+    }
+  },
+  methods: {
+    async save () {
+      let appPref = {}
+      appPref['dashboardModules'] = this.dashboardModules
+      appPref['appModules'] = this.appModules
+
+      await getEelJsonObject(window.eel.save_app_preferences(appPref)())
+    },
+    async load () {
+      const r = await getEelJsonObject(window.eel.load_app_preferences()())
+      if (r.result) {
+        const appPref = r.preferences
+        if ('dashboardModules' in appPref) {
+          this.dashboardModules = appPref['dashboardModules']
+          this.appModules = appPref['appModules']
+        }
+      }
+    }
+  },
+  async created() {
+    await this.load()
+  }
+}
+</script>
+
+<style scoped>
+  .rpl-icon { width: 2.075rem; }
+  .rpl-con { margin-top: .1rem; }
+</style>