From 1ef68f64fcca66d72ca3363c4e06c1921f82b1bf Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Fri, 6 Jan 2023 22:23:32 -0600
Subject: [PATCH] Mroe Composition switches.

---
 .../components/Stations/Media/RenameModal.vue |   4 +-
 .../Stations/Playlists/CloneModal.vue         |   6 +-
 .../components/Stations/Reports/Listeners.vue | 191 +++++++++---------
 .../components/Stations/Reports/Overview.vue  | 106 +++++-----
 .../components/Stations/Reports/Requests.vue  | 186 ++++++++---------
 .../Webhooks/Form/Common/RateLimitFields.vue  | 119 +++++------
 .../Webhooks/Form/Common/SocialPostFields.vue |  33 ++-
 7 files changed, 303 insertions(+), 342 deletions(-)

diff --git a/frontend/vue/components/Stations/Media/RenameModal.vue b/frontend/vue/components/Stations/Media/RenameModal.vue
index 8eb58a4cc..a6cfc1288 100644
--- a/frontend/vue/components/Stations/Media/RenameModal.vue
+++ b/frontend/vue/components/Stations/Media/RenameModal.vue
@@ -8,7 +8,7 @@
         <b-form @submit.prevent="doRename">
             <b-wrapped-form-group
                 id="new_directory_name"
-                :field="v$.form.newPath"
+                :field="v$.newPath"
                 autofocus
             >
                 <template #label>
@@ -24,7 +24,7 @@
                 {{ $gettext('Close') }}
             </b-button>
             <b-button
-                :variant="(v$.form.$invalid) ? 'danger' : 'primary'"
+                :variant="(v$.$invalid) ? 'danger' : 'primary'"
                 @click="doRename"
             >
                 {{ $gettext('Rename') }}
diff --git a/frontend/vue/components/Stations/Playlists/CloneModal.vue b/frontend/vue/components/Stations/Playlists/CloneModal.vue
index 11be6d400..f35205d74 100644
--- a/frontend/vue/components/Stations/Playlists/CloneModal.vue
+++ b/frontend/vue/components/Stations/Playlists/CloneModal.vue
@@ -3,7 +3,7 @@
         id="clone_modal"
         ref="$modal"
         :title="$gettext('Duplicate Playlist')"
-        :disable-save-button="v$.form.$invalid"
+        :disable-save-button="v$.$invalid"
         @submit="doSubmit"
         @hidden="clearContents"
     >
@@ -11,7 +11,7 @@
             <b-wrapped-form-group
                 id="form_edit_name"
                 class="col-md-12"
-                :field="v$.form.name"
+                :field="v$.name"
             >
                 <template #label>
                     {{ $gettext('New Playlist Name') }}
@@ -21,7 +21,7 @@
             <b-wrapped-form-group
                 id="form_edit_clone"
                 class="col-md-12"
-                :field="v$.form.clone"
+                :field="v$.clone"
             >
                 <template #label>
                     {{ $gettext('Customize Copy') }}
diff --git a/frontend/vue/components/Stations/Reports/Listeners.vue b/frontend/vue/components/Stations/Reports/Listeners.vue
index 3f5b4739c..9f1c78b21 100644
--- a/frontend/vue/components/Stations/Reports/Listeners.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners.vue
@@ -86,9 +86,6 @@
                         :responsive="false"
                         :items="listeners"
                     >
-                        <template #cell(ip)="row">
-                            {{ row.item.ip }}
-                        </template>
                         <template #cell(time)="row">
                             {{ formatTime(row.item.connected_time) }}
                         </template>
@@ -148,117 +145,109 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import StationReportsListenersMap from "./Listeners/Map";
 import Icon from "~/components/Common/Icon";
 import formatTime from "~/functions/formatTime";
 import DataTable from "~/components/Common/DataTable";
 import DateRangeDropdown from "~/components/Common/DateRangeDropdown";
 import {DateTime} from 'luxon';
+import {computed, onMounted, ref, shallowRef} from "vue";
+import {useTranslate} from "~/vendor/gettext";
+import {useNotify} from "~/vendor/bootstrapVue";
+import {useAxios} from "~/vendor/axios";
 
