From 7044d123773dcb87b4f8d1761cc8233e98dc4854 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Tue, 13 Dec 2022 01:51:21 -0600
Subject: [PATCH] More Vue modernization.

---
 .../Admin/Backups/LastOutputModal.vue         |  34 +++--
 .../Admin/Index/CpuStatsHelpModal.vue         |  76 ++++++-----
 .../Admin/Index/MemoryStatsHelpModal.vue      |  55 ++++----
 .../vue/components/Admin/Logs/StationLogs.vue |   3 -
 frontend/vue/components/Common/Avatar.vue     |  42 +++---
 frontend/vue/components/Common/Icon.vue       |  43 +++---
 frontend/vue/components/Common/InfoCard.vue   |  10 +-
 .../Common/InvisibleSubmitButton.vue          |   6 -
 frontend/vue/components/Common/PlayButton.vue | 122 +++++++++---------
 frontend/vue/vendor/sweetalert.js             |  41 +++---
 10 files changed, 217 insertions(+), 215 deletions(-)
 delete mode 100644 frontend/vue/components/Admin/Logs/StationLogs.vue

diff --git a/frontend/vue/components/Admin/Backups/LastOutputModal.vue b/frontend/vue/components/Admin/Backups/LastOutputModal.vue
index e887ba23f..bcbb3009e 100644
--- a/frontend/vue/components/Admin/Backups/LastOutputModal.vue
+++ b/frontend/vue/components/Admin/Backups/LastOutputModal.vue
@@ -1,25 +1,23 @@
 <template>
-    <b-modal size="md" id="log_view_modal" ref="modal" :title="langTitle">
+    <b-modal size="md" id="log_view_modal" ref="modal" :title="$gettext('Log Viewer')">
         <pre id="modal-log-view-contents" class="form-control log-viewer"
              style="height: 300px; overflow-y: auto;">{{ lastOutput }}</pre>
     </b-modal>
 </template>
 
-<script>
-export default {
-    name: 'AdminBackupsLastOutputModal',
-    props: {
-        lastOutput: String,
-    },
-    computed: {
-        langTitle() {
-            return this.$gettext('Log Viewer');
-        }
-    },
-    methods: {
-        show() {
-            this.$refs.modal.show();
-        }
-    }
-}
+<script setup>
+import {get, templateRef} from "@vueuse/core";
+
+const props = defineProps({
+    lastOutput: String,
+});
+
+const $modal = templateRef('modal');
+const show = () => {
+    get($modal).show();
+};
+
+defineExpose({
+    show
+})
 </script>
diff --git a/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue b/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue
index 4ecb78bd7..26a89c3b2 100644
--- a/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue
+++ b/frontend/vue/components/Admin/Index/CpuStatsHelpModal.vue
@@ -1,79 +1,85 @@
 <template>
-    <b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="langTitle">
+    <b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="$gettext('CPU Stats Help')">
         <div class="mb-2">
             <h6>
                 <b-badge pill variant="danger">&nbsp;&nbsp;</b-badge>&nbsp;
-                <translate key="lang_steal">Steal (St)</translate>
-                :
-                <translate
-                    key="lang_steal_1">Time stolen by other virtual machines on the same physical server.</translate>
+                {{ $gettext('Steal (St)') }}:
+                {{ $gettext('Time stolen by other virtual machines on the same physical server.') }}
             </h6>
             <div class="ml-4">
                 <p>
-                    <translate key="lang_steal_2">Most hosting providers will put more Virtual Machines (VPSes) on a server than the hardware can handle when each VM is running at full CPU load. This is called over-provisioning, which can lead to other VMs on the server "stealing" CPU time from your VM and vice-versa.</translate>
+                    {{
+                        $gettext('Most hosting providers will put more Virtual Machines (VPSes) on a server than the hardware can handle when each VM is running at full CPU load. This is called over-provisioning, which can lead to other VMs on the server "stealing" CPU time from your VM and vice-versa.')
+                    }}
                 </p>
                 <p>
