Vue 3 WIP

This commit is contained in:
Buster Neece 2022-12-10 18:46:33 -06:00
parent d904ab47e3
commit e3513049df
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
19 changed files with 132 additions and 22 deletions

View File

@ -66,6 +66,7 @@
"vue-axios": "^3.5",
"vue-clipboard2": "^0.3.3",
"vue-loader": "^17",
"vue-style-loader": "^4.1.3",
"vue3-daterange-picker": "^1",
"vue3-gettext": "^2.3.4",
"vuedraggable": "^2.24.1",
@ -10049,6 +10050,44 @@
"node": ">=8"
}
},
"node_modules/vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
"integrity": "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==",
"dependencies": {
"hash-sum": "^1.0.2",
"loader-utils": "^1.0.2"
}
},
"node_modules/vue-style-loader/node_modules/hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
},
"node_modules/vue-style-loader/node_modules/json5": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
"dependencies": {
"minimist": "^1.2.0"
},
"bin": {
"json5": "lib/cli.js"
}
},
"node_modules/vue-style-loader/node_modules/loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dependencies": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
},
"engines": {
"node": ">=4.0.0"
}
},
"node_modules/vue3-daterange-picker": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/vue3-daterange-picker/-/vue3-daterange-picker-1.0.1.tgz",
@ -18063,6 +18102,40 @@
}
}
},
"vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
"integrity": "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==",
"requires": {
"hash-sum": "^1.0.2",
"loader-utils": "^1.0.2"
},
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
},
"json5": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
}
}
},
"vue3-daterange-picker": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/vue3-daterange-picker/-/vue3-daterange-picker-1.0.1.tgz",

View File

@ -67,6 +67,7 @@
"vue-axios": "^3.5",
"vue-clipboard2": "^0.3.3",
"vue-loader": "^17",
"vue-style-loader": "^4.1.3",
"vue3-daterange-picker": "^1",
"vue3-gettext": "^2.3.4",
"vuedraggable": "^2.24.1",

View File

@ -105,9 +105,9 @@
</div>
</div>
</template>
<slot v-for="(_, name) in $slots" :name="name" :slot="name"/>
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
<slot :name="name" v-bind="slotData"/>
<template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
<slot :name="slot" v-bind="scope"></slot>
</template>
</b-table>
</div>

View File

