Merge pull request #14 from modos189/feat/settings

Implement app settings

Author: modos189

app/app.js

@@ -10,13 +10,15 @@ import WebViewPlugin from '@nativescript-community/ui-webview/vue';
 import { CheckBox } from '@nstudio/nativescript-checkbox';
 import CollectionView from '@nativescript-community/ui-collectionview/vue';
 import RipplePlugin from '@nativescript-community/ui-material-ripple/vue';
+import { ImageCacheIt } from '@triniwiz/nativescript-image-cache-it';
 
 import Main from '~/components/Main'
 import store from './store';
 import { initializeTracing } from './app-trace';
 
 // Initialize app logging
 initializeTracing();
+ImageCacheIt.enableAutoMM();
 
 FontIcon.paths = {
   'fa': './assets/css/Font-Awesome.css',
@@ -35,6 +37,7 @@ Vue.use(CollectionView);
 Vue.use(RipplePlugin);
 
 Vue.registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
+Vue.registerElement('ImageCacheIt', () => require('@triniwiz/nativescript-image-cache-it').ImageCacheIt);
 Vue.registerElement(
   'CheckBox',
   () => CheckBox,

app/app.scss

@@ -40,6 +40,11 @@ $state-focus: rgba(255, 255, 255, 0.12);
 $state-pressed: rgba(255, 255, 255, 0.16);
 $state-drag: rgba(255, 255, 255, 0.16);
 
+$state-success: #43a047;
+$state-error: #e53935;
+$state-disabled: #888;
+
+
 // Elevation overlay (for depth effect)
 $elevation-level1: rgba(255, 255, 255, 0.05);
 $elevation-level2: rgba(255, 255, 255, 0.08);

app/assets/icons/userscript-no-icon.png

@@ -21,8 +21,16 @@ import { injectBridgeIITC, router } from "@/utils/bridge";
 import { injectIITCPrimeResources } from "~/utils/iitc-prime-resources";
 import { injectDebugBridge } from "@/utils/debug-bridge";
 import BaseWebView from './BaseWebView.vue';
-import { INGRESS_INTEL_MAP } from "@/utils/url-config";
-import {changePortalHighlights, showLayer, switchToPane} from "@/utils/events-to-iitc";
+import { INGRESS_INTEL_MAP, addViewportParam } from "@/utils/url-config";
+import {
+  changePortalHighlights,
+  showLayer,
+  switchToPane,
+  setView,
+  userLocationLocate,
+  userLocationUpdate,
+  userLocationOrientation,
+} from "@/utils/events-to-iitc";
 
 export default {
   name: 'AppWebView',
@@ -33,12 +41,15 @@ export default {
 
   data() {
     return {
-      store_unsubscribe: () => {},
-      intelMapUrl: INGRESS_INTEL_MAP
+      store_unsubscribe: () => {}
     }
   },
 
   computed: {
+    intelMapUrl() {
+      return addViewportParam(INGRESS_INTEL_MAP);
+    },
+
     webview() {
       return this.$refs.baseWebView?.webview;
     }
@@ -115,6 +126,19 @@ export default {
           case "navigation/setCurrentPane":
             await webview.executeJavaScript(switchToPane(action.payload));
             break;
+          case "map/locateMapOnce":
+            await webview.executeJavaScript(setView(action.payload.lat, action.payload.lng, action.payload.persistentZoom));
+            break;
+          case "map/userLocationLocate":
+            const { lat, lng, accuracy, persistentZoom } = action.payload;
+            await webview.executeJavaScript(userLocationLocate(lat, lng, accuracy, persistentZoom));
+            break;
+          case "map/setLocation":
+            await webview.executeJavaScript(userLocationUpdate(action.payload.lat, action.payload.lng));
+            break;
+          case "map/userLocationOrientation":
+            await webview.executeJavaScript(userLocationOrientation(action.payload.direction));
+            break;
         }
       }
     });

app/components/AppWebView.vue

@@ -51,9 +51,8 @@
 <script>
 import { AndroidApplication, Application } from "@nativescript/core";
 import { keyboardOpening } from '@bezlepkin/nativescript-keyboard-opening';
-import { Manager } from 'lib-iitc-manager';
-import storage from "~/utils/storage";
 import { layoutService } from '~/utils/layout-service';
+import UserLocation from "@/utils/user-location";
 
 import AppWebView from './AppWebView';
 import ProgressBar from './ProgressBar';
@@ -94,6 +93,7 @@ export default {
       removeLayoutListener: null,
       keyboard: null,
       isKeyboardOpen: false,
+      userLocation: null,
     }
   },
 
@@ -173,16 +173,8 @@ export default {
       }
     },
 