-                    <translate key="lang_steal_3">To alleviate this potential problem with shared CPU resources, hosts assign "credits" to a VPS which are used up according to an algorithm based on the CPU load as well as the time over which the CPU load is generated. If your VM's assigned credit is used up, they will take CPU time from your VM and assign it to other VMs on the machine. This is seen as the "Steal" or "St" value.</translate>
+                    {{
+                        $gettext('To alleviate this potential problem with shared CPU resources, hosts assign "credits" to a VPS which are used up according to an algorithm based on the CPU load as well as the time over which the CPU load is generated. If your VM\'s assigned credit is used up, they will take CPU time from your VM and assign it to other VMs on the machine. This is seen as the "Steal" or "St" value.')
+                    }}
                 </p>
                 <p>
-                    <translate key="lang_steal_4">Audio transcoding applications like Liquidsoap use a consistent amount of CPU over time, which gradually drains this available credit. If you regularly see stolen CPU time, you should consider migrating to a VM that has CPU resources dedicated to your instance.</translate>
+                    {{
+                        $gettext('Audio transcoding applications like Liquidsoap use a consistent amount of CPU over time, which gradually drains this available credit. If you regularly see stolen CPU time, you should consider migrating to a VM that has CPU resources dedicated to your instance.')
+                    }}
                 </p>
             </div>
         </div>
         <div class="mb-2">
             <h6>
                 <b-badge pill variant="warning">&nbsp;&nbsp;</b-badge>&nbsp;
-                <translate key="lang_wait">Wait (Wa)</translate>
-                :
-                <translate key="lang_wait_1">Time spent waiting for disk I/O to be completed.</translate>
+                {{ $gettext('Wait (Wa)') }}:
+                {{ $gettext('Time spent waiting for disk I/O to be completed.') }}
             </h6>
             <div class="ml-4">
                 <p>
-                    <translate key="lang_wait_2">The I/O Wait is the percentage of time that the CPU is waiting for disk access before it can continue the work that depends on the result of this.</translate>
+                    {{
+                        $gettext('The I/O Wait is the percentage of time that the CPU is waiting for disk access before it can continue the work that depends on the result of this.')
+                    }}
                 </p>
                 <p>
-                    <translate key="lang_wait_3">High I/O Wait can indicate a bottleneck with the server's hard disk, a potentially failing hard disk, or heavy load on the hard disk.</translate>
+                    {{
+                        $gettext('High I/O Wait can indicate a bottleneck with the server\'s hard disk, a potentially failing hard disk, or heavy load on the hard disk.')
+                    }}
                 </p>
                 <p>
-                    <translate key="lang_wait_4">One important note on I/O Wait is that it can indicate a bottleneck or problem but also may be completely meaningless, depending on the workload and general available resources. A constantly high I/O Wait should prompt further investigation with more sophisticated tools.</translate>
+                    {{
+                        $gettext('One important note on I/O Wait is that it can indicate a bottleneck or problem but also may be completely meaningless, depending on the workload and general available resources. A constantly high I/O Wait should prompt further investigation with more sophisticated tools.')
+                    }}
                 </p>
             </div>
         </div>
         <div class="mb-1">
             <h6>
                 <b-badge pill variant="primary">&nbsp;&nbsp;</b-badge>&nbsp;
-                <translate key="lang_use">Use (Us)</translate>
-                :
-                <translate key="lang_use_1">The current CPU usage including I/O Wait and Steal.</translate>
+                {{ $gettext('Use (Us)') }}:
+                {{ $gettext('The current CPU usage including I/O Wait and Steal.') }}
             </h6>
         </div>
 
         <template #modal-footer>
             <slot name="modal-footer">
                 <b-button variant="default" type="button" @click="close">
-                    <translate key="lang_btn_close">Close</translate>
+                    {{ $gettext('Close') }}
                 </b-button>
             </slot>
         </template>
     </b-modal>
 </template>
 
-<script>
+<script setup>
+import {get, templateRef} from "@vueuse/core";
 
-export default {
-    name: 'CpuStatsHelpModal',
-    computed: {
-        langTitle() {
-            return this.$gettext('CPU Stats Help');
-        }
-    },
-    methods: {
-        create() {
-            this.$refs.modal.show();
-        },
-        close() {
-            this.$refs.modal.hide();
-        }
-    }
-};
+const $modal = templateRef('modal');
+
+const create = () => {
+    get($modal).show();
+}
+const close = () => {
+    get($modal).hide();
+}
+
+defineExpose({
+    create,
+    close
+});
 </script>
