plaid/src/pages/Radio.vue

<template>
  <f7-page name="radio">
    <img :src="radio().logo" id="logo" />
    <f7-block-title>{{ radio().name }}</f7-block-title>
    <f7-block-header>{{ radio().description }}</f7-block-header>

    <div v-if="loading()" strong class="text-align-center">
      <f7-preloader v-if="loading()" />
    </div>
    <f7-list v-else>
      <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/${encodeURIComponent(radioUrl)}/contacts`"
        disabled
      />
    </f7-list>
  </f7-page>
</template>

<script>
import { useRadioStore } from "../js/store";
import { storeToRefs } from "pinia";

export default {
  name: "radio",
  data() {
    return {
      isRadioReady: null,
      radioUrl: null,
      store: useRadioStore(),
      radio: () => {
        return this.store.radios[this.radioUrl] || {};
      },
      loading: () => {
        return this.isRadioReady === null || !this.isRadioReady(this.radioUrl);
      },
    };
  },
  props: { f7route: Object, f7router: Object },
  async mounted() {
    this.radioUrl = decodeURIComponent(this.f7route.params.radioUrl);

    const { isRadioReady } = storeToRefs(this.store);
    this.isRadioReady = isRadioReady;
  },
};
</script>
<style>
#logo {
  margin-left: 10px;
  max-width: 40px;
}
</style>