Add server url setting (#97)

* add server url setting

* rename DataLoader.tsx to dataLoader.tsx

* rename DataLoader import

.vscode/settings.json

@@ -9,5 +9,8 @@
     "javascriptreact",
     "typescript",
     "typescriptreact"
-  ]
+  ],
+  "[xml]": {
+    "editor.defaultFormatter": "redhat.vscode-xml"
+  }
 }

src/components/VectorDataLayerMenu.tsx

@@ -14,7 +14,7 @@ import {
 import {
   createCesiumImageryProvider,
   vectorData,
-} from '../functions/DataLoader'
+} from '../functions/dataLoader'
 import React, { useEffect, useState } from 'react'
 import { timeout } from '../functions/util'
 import { useRecoilState, useRecoilValue } from 'recoil'
@@ -60,7 +60,8 @@ export const VectorDataLayerMenu: React.FC<ContainerProps> = ({
     for (let key in response) {
       vecDataMap[key] = createCesiumImageryProvider(
         response[key].url,
-        response[key].layer
+        response[key].layer,
+        response[key].style
       )
     }
     return vecDataMap

src/functions/DataLoader.tsx → src/functions/dataLoader.tsx

@@ -94,12 +94,13 @@ export const vectorData: { [key: string]: WebMapTileServiceImageryProvider } = {
 
 export const createCesiumImageryProvider = (
   url_str: string,
-  layer_name: string
+  layer_name: string,
+  style_name = ''
 ) =>
   new WebMapTileServiceImageryProvider({
     url: url_str,
     layer: layer_name,
-    style: '',
+    style: style_name,
     format: 'image/png',
     tileMatrixSetID: gridsetName,
     tileMatrixLabels: gridNames,

src/functions/rasterMaps.ts

@@ -1,23 +1,33 @@
 import { RasterCfg } from './types'
-import { rasterData, createCesiumImageryProvider } from './DataLoader'
+import { rasterData, createCesiumImageryProvider } from './dataLoader'
+import { serverURL } from './settings'
 
 export const failSafeRasterMaps = [
   {
     layer: rasterData['geology'],
+    url: 'https://geosrv.earthbyte.org/geoserver/gwc/service/wmts',
+    layerName: 'gplates:cgmw_2010_3rd_ed_gplates_clipped_edge_ref',
+    style: '',
     title: 'Geology',
     subTitle: 'present day',
     icon: 'assets/raster_menu/geology-256x256.png',
     model: 'MULLER2019',
   },
   {
     layer: rasterData['agegrid'],
+    url: 'https://geosrv.earthbyte.org/geoserver/gwc/service/wmts',
+    layerName: 'gplates:agegrid',
+    style: '',
     title: 'Agegrid',
     subTitle: 'present day',
     icon: 'assets/raster_menu/agegrid-256x256.png',
     model: 'SETON2012',
   },
   {
     layer: rasterData['topography'],
+    url: 'https://geosrv.earthbyte.org/geoserver/gwc/service/wmts',
+    layerName: 'gplates:topography',
+    style: '',
     title: 'Topography',
     subTitle: 'present day',
     icon: 'assets/raster_menu/topography-256x256.png',
@@ -65,15 +75,16 @@ export const loadRasterMaps = (callback: Function) => {
   while (rasterMaps.length) {
     rasterMaps.pop()
   } //empty the list and then reload
-  fetch('https://gws.gplates.org/mobile/get_rasters')
+  fetch(serverURL.replace(/\/+$/, '') + '/mobile/get_rasters')
     .then((response) => response.json())
     .then((json_data) => {
       //console.log(json_data)
       for (let key in json_data) {
         let o: RasterCfg = {
           layer: createCesiumImageryProvider(
             json_data[key].url,
-            json_data[key].layer
+            json_data[key].layer,
+            json_data[key].style
           ),
           title: json_data[key].title,
           subTitle: json_data[key].subTitle,
@@ -82,13 +93,20 @@ export const loadRasterMaps = (callback: Function) => {
         }
         rasterMaps.push(o)
       }
-      callback()
+      callback(false) //network fail=false
     })
     .catch((error) => {
       console.log(error)
-      for (const o of failSafeRasterMaps) {
+      for (const m of failSafeRasterMaps) {
+        let o: RasterCfg = {
+          layer: createCesiumImageryProvider(m.url, m.layerName, m.style),
+          title: m.title,
+          subTitle: m.subTitle,
+          icon: m.icon,
+          model: m.model,
+        }
         rasterMaps.push(o)
       }
-      callback()
+      callback(true) //network fail=true
     })
 }

src/functions/settings.ts

@@ -0,0 +1,14 @@
+import { Preferences } from '@capacitor/preferences'
+
+const DEFAULT_SERVER_URL = 'https://gws.gplates.org'
+
+export let serverURL: string = DEFAULT_SERVER_URL
+export const setServerURL = (url: string) => {
+  //TODO: validate the url parameter
+  serverURL = url
+  Preferences.set({ key: 'serverURL', value: url })
+}
+//try to get serverURL from Preferences
+Preferences.get({ key: 'serverURL' }).then((result) => {
+  serverURL = result.value ?? DEFAULT_SERVER_URL
+})

src/pages/Main.tsx

@@ -61,11 +61,11 @@ import {
   appDarkMode,
 } from '../functions/atoms'
 import { initCesiumViewer } from '../functions/cesiumViewer'
-import { gplates_coastlines } from '../functions/DataLoader'
 import rasterMaps, { loadRasterMaps } from '../functions/rasterMaps'
 import { BackgroundService } from '../functions/background'
 import { Preferences } from '@capacitor/preferences'
 import { setDarkMode } from '../functions/darkMode'
+import { serverURL } from '../functions/settings'
 
 Ion.defaultAccessToken =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMGFjYTVjNC04OTJjLTQ0Y2EtYTExOS1mYzAzOWFmYmM1OWQiLCJpZCI6MjA4OTksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1Nzg1MzEyNjF9.KyUbfBd_2aCHlvBlrBgdM3c3uDEfYyKoEmWzAHSGSsk'
@@ -146,11 +146,26 @@ const Main: React.FC = () => {
   //use [] to make this useEffect similar to componentDidMount
   useEffect(() => {
     //load the raster maps from gplates server or localstorage
-    loadRasterMaps(() => {
-      setIsRasterMapsLoaded(true)
+    loadRasterMaps((networkFail: boolean) => {
+      //if the network is not working
+      if (networkFail) {
+        presentToast({
+          buttons: [{ text: 'Dismiss', handler: () => dismissToast() }],
+          duration: 5000,
+          message:
+            'Failed to load raster maps from server(' +
+            serverURL +
+            '). Check your server URL setting.',
+          onDidDismiss: () => {},
+        })
+      }
+
+      setIsRasterMapsLoaded(true) //notify the raster maps have been loaded.
+
+      //init Ceium viewer if has not been done yet
       if (document.getElementsByClassName('cesium-viewer').length === 0) {
         cesiumViewer = initCesiumViewer(rasterMaps[0].layer)
-        setIsCesiumViewerReady(true)
+        setIsCesiumViewerReady(true) //notify the Ceium view is ready
 
         // Load settings
         Preferences.get({ key: 'animationSettings' }).then((res) => {
@@ -191,11 +206,6 @@ const Main: React.FC = () => {
             }, 200)
           }
         })
-
-        //maybe we don't need the initial value here
-        let initialVectorLayer =
-          cesiumViewer.imageryLayers.addImageryProvider(gplates_coastlines)
-        setVectorData({ coastlines: initialVectorLayer })
       }
     })
   }, [])

src/pages/SettingMenuPage.scss

@@ -11,7 +11,10 @@ ion-toolbar {
   --background: none;
 }
 
-ion-modal::part(content), ion-list, ion-item-divider, ion-item::part(native) {
+ion-modal::part(content),
+ion-list,
+ion-item-divider,
+ion-item::part(native) {
   transition: background 150ms;
 }
 
@@ -102,3 +105,12 @@ ion-modal::part(content), ion-list, ion-item-divider, ion-item::part(native) {
   height: calc(100% - (var(--toolbar-height) + env(safe-area-inset-top)));
   width: 100%;
 }
+
+.server-url-label {
+  min-width: 30% !important;
+  max-width: 30% !important;
+}
+
+.server-url-input {
+  text-align: right;
+}

src/pages/SettingMenuPage.tsx

@@ -47,6 +47,7 @@ import {
 import { BackgroundService } from '../functions/background'
 import { Preferences } from '@capacitor/preferences'
 import { setDarkMode, setStatusBarTheme } from '../functions/darkMode'
+import { serverURL, setServerURL } from '../functions/settings'
 
 interface ContainerProps {
   backgroundService: BackgroundService
@@ -210,6 +211,18 @@ export const SettingMenuPage: React.FC<ContainerProps> = ({
             </IonSegment>
           </IonItem>
 
+          <IonItemDivider>Server Setting</IonItemDivider>
+          <IonItem>
+            <IonLabel class="server-url-label">Server URL: </IonLabel>
+            <IonInput
+              class="server-url-input"
+              value={serverURL}
+              onIonChange={(e) => {
+                if (e.detail.value) setServerURL(e.detail.value)
+              }}
+            />
+          </IonItem>
+
           <IonItemDivider>Main Setting Section3</IonItemDivider>
           <IonItem>
             <IonLabel>Enable Something</IonLabel>