diff --git a/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue b/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue
index 178e141e7..aaf78cc6a 100644
--- a/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue
+++ b/frontend/vue/components/Admin/Index/MemoryStatsHelpModal.vue
@@ -1,19 +1,21 @@
 <template>
-    <b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="langTitle">
+    <b-modal size="lg" centered id="cpu_stats_help_modal" ref="modal" :title="$gettext('Memory Stats Help')">
         <div class="mb-2">
             <h6>
                 <b-badge pill variant="danger">&nbsp;&nbsp;</b-badge>&nbsp;
-                <translate key="lang_cached">Cached</translate>
-                :
-                <translate
-                    key="lang_cached_1">The amount of memory Linux is using for disk caching.</translate>
+                {{ $gettext('Cached') }}:
+                {{ $gettext('The amount of memory Linux is using for disk caching.') }}
             </h6>
             <div class="ml-4">
                 <p>
-                    <translate key="lang_cached_2">This can make it look like your memory is low while it actually is not. Some monitoring solutions/panels include cached memory in their used memory statistics without indicating this.</translate>
+                    {{
+                        $gettext('This can make it look like your memory is low while it actually is not. Some monitoring solutions/panels include cached memory in their used memory statistics without indicating this.')
+                    }}
                 </p>
                 <p>
-                    <translate key="lang_cached_3">Disk caching makes a system much faster and more responsive in general. It does not take memory away from applications in any way since it will automatically be released by the operating system when needed.</translate>
+                    {{
+                        $gettext('Disk caching makes a system much faster and more responsive in general. It does not take memory away from applications in any way since it will automatically be released by the operating system when needed.')
+                    }}
                 </p>
             </div>
         </div>
@@ -21,38 +23,35 @@
         <div class="mb-2">
             <h6>
                 <b-badge pill variant="primary">&nbsp;&nbsp;</b-badge>&nbsp;
-                <translate key="lang_used">Used</translate>
-                :
-                <translate key="lang_used_1">The current Memory usage excluding cached memory.</translate>
+                {{ $gettext('Used') }}:
+                {{ $gettext('The current Memory usage excluding cached memory.') }}
             </h6>
         </div>
 
         <template #modal-footer>
             <slot name="modal-footer">
                 <b-button variant="default" type="button" @click="close">
-                    <translate key="lang_btn_close">Close</translate>
+                    {{ $gettext('Close') }}
                 </b-button>
             </slot>
         </template>
     </b-modal>
 </template>
 
-<script>
+<script setup>
+import {get, templateRef} from "@vueuse/core";
 
-export default {
-    name: 'MemoryStatsHelpModal',
-    computed: {
-        langTitle() {
-            return this.$gettext('Memory Stats Help');
-        }
-    },
-    methods: {
-        create() {
-            this.$refs.modal.show();
-        },
-        close() {
-            this.$refs.modal.hide();
-        }
-    }
-};
+const $modal = templateRef('modal');
+
+const create = () => {
+    get($modal).show();
+}
+const close = () => {
+    get($modal).hide();
+}
+
+defineExpose({
+    create,
+    close
+});
 </script>
diff --git a/frontend/vue/components/Admin/Logs/StationLogs.vue b/frontend/vue/components/Admin/Logs/StationLogs.vue
deleted file mode 100644
index 00d686027..000000000
--- a/frontend/vue/components/Admin/Logs/StationLogs.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-
-</template>
diff --git a/frontend/vue/components/Common/Avatar.vue b/frontend/vue/components/Common/Avatar.vue
index 6d826b8d8..00d7b800c 100644
--- a/frontend/vue/components/Common/Avatar.vue
+++ b/frontend/vue/components/Common/Avatar.vue
@@ -5,24 +5,28 @@
     </a>
 </template>
 