@ -87,7 +87,6 @@ export default {
}
this.$emit('np_updated', np_new);
this.$eventHub.$emit('np_updated', np_new);
document.dispatchEvent(new CustomEvent("now-playing", {
detail: np_new

View File

@ -144,7 +144,9 @@
</template>
</td>
<td class="text-center">
<icon class="sm align-middle" icon="headset"></icon>
<span class="pr-1">
<icon class="sm align-middle" icon="headset"></icon>
</span>
<template v-if="item.links.listeners">
<a :href="item.links.listeners">
{{ item.listeners.total }}

View File

@ -11,10 +11,14 @@ import {required} from '@vuelidate/validators';
import BaseEditModal from '~/components/Common/BaseEditModal';
import FormBasicInfo from './Form/BasicInfo';
import mergeExisting from "~/functions/mergeExisting";
import useVuelidate from "@vuelidate/core";
export default {
name: 'EditModal',
emits: ['needs-restart'],
setup() {
return {v$: useVuelidate()}
},
mixins: [BaseEditModal],
components: {FormBasicInfo},
validations() {

View File

@ -46,7 +46,7 @@
</div>
<data-table ref="datatable" id="station_media" selectable paginated select-fields
@row-selected="onRowSelected" @refreshed="onRefreshed" :fields="fields" :api-url="listUrl"
@row-selected="onRowSelected" :fields="fields" :api-url="listUrl"
:request-config="requestConfig">
<template #cell(path)="row">
<div class="d-flex align-items-center">
@ -342,9 +342,6 @@ export default {
directories: _.map(splitItems[0], 'path')
};
},
onRefreshed() {
this.$eventHub.$emit('refreshed');
},
onTriggerNavigate() {
this.$refs.datatable.navigate();
},
@ -367,9 +364,6 @@ export default {
isFilterString(str) {
return str.substring(0, 9) === 'playlist:' || str.substring(0, 8) === 'special:';
},
playAudio(url) {
this.$eventHub.$emit('player_toggle', url);
},
changeDirectory(newDir) {
window.location.hash = newDir;

View File

@ -3,7 +3,7 @@
<div class="col-md-8">
<div class="btn-group dropdown allow-focus">
<b-dropdown size="sm" variant="primary" ref="setPlaylistsDropdown" v-b-tooltip.hover
:title="langPlaylistDropdown">
class="mr-2" :title="langPlaylistDropdown">
<template #button-content>
<icon icon="clear_all"></icon>
<translate key="lang_playlists_title">Playlists</translate>
@ -41,11 +41,11 @@
</b-dropdown-form>
</b-dropdown>
</div>
<b-button size="sm" variant="primary" v-b-modal.move_file>
<b-button size="sm" variant="primary" class="mr-2" v-b-modal.move_file>
<icon icon="open_with"></icon>
<translate key="lang_btn_move">Move</translate>
</b-button>
<b-dropdown size="sm" variant="default">
<b-dropdown size="sm" variant="default" class="mr-2">
<template #button-content>
<icon icon="more_horiz"></icon>
{{ langMore }}

View File

@ -26,10 +26,14 @@ import MountFormAutoDj from './Form/AutoDj';
import MountFormAdvanced from './Form/Advanced';
import MountFormIntro from "./Form/Intro";
import mergeExisting from "~/functions/mergeExisting";
import useVuelidate from "@vuelidate/core";
export default {
name: 'EditModal',
emits: ['needs-restart'],
setup() {
return {v$: useVuelidate()}
},
mixins: [BaseEditModal],
components: {MountFormIntro, MountFormAdvanced, MountFormAutoDj, MountFormBasicInfo},
props: {

View File

@ -18,11 +18,15 @@ import FormBasicInfo from './Form/BasicInfo';
import FormSchedule from './Form/Schedule';
import FormAdvanced from './Form/Advanced';
import BaseEditModal from '~/components/Common/BaseEditModal';
import useVuelidate from "@vuelidate/core";
export default {
name: 'EditModal',
emits: ['needs-restart'],
components: {FormSchedule, FormBasicInfo, FormAdvanced},
setup() {
return {v$: useVuelidate()}
},
mixins: [BaseEditModal],
props: {
stationTimeZone: String,

View File

@ -24,10 +24,14 @@ import PodcastCommonArtwork from './Common/Artwork';
import EpisodeFormMedia from './EpisodeForm/Media';
import {DateTime} from 'luxon';
import mergeExisting from "~/functions/mergeExisting";
import useVuelidate from "@vuelidate/core";
export default {
name: 'EditModal',
components: {EpisodeFormMedia, PodcastCommonArtwork, EpisodeFormBasicInfo},
setup() {
return {v$: useVuelidate()}
},
mixins: [BaseEditModal],
props: {
stationTimeZone: String,

View File

@ -20,10 +20,14 @@ import BaseEditModal from '~/components/Common/BaseEditModal';
import PodcastFormBasicInfo from './PodcastForm/BasicInfo';
import PodcastCommonArtwork from './Common/Artwork';
import mergeExisting from "~/functions/mergeExisting";
import useVuelidate from "@vuelidate/core";
export default {
name: 'EditModal',
components: {PodcastCommonArtwork, PodcastFormBasicInfo},
setup() {
return {v$: useVuelidate()}
},
mixins: [BaseEditModal],
props: {
stationTimeZone: String,

View File

@ -5,10 +5,13 @@
<h3 class="flex-shrink card-title my-0" key="lang_profile_nowplaying_onair" v-translate>On the Air</h3>
<h6 class="card-subtitle text-right flex-fill my-0" style="line-height: 1;">
<icon class="sm align-middle" icon="headset"></icon>
{{ langListeners }}
<span class="pl-1">
{{ langListeners }}
</span>
<br>
<small>
<span>{{ np.listeners.unique }}</span>
<span class="pr-1">{{ np.listeners.unique }}</span>
<translate key="lang_profile_nowplaying_unique">Unique</translate>
</small>
</h6>

View File

@ -27,9 +27,9 @@
</td>
<td class="pl-1 text-right">
<icon class="sm align-middle" icon="headset"></icon>
<span class="listeners-total">{{ mount.listeners.total }}</span><br>
<span class="listeners-total pl-1">{{ mount.listeners.total }}</span><br>
<small>
<span class="listeners-unique">{{ mount.listeners.unique }}</span>
<span class="listeners-unique pr-1">{{ mount.listeners.unique }}</span>
<translate key="lang_streams_unique">Unique</translate>
</small>
</td>
@ -55,9 +55,9 @@
</td>
<td class="pl-1 text-right">
<icon class="sm align-middle" icon="headset"></icon>
<span class="listeners-total">{{ remote.listeners.total }}</span><br>
<span class="listeners-total pl-1">{{ remote.listeners.total }}</span><br>
<small>
<span class="listeners-unique">{{ remote.listeners.unique }}</span>
<span class="listeners-unique pr-1">{{ remote.listeners.unique }}</span>
<translate key="lang_streams_unique">Unique</translate>
</small>
</td>
@ -82,7 +82,7 @@
</td>
<td class="pl-1 text-right">
<icon class="sm align-middle" icon="headset"></icon>
<span class="listeners-total">{{ np.station.hls_listeners }}</span>
<span class="listeners-total pl-1">{{ np.station.hls_listeners }}</span>
</td>
</tr>
</tbody>

View File

@ -16,10 +16,14 @@ import BaseEditModal from '~/components/Common/BaseEditModal';
import RemoteFormBasicInfo from "./Form/BasicInfo";
import RemoteFormAutoDj from "./Form/AutoDj";
import {REMOTE_ICECAST} from "~/components/Entity/RadioAdapters";
import useVuelidate from "@vuelidate/core";
export default {
name: 'RemoteEditModal',
emits: ['needs-restart'],
setup() {
return {v$: useVuelidate()}
},
mixins: [BaseEditModal],
components: {
RemoteFormAutoDj,

View File

@ -10,9 +10,13 @@
import {required} from '@vuelidate/validators';
import BaseEditModal from '~/components/Common/BaseEditModal';
import SftpUsersForm from "./Form";
import useVuelidate from "@vuelidate/core";
export default {
name: 'SftpUsersEditModal',
setup() {
return {v$: useVuelidate()}
},
mixins: [BaseEditModal],
components: {SftpUsersForm},
validations() {

View File

@ -19,9 +19,13 @@ import FormSchedule from './Form/Schedule';
import FormArtwork from './Form/Artwork';
import BaseEditModal from '~/components/Common/BaseEditModal';
import mergeExisting from "~/functions/mergeExisting";
import useVuelidate from "@vuelidate/core";
export default {
name: 'EditModal',
setup() {
return {v$: useVuelidate()}
},
mixins: [BaseEditModal],
components: {FormBasicInfo, FormSchedule, FormArtwork},
props: {

View File

@ -33,9 +33,13 @@ import Twitter from "./Form/Twitter";
import GoogleAnalytics from "./Form/GoogleAnalytics";
import MatomoAnalytics from "./Form/MatomoAnalytics";
import Mastodon from "./Form/Mastodon";
import useVuelidate from "@vuelidate/core";
export default {
name: 'EditModal',
setup() {
return {v$: useVuelidate()}
},
components: {BasicInfo, TypeSelect},
mixins: [BaseEditModal],
props: {

View File

@ -114,6 +114,7 @@ module.exports = {
{
test: /\.scss$/i,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
@ -121,6 +122,7 @@ module.exports = {
{
test: /\.css$/i,
use: [
'vue-style-loader',
'css-loader'
]
},