move more data into store for reactivity

src/js/radiomanifest.js

@@ -1,14 +1,6 @@
 import radiomanifest from "@radiomanifest/radiomanifest";
 
-const knownRadios = {
-    "https://www.ondarossa.info": {
-      "name": "ror"
-    },
-    "https://radiospore.oziosi.org": {},
-    // "https://radiowombat.net": {},
-    // "https://test.radiogramma.org": {},
-    "https://radioblackout.org": {},
-  }
+const knownRadios = ["https://www.ondarossa.info", "https://radiospore.oziosi.org"]
 class Controller {
   constructor() {
     this.cache = {}
@@ -26,10 +18,8 @@ class Controller {
     }
     this.cache[url] = knownRadios[url];
     // fetch more data in background
-    radiomanifest.get(url).then((rm) => {
-      console.log("arrivato", url)
-      this.cache[url] = rm
-    })
+    this.cache[url] = await radiomanifest.get(url)
+    return this.cache[url]
   }
 }
 

src/js/routes.js

@@ -14,22 +14,22 @@ var routes = [
     detailRoutes: [
       {
         name: "Radio",
-        path: "/radio/:radioName",
+        path: "/radio/:radioUrl",
         component: RadioPage,
       },
       {
         name: "RadioLive",
-        path: "/radio/:radioName/live",
+        path: "/radio/:radioUrl/live",
         component: RadioLivePage,
       },
       {
         name: "RadioShows",
-        path: "/radio/:radioName/shows",
+        path: "/radio/:radioUrl/shows",
         component: RadioShowsPage,
       },
       {
         name: "ShowPage",
-        path: "/radio/:radioId/shows/:showId",
+        path: "/radio/:radioUrl/shows/:showId",
         component: ShowPage,
       },
     ],

src/js/store.js

@@ -2,21 +2,26 @@ import { createStore } from "framework7/lite";
 
 const store = createStore({
   state: {
-    radios: [
-      {
-        id: 1,
-        name: "Radio Onda Rossa",
-        description: "un segnale che disturba",
-        url: "https://www.ondarossa.info",
+    radios: {
+      "https://www.ondarossa.info": {
+        name: "ROR",
       },
-      {
-        id: 2,
-        name: "Radio Spore",
-        description: "una voce senza padrone",
-        url: "https://radiospore.oziosi.org",
+      "https://radiospore.oziosi.org": {
+        name: "Spore",
       },
-    ],
+    },
   },
-  actions: {},
+  getters: {
+    radios({state}) {
+      return state.radios
+    },
+  },
+  actions: {
+    cambia({state}, {base }) {
+      const oneRadio = Object.keys(state.radios)[0]
+      const prevValue = state.radios[oneRadio].name
+      state.radios[oneRadio].name = prevValue.split(" ")[0] + " " + (base+Math.random())
+    }
+},
 });
 export default store;

src/pages/Radio.vue

@@ -8,11 +8,11 @@
       <f7-preloader v-if="loading" />
     </div>
     <f7-list v-else>
-      <f7-list-item title="Diretta" :link="`/radio/${radioId}/live`" />
-      <f7-list-item title="Trasmissioni" :link="`/radio/${radioId}/shows`" />
+      <f7-list-item title="Diretta" :link="`/radio/${encodeURIComponent(radioUrl)}/live`" />
+      <f7-list-item title="Trasmissioni" :link="`/radio/${encodeURIComponent(radioUrl)}/shows`" />
       <f7-list-item
         title="Contatti"
-        :link="`/radio/${radioId}/contacts`"
+        :link="`/radio/${encodeURIComponent(radioUrl)}/contacts`"
         disabled
       />
     </f7-list>
@@ -27,16 +27,16 @@ export default {
   data() {
     return {
       loading: true,
-      radioId: null,
+      radioUrl: null,
       radio: { name: "" },
       Radio: {},
     };
   },
   props: { f7route: Object, f7router: Object },
   async mounted() {
-    this.radioId = this.f7route.params.radioName;
+    this.radioUrl = decodeURIComponent(this.f7route.params.radioUrl);
     try {
-      this.Radio = await radiomanifest.get(this.f7route.params.radioName);
+      this.Radio = await radiomanifest.get(this.radioUrl);
       this.loading = false;
     } catch (e) {
       console.error("le cose non vanno mai sempre bene!", e);

src/pages/RadioLive.vue

@@ -26,23 +26,20 @@ export default {
   data() {
     return {
       loading: true,
-      radioId: null,
-      radio: { name: "" },
       currentShowName: "",
       Radio: {},
     };
   },
   props: { f7route: Object, f7router: Object },
   async mounted() {
-    this.radioId = this.f7route.params.radioName;
     try {
-      this.Radio = await radiomanifest.get(this.f7route.params.radioName);
+      this.Radio = await radiomanifest.get(decodeURIComponent(this.f7route.params.radioUrl));
       const currentShow = this.Radio.getShowAtTime();
       this.currentShowName =
         currentShow == null ? "live" : currentShow.getName();
       this.loading = false;
     } catch (e) {
-      console.error("le cose non vanno mai sempre bene!", e);
+      console.error("error fetching", e);
     }
   },
   methods: {

src/pages/RadioShows.vue

@@ -12,7 +12,7 @@
         v-for="show in Radio.shows"
         :key="show.name"
         :title="show.name"
-        :link="`/radio/${radioId}/shows/${show.name}`"
+        :link="`/radio/${encodeURIComponent(radioId)}/shows/${show.name}`"
         :footer="show.description"
       />
     </f7-list>
@@ -34,9 +34,9 @@ export default {
   },
   props: { f7route: Object, f7router: Object },
   async mounted() {
-    this.radioId = this.f7route.params.radioName;
+    this.radioId = decodeURIComponent(this.f7route.params.radioUrl);
     try {
-      this.Radio = await radiomanifest.get(this.f7route.params.radioName);
+      this.Radio = await radiomanifest.get(this.radioId);
       this.loading = false;
     } catch (e) {
       console.error("le cose non vanno mai sempre bene!", e);

src/pages/Show.vue

@@ -39,20 +39,22 @@ export default {
     return {
       loading_meta: true,
       loading: true,
-      radioId: null,
+      radioUrl: null,
       showId: null,
       Show: null,
     };
   },
   props: { f7route: Object, f7router: Object },
   async mounted() {
-    this.radioId = this.f7route.params.radioId;
+    this.radioUrl = decodeURIComponent(this.f7route.params.radioUrl);
     this.showId = this.f7route.params.showId;
     this.ShowBasicInfo = {};
 
     try {
-      this.Radio = await radiomanifest.get(this.f7route.params.radioId);
+      this.Radio = await radiomanifest.get(this.radioUrl);
+      console.log("Radio =", this.Radio);
       this.ShowBasicInfo = this.Radio.getShowByName(this.showId);
+      console.log("ShowBasicInfo =", this.ShowBasicInfo);
       this.loading_meta = false;
       this.Show = await getPodcast(this.ShowBasicInfo.getFeed());
       console.log("Show =", this.Show);

src/pages/home.vue

@@ -1,5 +1,10 @@
 <script setup>
-import radiomanifest from "../js/radiomanifest";
+import store from "../js/store";
+setInterval(function() {
+  console.log("store", store)
+  store.dispatch('cambia', { base: 10 });
+return true;
+}, 4000)
 </script>
 <template>
   <f7-page name="home">
@@ -7,9 +12,9 @@ import radiomanifest from "../js/radiomanifest";
     <f7-block-title>Radio</f7-block-title>
     <f7-list>
       <f7-list-item
-        v-for="(radio, url) in radiomanifest.cache"
-        :key="radio.ts"
-        :link="`/radio/${url}`"
+        v-for="(radio, url) in store.getters.radios.value"
+        :key="radio.name"
+        :link="`/radio/${encodeURIComponent(url)}`"
         :title="radio.name"
       />
     </f7-list>