-<script>
-export default {
-    name: 'Avatar',
-    props: {
-        url: String,
-        service: String,
-        serviceUrl: String,
-        width: {
-            type: Number,
-            default: 64
-        }
-    },
-    computed: {
-        langAvatar() {
-            let translated = this.$gettext('Avatars are retrieved based on your e-mail address from the %{service} service. Click to manage your %{service} settings.');
-            return this.$gettextInterpolate(translated, {service: this.service});
-        }
-    }
-};
+<script setup>
+import gettext from "~/vendor/gettext";
+import {computed} from "vue";
 
+const props = defineProps({
+    url: String,
+    service: String,
+    serviceUrl: String,
+    width: {
+        type: Number,
+        default: 64
+    }
+});
+
+const {$gettext} = gettext;
+
+const langAvatar = computed(() => {
+    return $gettext(
+        'Avatars are retrieved based on your e-mail address from the %{service} service. Click to manage your %{service} settings.',
+        {
+            service: props.service
+        }
+    );
+});
 </script>
diff --git a/frontend/vue/components/Common/Icon.vue b/frontend/vue/components/Common/Icon.vue
index 5a344cbe4..f5171438c 100644
--- a/frontend/vue/components/Common/Icon.vue
+++ b/frontend/vue/components/Common/Icon.vue
@@ -1,30 +1,25 @@
 <template>
-    <i :class="iconClass" aria-hidden="true">{{ iconContent }}</i>
+    <i :class="iconClass" aria-hidden="true">{{ icon }}</i>
 </template>
 
-<script>
-export default {
-    name: 'Icon',
-    props: {
-        type: {
-            type: String,
-            default: 'md'
-        },
-        icon: {
-            type: String,
-            required: true
-        }
+<script setup>
+import {computed} from "vue";
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: 'md'
     },
-    computed: {
-        iconClass () {
-            if (this.type === 'md') {
-                return ['material-icons'];
-            }
-            return null;
-        },
-        iconContent () {
-            return this.icon;
-        }
+    icon: {
+        type: String,
+        required: true
     }
-};
+});
+
+const iconClass = computed(() => {
+    if (props.type === 'md') {
+        return ['material-icons'];
+    }
+    return null;
+});
 </script>
diff --git a/frontend/vue/components/Common/InfoCard.vue b/frontend/vue/components/Common/InfoCard.vue
index c1b4e8270..ec18fed39 100644
--- a/frontend/vue/components/Common/InfoCard.vue
+++ b/frontend/vue/components/Common/InfoCard.vue
@@ -9,11 +9,5 @@
     </div>
 </template>
 
-<script>
-import Icon from './Icon';
-
-export default {
-    name: 'InfoCard',
-    components: { Icon }
-};
-</script>
+<script setup>
+import Icon from './Icon';</script>
diff --git a/frontend/vue/components/Common/InvisibleSubmitButton.vue b/frontend/vue/components/Common/InvisibleSubmitButton.vue
index 1e06a5e47..12e05d025 100644
--- a/frontend/vue/components/Common/InvisibleSubmitButton.vue
+++ b/frontend/vue/components/Common/InvisibleSubmitButton.vue
@@ -1,9 +1,3 @@
 <template>
     <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" aria-hidden="true"/>
 </template>
-
-<script>
-export default {
-    name: 'InvisibleSubmitButton'
-}
-</script>
diff --git a/frontend/vue/components/Common/PlayButton.vue b/frontend/vue/components/Common/PlayButton.vue
index 5388cd66d..f6356c6b2 100644
--- a/frontend/vue/components/Common/PlayButton.vue
+++ b/frontend/vue/components/Common/PlayButton.vue
@@ -1,71 +1,75 @@
 <template>
     <a href="#" @click.prevent="toggle" :title="langTitle">
-        <icon :class="iconClass" :icon="icon"></icon>
+        <icon :class="iconClass" :icon="iconText"></icon>
     </a>
 </template>
 
-<script>
+<script setup>
 import Icon from "./Icon";
-
+import {usePlayerStore} from "~/store";
+import {computed} from "vue";
+import {get} from "@vueuse/core";
+import gettext from "~/vendor/gettext";
 import getUrlWithoutQuery from "~/functions/getUrlWithoutQuery";
 
-import {usePlayerStore} from '~/store.js';
+const props = defineProps({
+    url: String,
+    isStream: {
+        type: Boolean,
+        default: false
+    },
+    isHls: {
+        type: Boolean,
+        default: false
+    },
+    iconClass: String
+});
 