-/* TODO Options API */
+const props = defineProps({
+  apiUrl: {
+    type: String,
+    required: true
+  },
+  attribution: {
+    type: String,
+    required: true
+  },
+  stationTimeZone: {
+    type: String,
+    required: true
+  },
+});
 
-export default {
-    name: 'StationReportsListeners',
-    components: {DateRangeDropdown, DataTable, StationReportsListenersMap, Icon},
-    props: {
-        apiUrl: {
-            type: String,
-            required: true
-        },
-        attribution: {
-            type: String,
-            required: true
-        },
-        stationTimeZone: {
-            type: String,
-            required: true
-        },
-    },
-    data() {
-        const nowTz = DateTime.now().setZone(this.stationTimeZone);
+const isLive = ref(true);
+const listeners = shallowRef([]);
 
-        return {
-            isLive: true,
-            listeners: [],
-            dateRange: {
-                startDate: nowTz.minus({days: 1}).toJSDate(),
-                endDate: nowTz.toJSDate()
-            },
-            fields: [
-                {key: 'ip', label: this.$gettext('IP'), sortable: false},
-                {key: 'time', label: this.$gettext('Time'), sortable: false},
-                {key: 'time_sec', label: this.$gettext('Time (sec)'), sortable: false},
-                {key: 'user_agent', isRowHeader: true, label: this.$gettext('User Agent'), sortable: false},
-                {key: 'stream', label: this.$gettext('Stream'), sortable: false},
-                {key: 'location', label: this.$gettext('Location'), sortable: false}
-            ]
-        };
-    },
-    computed: {
-        nowTz() {
-            return DateTime.now().setZone(this.stationTimeZone);
-        },
-        minDate() {
-            return this.nowTz.minus({years: 5}).toJSDate();
-        },
-        maxDate() {
-            return this.nowTz.plus({days: 5}).toJSDate();
-        },
-        exportUrl() {
-            let exportUrl = new URL(this.apiUrl, document.location);
-            let exportUrlParams = exportUrl.searchParams;
-            exportUrlParams.set('format', 'csv');
+const nowTz = DateTime.now().setZone(props.stationTimeZone);
 
-            if (!this.isLive) {
-                exportUrlParams.set('start', DateTime.fromJSDate(this.dateRange.startDate).toISO());
-                exportUrlParams.set('end', DateTime.fromJSDate(this.dateRange.endDate).toISO());
-            }
+const minDate = nowTz.minus({years: 5}).toJSDate();
+const maxDate = nowTz.plus({days: 5}).toJSDate();
 
-            return exportUrl.toString();
-        },
-        totalListenerHours() {
-            let tlh_seconds = 0;
-            this.listeners.forEach(function (listener) {
-                tlh_seconds += listener.connected_time;
-            });
+const dateRange = ref({
+  startDate: nowTz.minus({days: 1}).toJSDate(),
+  endDate: nowTz.toJSDate()
+});
 
-            let tlh_hours = tlh_seconds / 3600;
-            return Math.round((tlh_hours + 0.00001) * 100) / 100;
-        }
-    },
-    mounted() {
-        this.updateListeners();
-    },
-    methods: {
-        setIsLive(newValue) {
-            this.isLive = newValue;
-            this.updateListeners();
-        },
-        formatTime(time) {
-            return formatTime(time);
-        },
-        updateListeners() {
-            let params = {};
-            if (!this.isLive) {
-                params.start = DateTime.fromJSDate(this.dateRange.startDate).toISO();
-                params.end = DateTime.fromJSDate(this.dateRange.endDate).toISO();
-            }
+const {$gettext} = useTranslate();
 
-            this.$wrapWithLoading(
-                this.axios.get(this.apiUrl, {params: params})
-            ).then((resp) => {
-                this.listeners = resp.data;
+const fields = [
+  {key: 'ip', label: $gettext('IP'), sortable: false},
+  {key: 'time', label: $gettext('Time'), sortable: false},
+  {key: 'time_sec', label: $gettext('Time (sec)'), sortable: false},
+  {key: 'user_agent', isRowHeader: true, label: $gettext('User Agent'), sortable: false},
+  {key: 'stream', label: $gettext('Stream'), sortable: false},
+  {key: 'location', label: $gettext('Location'), sortable: false}
+];
 
-                if (this.isLive) {
-                    setTimeout(this.updateListeners, (!document.hidden) ? 15000 : 30000);
-                }
-            }).catch((error) => {
-                if (this.isLive && (!error.response || error.response.data.code !== 403)) {
-                    setTimeout(this.updateListeners, (!document.hidden) ? 30000 : 120000);
-                }
-            });
-        }
+const exportUrl = computed(() => {
+  let exportUrl = new URL(props.apiUrl, document.location);
+  let exportUrlParams = exportUrl.searchParams;
+  exportUrlParams.set('format', 'csv');
+
+  if (!isLive.value) {
+    exportUrlParams.set('start', DateTime.fromJSDate(dateRange.value.startDate).toISO());
+    exportUrlParams.set('end', DateTime.fromJSDate(dateRange.value.endDate).toISO());
+  }
+
+  return exportUrl.toString();
+});
+
+const totalListenerHours = computed(() => {
+  let tlh_seconds = 0;
+  listeners.value.forEach(function (listener) {
+    tlh_seconds += listener.connected_time;
+  });
+
+  let tlh_hours = tlh_seconds / 3600;
+  return Math.round((tlh_hours + 0.00001) * 100) / 100;
+});
+
+const {wrapWithLoading} = useNotify();
+const {axios} = useAxios();
+
+const updateListeners = () => {
+  let params = {};
+  if (!isLive.value) {
+    params.start = DateTime.fromJSDate(dateRange.value.startDate).toISO();
+    params.end = DateTime.fromJSDate(dateRange.value.endDate).toISO();
+  }
+
+  wrapWithLoading(
+      axios.get(props.apiUrl, {params: params})
+  ).then((resp) => {
+    listeners.value = resp.data;
+
+    if (isLive.value) {
+      setTimeout(updateListeners, (!document.hidden) ? 15000 : 30000);
     }
-}
+  }).catch((error) => {
+    if (isLive.value && (!error.response || error.response.data.code !== 403)) {
+      setTimeout(updateListeners, (!document.hidden) ? 30000 : 120000);
+    }
+  });
+};
+
+onMounted(updateListeners);
+
+const setIsLive = (newValue) => {
+  isLive.value = newValue;
+  updateListeners();
+};
 </script>
diff --git a/frontend/vue/components/Stations/Reports/Overview.vue b/frontend/vue/components/Stations/Reports/Overview.vue
index c1f907d30..fa24f7852 100644
--- a/frontend/vue/components/Stations/Reports/Overview.vue
+++ b/frontend/vue/components/Stations/Reports/Overview.vue
@@ -104,7 +104,7 @@
     </section>
 </template>
 
-<script>
+<script setup>
 import {DateTime} from "luxon";
 import DateRangeDropdown from "~/components/Common/DateRangeDropdown";
 import ListenersByTimePeriodTab from "./Overview/ListenersByTimePeriodTab";
@@ -114,67 +114,51 @@ import CountriesTab from "./Overview/CountriesTab";
 import StreamsTab from "./Overview/StreamsTab";
 import ClientsTab from "./Overview/ClientsTab";
 import ListeningTimeTab from "~/components/Stations/Reports/Overview/ListeningTimeTab";
+import {ref} from "vue";
 
-/* TODO Options API */
+const props = defineProps({
+    stationTimeZone: {
+        type: String,
+        required: true
+    },
+    showFullAnalytics: {
+        type: Boolean,
+        required: true
+    },
+    listenersByTimePeriodUrl: {
+        type: String,
+        required: true
+    },
+    bestAndWorstUrl: {
+        type: String,
+        required: true
+    },
+    byStreamUrl: {
+        type: String,
+        required: true
+    },
+    byClientUrl: {
+        type: String,
+        required: true
+    },
+    byBrowserUrl: {
+        type: String,
+        required: true
+    },
+    byCountryUrl: {
+        type: String,
+        required: true
+    },
+    listeningTimeUrl: {
+        type: String,
+        required: true
+    }
+});
 
-export default {
-    components: {
-        ListeningTimeTab,
-        ClientsTab,
-        StreamsTab,
-        CountriesTab,
-        BrowsersTab,
-        BestAndWorstTab,
-        ListenersByTimePeriodTab,
-        DateRangeDropdown
-    },
-    props: {
-        stationTimeZone: {
-            type: String,
-            required: true
-        },
-        showFullAnalytics: {
-            type: Boolean,
-            required: true
-        },
-        listenersByTimePeriodUrl: {
-            type: String,
-            required: true
-        },
-        bestAndWorstUrl: {
-            type: String,
-            required: true
-        },
-        byStreamUrl: {
-            type: String,
-            required: true
-        },
-        byClientUrl: {
-            type: String,
-            required: true
-        },
-        byBrowserUrl: {
-            type: String,
-            required: true
-        },
-        byCountryUrl: {
-            type: String,
-            required: true
-        },
-        listeningTimeUrl: {
-            type: String,
-            required: true
-        }
-    },
-    data() {
-        let nowTz = DateTime.now().setZone(this.stationTimeZone);
+let nowTz = DateTime.now().setZone(props.stationTimeZone);
 
-        return {
-            dateRange: {
-                startDate: nowTz.minus({days: 13}).toJSDate(),
-                endDate: nowTz.toJSDate(),
-            },
-        };
-    },
-};
+const dateRange = ref({
+    startDate: nowTz.minus({days: 13}).toJSDate(),
+    endDate: nowTz.toJSDate(),
+});
 </script>
diff --git a/frontend/vue/components/Stations/Reports/Requests.vue b/frontend/vue/components/Stations/Reports/Requests.vue
index bfc881b80..791f225cb 100644
--- a/frontend/vue/components/Stations/Reports/Requests.vue
+++ b/frontend/vue/components/Stations/Reports/Requests.vue
@@ -77,104 +77,108 @@
     </b-card>
 </template>
 
-<script>
+<script setup>
 import DataTable from '~/components/Common/DataTable';
 import Icon from "~/components/Common/Icon";
 import {DateTime} from 'luxon';
 import {useAzuraCast} from "~/vendor/azuracast";
+import {computed, ref} from "vue";
+import {useTranslate} from "~/vendor/gettext";
+import {useSweetAlert} from "~/vendor/sweetalert";
+import {useNotify} from "~/vendor/bootstrapVue";
 
-/* TODO Options API */
-
-export default {
-    name: 'StationRequests',
-    components: {DataTable, Icon},
-    props: {
-        listUrl: {
-            type: String,
-            required: true
-        },
-        clearUrl: {
-            type: String,
-            required: true
-        },
-        stationTimeZone: {
-            type: String,
-            required: true
-        }
+const props = defineProps({
+    listUrl: {
+        type: String,
+        required: true
     },
-    data() {
-        return {
-            activeType: 'pending',
-            fields: [
-                {key: 'timestamp', label: this.$gettext('Date Requested'), sortable: false},
-                {key: 'played_at', label: this.$gettext('Date Played'), sortable: false},
-                {key: 'song_title', isRowHeader: true, label: this.$gettext('Song Title'), sortable: false},
-                {key: 'ip', label: this.$gettext('Requester IP'), sortable: false},
-                {key: 'actions', label: this.$gettext('Actions'), sortable: false}
-            ]
-        }
+    clearUrl: {
+        type: String,
+        required: true
     },
-    computed: {
-        tabs() {
-            return [
-                {
-                    type: 'pending',
-                    title: this.$gettext('Pending Requests')
-                },
-                {
-                    type: 'history',
-                    title: this.$gettext('Request History')
-                }
-            ]
-        },
-        listUrlForType() {
-            return this.listUrl + '?type=' + this.activeType;
-        }
-    },
-    methods: {
-        setType(type) {
-            this.activeType = type;
-            this.relist();
-        },
-        relist() {
-            this.$refs.datatable.refresh();
-        },
-        formatTime(time) {
-            const {timeConfig} = useAzuraCast();
-
-            return DateTime.fromSeconds(time).setZone(this.stationTimeZone).toLocaleString(
-                {...DateTime.DATETIME_MED, ...timeConfig}
-            );
-        },
-        doDelete(url) {
-            this.$confirmDelete({
-                title: this.$gettext('Delete Request?'),
-            }).then((result) => {
-                if (result.value) {
-                    this.$wrapWithLoading(
-                        this.axios.delete(url)
-                    ).then((resp) => {
-                        this.$notifySuccess(resp.data.message);
-                        this.relist();
-                    });
-                }
-            });
-        },
-        doClear() {
-            this.$confirmDelete({
-                title: this.$gettext('Clear All Pending Requests?'),
-                confirmButtonText: this.$gettext('Clear'),
-            }).then((result) => {
-                if (result.value) {
-                    this.$wrapWithLoading(
-                        this.axios.post(this.clearUrl)
-                    ).then((resp) => {
-                        this.$notifySuccess(resp.data.message);
-                        this.relist();
-                    });
-                }
-            });
-        }
+    stationTimeZone: {
+        type: String,
+        required: true
     }
+});
+
+const activeType = ref('pending');
+
+const {$gettext} = useTranslate();
+
+const fields = [
+    {key: 'timestamp', label: $gettext('Date Requested'), sortable: false},
+    {key: 'played_at', label: $gettext('Date Played'), sortable: false},
+    {key: 'song_title', isRowHeader: true, label: $gettext('Song Title'), sortable: false},
+    {key: 'ip', label: $gettext('Requester IP'), sortable: false},
+    {key: 'actions', label: $gettext('Actions'), sortable: false}
+];
+
+const tabs = [
+    {
+        type: 'pending',
+        title: $gettext('Pending Requests')
+    },
+    {
+        type: 'history',
+        title: $gettext('Request History')
+    }
+];
+
+const listUrlForType = computed(() => {
+    return props.listUrl + '?type=' + activeType.value;
+});
+
+const $datatable = ref(); // Template Ref
+
+const relist = () => {
+    $datatable.value.refresh();
+};
+
+const setType = (type) => {
+    activeType.value = type;
+    relist();
+};
+
+const formatTime = (time) => {
+    const {timeConfig} = useAzuraCast();
+
+    return DateTime.fromSeconds(time).setZone(props.stationTimeZone).toLocaleString(
+        {...DateTime.DATETIME_MED, ...timeConfig}
+    );
+};
+
+const {confirmDelete} = useSweetAlert();
+const {wrapWithLoading, notifySuccess} = useNotify();
+
+const doDelete = (url) => {
+    confirmDelete({
+        title: $gettext('Delete Request?'),
+    }).then((result) => {
+        if (result.value) {
+            wrapWithLoading(
+                axios.delete(url)
+            ).then((resp) => {
+                notifySuccess(resp.data.message);
+                relist();
+            });
+        }
+    });
+};
+
+const doClear = () => {
+    confirmDelete({
+        title: $gettext('Clear All Pending Requests?'),
+        confirmButtonText: $gettext('Clear'),
+    }).then((result) => {
+        if (result.value) {
+            wrapWithLoading(
+                axios.post(props.clearUrl)
+            ).then((resp) => {
+                notifySuccess(resp.data.message);
+                relist();
+            });
+        }
+    });
 };
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue b/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue
index 8d2a87d24..ba8d42609 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Common/RateLimitFields.vue
@@ -17,71 +17,62 @@
     </b-wrapped-form-group>
 </template>
 
-<script>
+<script setup>
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
+import {useTranslate} from "~/vendor/gettext";
 
-/* TODO Options API */
-
-export default {
-    name: 'CommonRateLimitFields',
-    components: {BWrappedFormGroup},
-    props: {
-        form: {
-            type: Object,
-            required: true
-        }
-    },
-    computed: {
-        langSeconds() {
-            return this.$gettext('%{ seconds } seconds');
-        },
-        langMinutes() {
-            return this.$gettext('%{ minutes } minutes');
-        },
-        rateLimitOptions() {
-            return [
-                {
-                    text: this.$gettext('No Limit'),
-                    value: 0,
-                },
-                {
-                    text: this.$gettextInterpolate(this.langSeconds, {seconds: 15}),
-                    value: 15,
-                },
-                {
-                    text: this.$gettextInterpolate(this.langSeconds, {seconds: 30}),
-                    value: 30,
-                },
-                {
-                    text: this.$gettextInterpolate(this.langSeconds, {seconds: 60}),
-                    value: 60,
-                },
-                {
-                    text: this.$gettextInterpolate(this.langMinutes, {minutes: 2}),
-                    value: 120,
-                },
-                {
-                    text: this.$gettextInterpolate(this.langMinutes, {minutes: 5}),
-                    value: 300,
-                },
-                {
-                    text: this.$gettextInterpolate(this.langMinutes, {minutes: 10}),
-                    value: 600,
-                },
-                {
-                    text: this.$gettextInterpolate(this.langMinutes, {minutes: 15}),
-                    value: 900,
-                },
-                {
-                    text: this.$gettextInterpolate(this.langMinutes, {minutes: 30}),
-                    value: 1800,
-                },
-                {
-                    text: this.$gettextInterpolate(this.langMinutes, {minutes: 60}),
-                    value: 3600,
-                }
-            ];
-        },
+const props = defineProps({
+    form: {
+        type: Object,
+        required: true
     }
-}
+});
+
+const {$gettext, $gettextInterpolate} = useTranslate();
+
+const langSeconds = $gettext('%{ seconds } seconds');
+const langMinutes = $gettext('%{ minutes } minutes');
+
+const rateLimitOptions = [
+    {
+        text: $gettext('No Limit'),
+        value: 0,
+    },
+    {
+        text: $gettextInterpolate(langSeconds, {seconds: 15}),
+        value: 15,
+    },
+    {
+        text: $gettextInterpolate(langSeconds, {seconds: 30}),
+        value: 30,
+    },
+    {
+        text: this.$gettextInterpolate(this.langSeconds, {seconds: 60}),
+        value: 60,
+    },
+    {
+        text: $gettextInterpolate(langMinutes, {minutes: 2}),
+        value: 120,
+    },
+    {
+        text: $gettextInterpolate(langMinutes, {minutes: 5}),
+        value: 300,
+    },
+    {
+        text: $gettextInterpolate(langMinutes, {minutes: 10}),
+        value: 600,
+    },
+    {
+        text: $gettextInterpolate(langMinutes, {minutes: 15}),
+        value: 900,
+    },
+    {
+        text: $gettextInterpolate(langMinutes, {minutes: 30}),
+        value: 1800,
+    },
+    {
+        text: $gettextInterpolate(langMinutes, {minutes: 60}),
+        value: 3600,
+    }
+];
 </script>
diff --git a/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue b/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue
index a977487a3..2133dfb4e 100644
--- a/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue
+++ b/frontend/vue/components/Stations/Webhooks/Form/Common/SocialPostFields.vue
@@ -81,30 +81,23 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
 import CommonFormattingInfo from "./FormattingInfo";
 import {includes} from 'lodash';
 
-/* TODO Options API */
-
-export default {
-    name: 'CommonSocialPostFields',
-    components: {CommonFormattingInfo, BWrappedFormGroup},
-    props: {
-        form: {
-            type: Object,
-            required: true
-        },
-        nowPlayingUrl: {
-            type: String,
-            required: true
-        }
+const props = defineProps({
+    form: {
+        type: Object,
+        required: true
     },
-    methods: {
-        hasTrigger(trigger) {
-            return includes(this.form.triggers.$model, trigger);
-        }
+    nowPlayingUrl: {
+        type: String,
+        required: true
     }
-}
+});
+
+const hasTrigger = (trigger) => {
+    return includes(props.form.triggers.$model, trigger);
+};
 </script>