-    setupManager() {
-      const manager = new Manager({
-        storage,
-        message: (message, args) => console.log(`Message: ${message}, args: ${args}`),
-        progressbar: is_show => console.log(`Progress bar: ${is_show ? 'show' : 'hide'}`),
-        inject_plugin: (p) => this.$store.dispatch('map/setInjectPlugin', p)
-      });
-
-      manager.run();
-      return manager;
+    async setupManager() {
+      await this.$store.dispatch('manager/run');
     },
 
     setupAndroidBackHandler() {
@@ -212,7 +204,10 @@ export default {
   },
 
   async created() {
-    const manager = this.setupManager();
+    // Initialize app settings
+    await this.$store.dispatch('settings/initSettings');
+
+    this.setupManager().then();
     this.setupAndroidBackHandler();
 
     // Initialize layout service with default dimensions
@@ -228,6 +223,8 @@ export default {
     // Update store with initial values
     this.updateStoreLayout(layoutService.dimensions);
 
+    this.userLocation = new UserLocation();
+
     // Subscribe to layout changes
     this.removeLayoutListener = layoutService.addLayoutChangeListener(this.handleLayoutChanged.bind(this));
 
@@ -241,7 +238,12 @@ export default {
         switch (action.type) {
           case "ui/setWebviewLoadStatus":
             if (action.payload) {
-              await manager.inject();
+              await this.$store.dispatch('manager/inject');
+            }
+            break;
+          case "map/triggerUserLocate":
+            if (this.userLocation) {
+              await this.userLocation.locate();
             }
             break;
         }
@@ -263,6 +265,10 @@ export default {
       this.keyboard.off('opened');
       this.keyboard.off('closed');
     }
+
+    if (this.userLocation) {
+      this.userLocation.stopTracking();
+    }
   }
 };
 </script>

app/components/Main.vue

@@ -0,0 +1,83 @@
+//@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
+
+<template>
+  <SettingsBase title="About IITC Prime">
+    <StackLayout class="about-container">
+      <Label class="app-name" text="IITC Prime" />
+      <Label class="app-version" :text="'Version: ' + appVersion" />
+
+      <Label class="app-description" textWrap="true">
+        IITC Prime is a mobile client for Ingress Intel Total Conversion that provides an enhanced interface for the Ingress Intel Map.
+      </Label>
+    </StackLayout>
+  </SettingsBase>
+</template>
+
+<script>
+import SettingsBase from './SettingsBase';
+import * as appVersion from '@nativescript/appversion';
+
+export default {
+  name: 'AboutView',
+
+  components: {
+    SettingsBase
+  },
+
+  data() {
+    return {
+      appVersion: 'Loading...'
+    };
+  },
+
+  created() {
+    // Get app version
+    this.loadAppVersion();
+  },
+
+  methods: {
+    loadAppVersion() {
+      try {
+        this.appVersion = appVersion.getVersionNameSync();
+      } catch (error) {
+        console.error('Error loading app version:', error);
+        this.appVersion = 'Unknown';
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/app';
+
+.about-container {
+  padding: 24;
+  text-align: center;
+}
+
+.app-logo {
+  height: 100;
+  margin-bottom: 24;
+}
+
+.app-name {
+  font-size: 24;
+  font-weight: bold;
+  color: $on-surface;
+  margin-bottom: 8;
+}
+
+.app-version {
+  font-size: 16;
+  color: $surface-variant;
+  margin-bottom: 24;
+}
+
+.app-description {
+  font-size: 14;
+  color: $on-surface;
+  text-align: center;
+  margin-bottom: 24;
+}
+</style>