-export default {
-    name: 'PlayButton',
-    components: {Icon},
-    setup() {
-        return {
-            store: usePlayerStore()
-        }
-    },
-    props: {
-        url: String,
-        isStream: {
-            type: Boolean,
-            default: false
-        },
-        isHls: {
-            type: Boolean,
-            default: false
-        },
-        iconClass: String
-    },
-    computed: {
-        isPlaying() {
-            return this.store.isPlaying;
-        },
-        current() {
-            return this.store.current;
-        },
-        isThisPlaying() {
-            if (!this.isPlaying) {
-                return false;
-            }
+const $store = usePlayerStore();
+const {$gettext} = gettext;
 
-            let playingUrl = getUrlWithoutQuery(this.current.url);
-            let thisUrl = getUrlWithoutQuery(this.url);
-            return playingUrl === thisUrl;
-        },
-        langTitle() {
-            return this.isThisPlaying
-                ? this.$gettext('Stop')
-                : this.$gettext('Play');
-        },
-        icon() {
-            return this.isThisPlaying
-                ? 'stop_circle'
-                : 'play_circle';
-        }
-    },
-    methods: {
-        toggle() {
-            this.store.toggle({
-                url: this.url,
-                isStream: this.isStream,
-                isHls: this.isHls
-            });
-        }
+const isPlaying = computed(() => {
+    return $store.isPlaying;
+});
+
+const current = computed(() => {
+    return $store.current;
+});
+
+const isThisPlaying = computed(() => {
+    if (!get(isPlaying)) {
+        return false;
     }
-}
+
+    let playingUrl = getUrlWithoutQuery(get(current).url);
+    let thisUrl = getUrlWithoutQuery(props.url);
+    return playingUrl === thisUrl;
+});
+
+const langTitle = computed(() => {
+    return get(isThisPlaying)
+        ? $gettext('Stop')
+        : $gettext('Play');
+});
+
+const iconText = computed(() => {
+    return get(isThisPlaying)
+        ? 'stop_circle'
+        : 'play_circle';
+});
+
+const toggle = () => {
+    $store.toggle({
+        url: props.url,
+        isStream: props.isStream,
+        isHls: props.isHls
+    });
+};
+
+defineExpose({
+    current,
+    isPlaying,
+    isThisPlaying,
+    toggle
+})
 </script>
diff --git a/frontend/vue/vendor/sweetalert.js b/frontend/vue/vendor/sweetalert.js
index 8572cc41f..909cfc7ef 100644
--- a/frontend/vue/vendor/sweetalert.js
+++ b/frontend/vue/vendor/sweetalert.js
@@ -1,19 +1,30 @@
 import Swal from 'sweetalert2';
+import gettext from "~/vendor/gettext";
+
+const {$gettext} = gettext;
+
+const swalCustom = Swal.mixin({
+    confirmButtonText: $gettext('Confirm'),
+    cancelButtonText: $gettext('Cancel'),
+    showCancelButton: true,
+});
+
+export function showAlert(options = {}) {
+    return swalCustom.fire(options);
+}
+
+const swalConfirmDelete = swalCustom.mixin({
+    title: $gettext('Delete Record?'),
+    confirmButtonText: $gettext('Delete'),
+    confirmButtonColor: '#e64942',
+    focusCancel: true
+});
+
+export function confirmDelete(options = {}) {
+    return swalConfirmDelete.fire(options);
+}
 
 export default function useSweetAlert(vueApp) {
-    vueApp.config.globalProperties.$swal = function (options = {}) {
-        return Swal.fire(options);
-    };
-
-    vueApp.config.globalProperties.$confirmDelete = function (options = {}) {
-        const defaults = {
-            title: this.$gettext('Delete Record?'),
-            confirmButtonText: this.$gettext('Delete'),
-            confirmButtonColor: '#e64942',
-            showCancelButton: true,
-            focusCancel: true
-        };
-
-        return this.$swal({...defaults, ...options});
-    };
+    vueApp.config.globalProperties.$swal = showAlert;
+    vueApp.config.globalProperties.$confirmDelete = confirmDelete;
 }