@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/display/live/RadioList.vue

@@ -1,10 +1,10 @@
 <template>
   <section
-    v-if="(filterOrgaId || organisationId) && radio.length"
+    v-if="(filterStore.filterOrgaId || organisationId) && radio.length"
     class="d-flex flex-column align-items-start mt-3"
   >
     <h2 class="mb-0 mb-3">
-      {{ $t("Radio") }}
+      {{ t("Radio") }}
     </h2>
     <template v-if="radio.length">
       <RadioItem
@@ -16,63 +16,49 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RadioItem from "./RadioItem.vue";
 import {useErrorHandler} from "../../composable/useErrorHandler";
 import classicApi from "../../../api/classicApi";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { mapState } from "pinia";
 import { Canal } from "@/stores/class/radio/canal";
-import { defineComponent } from "vue";
+import { computed, Ref, ref, watch } from "vue";
 import { AxiosError } from "axios";
-export default defineComponent({
-  name: "Ecbd98d979bd4312Ad5eFc7c1c4a191c",
-  components: {
-    RadioItem,
-  },
+import { useI18n } from "vue-i18n";
 
-  props: {
-    organisationId: { default: undefined, type: String },
-  },
-  setup(){
-    const {handle403} = useErrorHandler();
-    return { handle403 }
-  },
-  data() {
-    return {
-      radio: [] as Array<Canal>,
-    };
-  },
 
-  computed: {
-    ...mapState(useFilterStore, ["filterOrgaId"]),
-    filterOrgaUsed(): string | undefined {
-      return this.filterOrgaId ? this.filterOrgaId : this.organisationId;
-    },
-  },
-  watch: {
-    filterOrgaUsed: {
-      async handler(): Promise<void> {
-        this.fetchContent();
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    async fetchContent(): Promise<void> {
-      this.radio.length = 0;
-      if (!this.filterOrgaUsed) {
-        return;
-      }
-      try {
-        this.radio = await classicApi.fetchData<Array<Canal>>({
-          api: 14,
-          path: "canal/orga/" + this.filterOrgaUsed + "/",
-        });
-      } catch (error) {
-        this.handle403(error as AxiosError);
-      }
-    },
-  },
-});
+//Props 
+const props = defineProps({
+  organisationId: { default: undefined, type: String },
+})
+
+//Data 
+const radio: Ref<Array<Canal>> = ref([]);
+
+//Composables
+const { t } = useI18n();
+const {handle403} = useErrorHandler();
+const filterStore = useFilterStore();
+
+//Computed
+const filterOrgaUsed = computed(() => filterStore.filterOrgaId ? filterStore.filterOrgaId : props.organisationId);
+
+//Watch
+watch(filterOrgaUsed, () =>fetchContent(), {immediate: true});
+
+//Methods
+async function fetchContent(): Promise<void> {
+  radio.value.length = 0;
+  if (!filterOrgaUsed.value) {
+    return;
+  }
+  try {
+    radio.value = await classicApi.fetchData<Array<Canal>>({
+      api: 14,
+      path: "canal/orga/" + filterOrgaUsed.value + "/",
+    });
+  } catch (error) {
+    handle403(error as AxiosError);
+  }
+}
 </script>

package/src/components/display/live/RadioPlanning.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="module-box">
     <h2 class="mb-3">
-      {{ $t("Program") }}
+      {{ t("Program") }}
     </h2>
     <div class="py-3">
       <div class="d-flex align-items-center w-100 mb-3">
@@ -17,8 +17,8 @@
         </button>
       </div>
       <button v-if="isPhone" class="btn btn-primary mb-3 mx-0" @click="showAllDays = !showAllDays">
-        <template v-if="!showAllDays">{{ $t('Show more days') }}</template>
-        <template v-else>{{ $t('Show fewer days') }}</template>
+        <template v-if="!showAllDays">{{ t('Show more days') }}</template>
+        <template v-else>{{ t('Show fewer days') }}</template>
       </button>
       <div
         class="d-flex align-items-center justify-content-center border-bottom"
@@ -32,18 +32,18 @@
           {{ period.title }}
         </button>
         <button class="btn btn-underline mb-2" @click="changePeriodNow">
-          {{ $t("Now") }}
+          {{ t("Now") }}
         </button>
       </div>
 
       <div class="d-flex flex-column p-3">
         <ClassicLoading
-          :loading-text="loading ? $t('Loading content ...') : undefined"
-          :error-text="error ? $t(`Error`) : undefined"
+          :loading-text="loading ? t('Loading content ...') : undefined"
+          :error-text="error ? t(`Error`) : undefined"
         />
         <template v-if="!loading && !error">
           <div v-if="!planningLength[daySelected]" class="text-center">
-            {{ $t("No programming") }}
+            {{ t("No programming") }}
           </div>
           <div v-for="period in periodOfDay" v-else :key="period.id">
             <template v-if="planning[daySelected][period.id].length">
@@ -73,7 +73,7 @@
                     name: 'podcast',
                     params: { podcastId: planningItem.podcastId },
                   }"
-                  :title="$t('Episode name page', { name: planningItem.title })"
+                  :title="t('Episode name page', { name: planningItem.title })"
                 >
                   <img
                     v-lazy="
@@ -82,10 +82,11 @@
                     width="150"
                     height="150"
                     class="m-2 program-item-img"
-                    role="presentation"
+                    aria-hidden="true"
+        alt=""
                     
                     :title="
-                      $t('Episode name image', {
+                      t('Episode name image', {
                         name: planningItem.podcastData.title,
                       })
                     "
@@ -96,7 +97,7 @@
                         v-if="planningItem.liveId"
                         class="bg-complementary text-white p-1 me-1"
                       >
-                        {{ $t("Live") }}
+                        {{ t("Live") }}
                       </div>
                       <div class="flex-grow-1 fw-bold">
                         {{ planningItem.podcastData.title }}
@@ -113,7 +114,7 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 dayjs.extend(utc);
@@ -121,234 +122,221 @@ import classicApi from "../../../api/classicApi";
 import {useImageProxy} from "../../composable/useImageProxy";
 import {useResizePhone} from "../../composable/useResizePhone";
 import ClassicLoading from "../../form/ClassicLoading.vue";
-import { defineComponent } from "vue";
+import { computed, nextTick, onMounted, ref, Ref } from "vue";
 import { Canal } from "@/stores/class/radio/canal";
 import { PlanningOccurrence } from "@/stores/class/radio/recurrence";
 import { PlanningLive } from "@/stores/class/radio/live";
-export default defineComponent({
-  name: "RadioPlanning",
+import { useI18n } from "vue-i18n";
 
-  components: {
-    ClassicLoading,
-  },
+//Props 
+const props = defineProps({
+  radio: { default: undefined, type: Object as () => Canal },
+})
 
-  props: {
-    radio: { default: undefined, type: Object as () => Canal },
-  },
+//Data 
+const planning: Ref<{
+  [key: number]: {
+    morning: Array<PlanningOccurrence | PlanningLive>;
+    afternoon: Array<PlanningOccurrence | PlanningLive>;
+    evening: Array<PlanningOccurrence | PlanningLive>;
+  };
+}> = ref({});
+const planningLength: Ref<{ [key: number]: number }> = ref({});
+const daySelected = ref(dayjs().valueOf());
+const arrayDays: Ref<Array<{
+  title: string;
+  date: number;
+  dayOfWeek: string;
+  iso: string;
+}>> = ref([]);
+const loading = ref(true);
+const error = ref(false);
+const showAllDays = ref(false);
 
 
-  setup(){
-    const { isPhone } = useResizePhone();
-    const { useProxyImageUrl } = useImageProxy();
-    return { isPhone, useProxyImageUrl }
-  },
+//Composables
+const { t } = useI18n();
+const { isPhone } = useResizePhone();
+const { useProxyImageUrl } = useImageProxy();
 
-  data() {
-    return {
-      planning: {} as {
-        [key: number]: {
-          morning: Array<PlanningOccurrence | PlanningLive>;
-          afternoon: Array<PlanningOccurrence | PlanningLive>;
-          evening: Array<PlanningOccurrence | PlanningLive>;
-        };
-      },
-      planningLength: {} as { [key: number]: number },
-      daySelected: dayjs().valueOf(),
-      arrayDays: [] as Array<{
-        title: string;
-        date: number;
-        dayOfWeek: string;
-        iso: string;
-      }>,
-      loading: true as boolean,
-      error: false as boolean,
-      showAllDays: false as boolean
-    };
-  },
-
-  computed: {
-    startOfDay(): string {
-      return dayjs(this.daySelected).startOf("date").toISOString();
-    },
-    endOfDay(): string {
-      return dayjs(this.daySelected).endOf("date").toISOString();
+//Computed
+const startOfDay = computed(() => dayjs(daySelected.value).startOf("date").toISOString());
+const endOfDay = computed(() => dayjs(daySelected.value).endOf("date").toISOString());
+const periodOfDay = computed(() => {
+  return [
+    {
+      id: "morning",
+      title: t("Morning"),
+      end: dayjs(daySelected.value)
+        .hour(14)
+        .minute(0)
+        .second(0)
+        .millisecond(0),
     },
-    periodOfDay() {
-      return [
-        {
-          id: "morning",
-          title: this.$t("Morning"),
-          end: dayjs(this.daySelected)
-            .hour(14)
-            .minute(0)
-            .second(0)
-            .millisecond(0),
-        },
-        {
-          id: "afternoon",
-          title: this.$t("Afternoon"),
-          end: dayjs(this.daySelected)
-            .hour(19)
-            .minute(0)
-            .second(0)
-            .millisecond(0),
-        },
-        {
-          id: "evening",
-          title: this.$t("Evening"),
-          end: dayjs(this.daySelected).endOf("date"),
-        },
-      ];
+    {
+      id: "afternoon",
+      title: t("Afternoon"),
+      end: dayjs(daySelected.value)
+        .hour(19)
+        .minute(0)
+        .second(0)
+        .millisecond(0),
     },
-    displayArrayDays(){
-      if(this.isPhone && !this.showAllDays){
-        return this.arrayDays.slice(6, 9);
-      }
-      return this.arrayDays;
+    {
+      id: "evening",
+      title: t("Evening"),
+      end: dayjs(daySelected.value).endOf("date"),
     },
-  },
+  ];
+});
+const displayArrayDays = computed(() => {
+  if(isPhone && !showAllDays.value){
+    return arrayDays.value.slice(6, 9);
+  }
+  return arrayDays.value;
+});
 
-  mounted() {
-    this.createArrayDays();
-    this.fetchOccurrences();
-  },
 
-  methods: {
-    scrollToElement(id: string) {
-      const element = document.getElementById(id);
-      if (element) {
-        const yOffset = -110;
-        const y =
-          element.getBoundingClientRect().top + window.scrollY + yOffset;
-        window.scrollTo({ top: y, behavior: "smooth" });
-      }
-    },
-    changePeriodNow() {
-      const now = dayjs();
-      if (!dayjs(this.daySelected).isSame(now, "day")) {
-        this.changeDate(this.arrayDays[7].date);
+onMounted(()=>{
+  createArrayDays();
+  fetchOccurrences();
+})
+
+
+//Mounted
+function scrollToElement(id: string) {
+  const element = document.getElementById(id);
+  if (element) {
+    const yOffset = -110;
+    const y =
+      element.getBoundingClientRect().top + window.scrollY + yOffset;
+    window.scrollTo({ top: y, behavior: "smooth" });
+  }
+}
+function changePeriodNow() {
+  const now = dayjs();
+  if (!dayjs(daySelected.value).isSame(now, "day")) {
+    changeDate(arrayDays.value[7].date);
+  }
+  nextTick(() => {
+    if (!planningLength.value[daySelected.value]) {
+      return;
+    }
+    const arrayOccurrences = Object.values(
+      planning.value[daySelected.value],
+    ).reduce((r, c) => r.concat(c), []);
+    let selectedOccurrence = arrayOccurrences[0];
+    for (const occ of arrayOccurrences) {
+      selectedOccurrence = occ;
+      if (dayjs(occ.endDate).isAfter(now)) {
+        break;
       }
-      this.$nextTick(() => {
-        if (!this.planningLength[this.daySelected]) {
-          return;
-        }
-        const arrayOccurrences = Object.values(
-          this.planning[this.daySelected],
-        ).reduce((r, c) => r.concat(c), []);
-        let selectedOccurrence = arrayOccurrences[0];
-        for (const occ of arrayOccurrences) {
-          selectedOccurrence = occ;
-          if (dayjs(occ.endDate).isAfter(now)) {
-            break;
-          }
-        }
-        this.scrollToElement(
-          "planning-occurrence-" +
-            selectedOccurrence.occurrenceId +
-            "" +
-            selectedOccurrence.liveId,
-        );
-      });
-    },
-    createArrayDays() {
-      for (let index = -7; index < 3; index++) {
-        const dayToAdd = dayjs().add(index, "day");
-        if (0 === index) {
-          this.daySelected = dayToAdd.valueOf();
-        }
-        this.arrayDays.push({
-          title: dayToAdd.format("D/MM"),
-          dayOfWeek: dayToAdd.format("dddd"),
-          date: dayToAdd.valueOf(),
-          iso: dayToAdd.format("MM-DD"),
-        });
+    }
+    scrollToElement(
+      "planning-occurrence-" +
+        selectedOccurrence.occurrenceId +
+        "" +
+        selectedOccurrence.liveId,
+    );
+  });
+}
+function createArrayDays() {
+  for (let index = -7; index < 3; index++) {
+    const dayToAdd = dayjs().add(index, "day");
+    if (0 === index) {
+      daySelected.value = dayToAdd.valueOf();
+    }
+    arrayDays.value.push({
+      title: dayToAdd.format("D/MM"),
+      dayOfWeek: dayToAdd.format("dddd"),
+      date: dayToAdd.valueOf(),
+      iso: dayToAdd.format("MM-DD"),
+    });
+  }
+}
+async function fetchOccurrencesAndLives(): Promise<
+  Array<PlanningOccurrence | PlanningLive>
+> {
+  const params = {
+    canalId: props.radio?.id,
+    from:startOfDay.value,
+    to:endOfDay.value,
+  };
+  let occurrences: Array<PlanningOccurrence | PlanningLive> =
+    await classicApi.fetchData<Array<PlanningOccurrence>>({
+      api: 14,
+      path: "planning/occurrence/list",
+      parameters: params,
+    });
+  const lives: Array<PlanningOccurrence> = await classicApi.fetchData<
+    Array<PlanningOccurrence>
+  >({
+    api: 14,
+    path: "live/list",
+    parameters: params,
+  });
+  if (lives.length) {
+    occurrences = occurrences.concat(lives);
+    occurrences.sort((a, b) => {
+      if (a.startDate > b.startDate) {
+        return 1;
       }
-    },
-    async fetchOccurrencesAndLives(): Promise<
-      Array<PlanningOccurrence | PlanningLive>
-    > {
-      const params = {
-        canalId: this.radio?.id,
-        from: this.startOfDay,
-        to: this.endOfDay,
-      };
-      let occurrences: Array<PlanningOccurrence | PlanningLive> =
-        await classicApi.fetchData<Array<PlanningOccurrence>>({
-          api: 14,
-          path: "planning/occurrence/list",
-          parameters: params,
-        });
-      const lives: Array<PlanningOccurrence> = await classicApi.fetchData<
-        Array<PlanningOccurrence>
-      >({
-        api: 14,
-        path: "live/list",
-        parameters: params,
-      });
-      if (lives.length) {
-        occurrences = occurrences.concat(lives);
-        occurrences.sort((a, b) => {
-          if (a.startDate > b.startDate) {
-            return 1;
-          }
-          return b.startDate > a.startDate ? -1 : 0;
-        });
+      return b.startDate > a.startDate ? -1 : 0;
+    });
+  }
+  return occurrences;
+}
+async function fetchOccurrences(): Promise<void> {
+  if (planning.value[daySelected.value]) {
+    return;
+  }
+  planning.value[daySelected.value] = {
+    morning: [],
+    afternoon: [],
+    evening: [],
+  };
+  planningLength.value[daySelected.value] = 0;
+  loading.value = true;
+  error.value = false;
+  try {
+    const occurrences = await fetchOccurrencesAndLives();
+    let periodDayIndex = 0;
+    for (const occ of occurrences) {
+      if (!occ.podcastId) {
+        continue;
       }
-      return occurrences;
-    },
-    async fetchOccurrences(): Promise<void> {
-      if (this.planning[this.daySelected]) {
-        return;
+      if (
+        !dayjs(occ.startDate).isBefore(periodOfDay.value[periodDayIndex].end)
+      ) {
+        periodDayIndex += 1;
       }
-      this.planning[this.daySelected] = {
-        morning: [],
-        afternoon: [],
-        evening: [],
-      };
-      this.planningLength[this.daySelected] = 0;
-      this.loading = true;
-      this.error = false;
-      try {
-        const occurrences = await this.fetchOccurrencesAndLives();
-        let periodDayIndex = 0;
-        for (const occ of occurrences) {
-          if (!occ.podcastId) {
-            continue;
-          }
-          if (
-            !dayjs(occ.startDate).isBefore(this.periodOfDay[periodDayIndex].end)
-          ) {
-            periodDayIndex += 1;
-          }
-          switch (this.periodOfDay[periodDayIndex].id) {
-            case "morning":
-              this.planning[this.daySelected].morning.push(occ);
-              break;
-            case "afternoon":
-              this.planning[this.daySelected].afternoon.push(occ);
-              break;
-            case "evening":
-              this.planning[this.daySelected].evening.push(occ);
-              break;
-            default:
-              break;
-          }
-          this.planningLength[this.daySelected] += 1;
-        }
-      } catch {
-        this.error = true;
+      switch (periodOfDay.value[periodDayIndex].id) {
+        case "morning":
+          planning.value[daySelected.value].morning.push(occ);
+          break;
+        case "afternoon":
+          planning.value[daySelected.value].afternoon.push(occ);
+          break;
+        case "evening":
+          planning.value[daySelected.value].evening.push(occ);
+          break;
+        default:
+          break;
       }
-      this.loading = false;
-    },
-    changeDate(date: number) {
-      this.daySelected = date;
-      this.fetchOccurrences();
-    },
-    dateDisplay(date: Date): string {
-      return dayjs(date).format("HH:mm");
-    },
-  },
-});
+      planningLength.value[daySelected.value] += 1;
+    }
+  } catch {
+    error.value = true;
+  }
+  loading.value = false;
+}
+function changeDate(date: number) {
+  daySelected.value = date;
+  fetchOccurrences();
+}
+function dateDisplay(date: Date): string {
+  return dayjs(date).format("HH:mm");
+}
 </script>
 <style lang="scss">
 .octopus-app {