djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove unneeded imports, simplify alerts, fix broken upload

Browse Source
This commit is contained in:
jb-alvarado 2024-02-21 14:23:20 +01:00
parent 28bcfcd1a3
commit 8eb543ddae
20 changed files with 376 additions and 567 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/Control.vue
View File

@ -144,9 +144,6 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import mpegts from 'mpegts.js'
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
import { usePlaylist } from '~/stores/playlist'
const { $dayjs } = useNuxtApp()
const authStore = useAuth()

32
components/GuiConfig.vue
View File

@ -90,10 +90,6 @@
</template>
<script setup lang="ts">
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
import { useIndex } from '~~/stores'
const { $_ } = useNuxtApp()
const authStore = useAuth()
const configStore = useConfig()
@ -123,18 +119,10 @@ async function onSubmitGui() {
const update = await configStore.setGuiConfig(configStore.configGui[configStore.configID])
if (update.status) {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Update GUI config success!'
indexStore.msgAlert('alert-success', 'Update GUI config success!', 2)
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = 'Update GUI config failed!'
indexStore.msgAlert('alert-danger', 'Update GUI config failed!', 2)
}
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 2000)
}
async function deleteChannel() {
@ -142,9 +130,7 @@ async function deleteChannel() {
const id = config[configStore.configID].id
if (id === 1) {
indexStore.alertVariant = 'alert-warning'
indexStore.alertMsg = 'First channel can not be deleted!'
indexStore.showAlert = true
indexStore.msgAlert('alert-warning', 'First channel can not be deleted!', 2)
return
}
@ -159,17 +145,9 @@ async function deleteChannel() {
await configStore.getPlayoutConfig()
if (response.status === 200) {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Delete GUI config success!'
indexStore.msgAlert('alert-success', 'Delete GUI config success!', 2)
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = 'Delete GUI config failed!'
indexStore.msgAlert('alert-danger', 'Delete GUI config failed!', 2)
}
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 2000)
}
</script>

3
components/Menu.vue
View File

@ -72,9 +72,6 @@
</template>
<script setup lang="ts">
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
const authStore = useAuth()
const configStore = useConfig()
const router = useRouter()

16
components/PlayoutConfig.vue
View File

@ -93,10 +93,6 @@
</template>
<script setup lang="ts">
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
import { useIndex } from '~/stores/index'
const { $bootstrap } = useNuxtApp()
const authStore = useAuth()
@ -111,8 +107,7 @@ async function onSubmitPlayout() {
const update = await configStore.setPlayoutConfig(configStore.configPlayout)
if (update.status === 200) {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Update playout config success!'
indexStore.msgAlert('alert-success', 'Update playout config success!', 2)
const channel = configStore.configGui[configStore.configID].id
@ -129,15 +124,8 @@ async function onSubmitPlayout() {
}
})
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = 'Update playout config failed!'
indexStore.msgAlert('alert-danger', 'Update playout config failed!', 2)
}
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 2000)
}
async function restart() {

7
components/SystemStats.vue
View File

@ -60,9 +60,6 @@
</div>
</template>
<script setup lang="ts">
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
const { fileSize } = stringFormatter()
const authStore = useAuth()
@ -107,10 +104,10 @@ async function systemStatus() {
const channel = configStore.configGui[configStore.configID].id
if (!document?.hidden) {
await $fetch(`/api/system/${channel}`, {
await $fetch<SystemStatistics>(`/api/system/${channel}`, {
method: 'GET',
headers: { ...contentType, ...authStore.authHeader },
}).then((stat: SystemStatistics) => {
}).then((stat) => {
sysStat.value = stat
})
}

48
components/UserConfig.vue
View File

@ -138,10 +138,6 @@
</template>
<script setup lang="ts">
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
import { useIndex } from '~/stores/index'
const authStore = useAuth()
const configStore = useConfig()
const indexStore = useIndex()
@ -204,32 +200,21 @@ async function getUserConfig() {
async function deleteUser() {
if (configStore.configUser.username === configStore.currentUser) {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = 'Delete current user not possible!'
indexStore.msgAlert('alert-danger', 'Delete current user not possible!', 2)
} else {
await fetch(`/api/user/${configStore.configUser.username}`, {
method: 'DELETE',
headers: authStore.authHeader,
}).then(async () => {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Delete user done!'
indexStore.msgAlert('alert-success', 'Delete user done!', 2)
await configStore.getUserConfig()
await getUsers()
})
.catch((e) => {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = `Delete user error: ${e}`
indexStore.msgAlert('alert-danger', `Delete user error: ${e}`, 2)
})
}
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 3000)
}
async function clearUser() {
@ -259,27 +244,18 @@ async function addUser() {
const update = await configStore.addNewUser(user.value)
if (update.status === 200) {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Add user success!'
indexStore.msgAlert('alert-success', 'Add user success!', 2)
await getUsers()
await getUserConfig()
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = 'Add user failed!'
indexStore.msgAlert('alert-danger', 'Add user failed!', 2)
}
clearUser()
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = 'Password mismatch!'
indexStore.msgAlert('alert-danger', 'Password mismatch!', 2)
}
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 2000)
}
async function onSubmitUser() {
@ -291,20 +267,12 @@ async function onSubmitUser() {
const update = await configStore.setUserConfig(configStore.configUser)
if (update.status === 200) {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Update user profile success!'
indexStore.msgAlert('alert-success', 'Update user profile success!', 2)
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = 'Update user profile failed!'
indexStore.msgAlert('alert-danger', 'Update user profile failed!', 2)
}
indexStore.showAlert = true
newPass.value = ''
confirmPass.value = ''
setTimeout(() => {
indexStore.showAlert = false
}, 2000)
}
</script>

3
layouts/default.vue
View File

@ -14,9 +14,6 @@
</template>
<script setup lang="ts">
import { useConfig } from '~/stores/config'
import { useIndex } from '~/stores/index'
const { $bootstrap } = useNuxtApp()
const configStore = useConfig()
const indexStore = useIndex()

2
middleware/auth.global.ts
View File

@ -1,5 +1,3 @@
import { useAuth } from '~/stores/auth'
export default defineNuxtRouteMiddleware((to, from) => {
const auth = useAuth()

594
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ffplayout-frontend",
"version": "0.6.4",
"version": "0.7.0",
"description": "Web GUI for ffplayout",
"author": "Jonathan Baecker",
"private": true,
@ -16,8 +16,8 @@
"@nuxt/types": "^2.17.3",
"@pinia/nuxt": "^0.5.1",
"@popperjs/core": "^2.11.8",
"@vueuse/nuxt": "^10.7.2",
"bootstrap": "^5.3.2",
"@vueuse/nuxt": "^10.8.0",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"cookie-universal-nuxt": "^2.2.2",
"dayjs": "^1.11.10",
@ -42,7 +42,7 @@
"eslint-plugin-nuxt": "^4.0.0",
"postcss": "^8.4.35",
"postcss-loader": "^8.1.0",
"sass": "^1.71.0",
"sass-loader": "^14.1.0"
"sass": "^1.71.1",
"sass-loader": "^14.1.1"
}
}

8
pages/configure.vue
View File

@ -13,7 +13,6 @@
role="tab"
aria-controls="v-pills-gui"
aria-selected="true"
@click="indexStore.resetAlert()"
>
GUI
</button>
@ -26,7 +25,6 @@
role="tab"
aria-controls="v-pills-playout"
aria-selected="false"
@click="indexStore.resetAlert()"
>
Playout
</button>
@ -39,7 +37,6 @@
role="tab"
aria-controls="v-pills-user"
aria-selected="false"
@click="indexStore.resetAlert()"
>
User
</button>
@ -72,16 +69,11 @@
</template>
<script setup lang="ts">
import { useIndex } from '~/stores/index'
useHead({
title: 'Configuration | ffplayout'
})
const indexStore = useIndex()
onBeforeUnmount(() => {
indexStore.resetAlert()
})
</script>
<style lang="scss">

3
pages/index.vue
View File

@ -75,9 +75,6 @@
</template>
<script setup lang="ts">
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
const authStore = useAuth()
const configStore = useConfig()

2
pages/logging.vue
View File

@ -14,8 +14,6 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
useHead({
title: 'Logging | ffplayout'

59
pages/media.vue
View File

@ -320,9 +320,9 @@
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="uploadModalLabel">Upload Files</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel" @click.prevent="onResetUpload()"></button>
</div>
<form @submit.prevent="onSubmitUpload" @reset="onResetUpload">
<form @submit.prevent="onSubmitUpload" @reset.prevent="onResetUpload">
<div class="modal-body">
<input
class="form-control"
@ -390,11 +390,6 @@ import { storeToRefs } from 'pinia'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
import { useIndex } from '~/stores/index'
import { useMedia } from '~/stores/media'
const { $bootstrap } = useNuxtApp()
const authStore = useAuth()
const configStore = useConfig()
@ -519,22 +514,13 @@ async function deleteFileOrFolder() {
})
.then(async (response) => {
if (response.status !== 200) {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = `${await response.text()}`
indexStore.showAlert = true
indexStore.msgAlert('alert-danger', `${await response.text()}`, 5)
}
getPath(mediaStore.folderTree.source)
})
.catch((e) => {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = `Delete error: ${e}`
indexStore.showAlert = true
indexStore.msgAlert('alert-danger', `Delete error: ${e}`, 5)
})
setTimeout(() => {
indexStore.alertMsg = ''
indexStore.showAlert = false
}, 5000)
}
function setRenameValues(path: string) {
@ -557,9 +543,7 @@ async function onSubmitRenameFile(evt: any) {
getPath(mediaStore.folderTree.source)
})
.catch((e) => {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = `Delete error: ${e}`
indexStore.showAlert = true
indexStore.msgAlert('alert-danger', `Delete error: ${e}`, 3)
})
renameOldName.value = ''
@ -583,9 +567,7 @@ async function onSubmitCreateFolder(evt: any) {
lastPath.value = mediaStore.folderTree.source
if (mediaStore.folderTree.folders.includes(folderName.value)) {
indexStore.alertVariant = 'alert-warning'
indexStore.alertMsg = `Folder "${folderName.value.name}" exists already!`
indexStore.showAlert = true
indexStore.msgAlert('alert-warning', `Folder "${folderName.value.name}" exists already!`, 2)
return
}
@ -596,22 +578,14 @@ async function onSubmitCreateFolder(evt: any) {
body: JSON.stringify({ source: path }),
})
.then(() => {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Folder create done...'
indexStore.msgAlert('alert-success', 'Folder create done...', 2)
})
.catch((e: string) => {
indexStore.msgAlert('alert-danger', `Folder create error: ${e}`, 3)
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = `Folder create error: ${e}`
})
indexStore.showAlert = true
folderName.value = {} as Folder
setTimeout(() => {
indexStore.alertMsg = ''
indexStore.showAlert = false
}, 2000)
getPath(lastPath.value)
}
@ -650,9 +624,8 @@ async function upload(file: any): Promise<null | undefined> {
}
xhr.value.upload.onerror = () => {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = `Upload error: ${xhr.value.status}`
indexStore.showAlert = true
indexStore.msgAlert('alert-danger', `Upload error: ${xhr.value.status}`, 3)
resolve(undefined)
}
@ -677,7 +650,11 @@ async function onSubmitUpload(evt: any) {
currentProgress.value = 0
currentNumber.value = i + 1
await upload(file)
if (mediaStore.folderTree.files.find((f) => f.name === file.name)) {
indexStore.msgAlert('alert-warning', 'File exists already!', 3)
} else {
await upload(file)
}
overallProgress.value = (currentNumber.value * 100) / inputFiles.value.length
}
@ -692,18 +669,16 @@ async function onSubmitUpload(evt: any) {
currentProgress.value = 0
overallProgress.value = 0
inputFiles.value = []
indexStore.showAlert = false
uploadTask.value = ''
}, 1500)
}
function onResetUpload(evt: any) {
evt.preventDefault()
function onResetUpload() {
fileInputName.value.value = null
inputFiles.value = []
overallProgress.value = 0
currentProgress.value = 0
uploadTask.value = ''
xhr.value.abort()
}
</script>

44
pages/message.vue
View File

@ -218,10 +218,6 @@
</template>
<script setup lang="ts">
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
import { useIndex } from '~/stores/index'
const authStore = useAuth()
const configStore = useConfig()
const indexStore = useIndex()
@ -262,10 +258,6 @@ onMounted(() => {
getPreset(-1)
})
onBeforeUnmount(() => {
indexStore.resetAlert()
})
async function getPreset(index: number) {
fetch(`/api/presets/${configStore.configGui[configStore.configID].id}`, {
method: 'GET',
@ -358,18 +350,10 @@ async function savePreset() {
})
if (response.status === 200) {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Save Preset done!'
indexStore.msgAlert('alert-success', 'Save Preset done!', 2)
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = 'Save Preset failed!'
indexStore.msgAlert('alert-danger', 'Save Preset failed!', 2)
}
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 3000)
}
}
@ -402,19 +386,11 @@ async function createNewPreset() {
})
if (response.status === 200) {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Save Preset done!'
indexStore.msgAlert('alert-success', 'Save Preset done!', 2)
getPreset(-1)
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = 'Save Preset failed!'
indexStore.msgAlert('alert-danger', 'Save Preset failed!', 2)
}
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 3000)
}
async function deletePreset() {
@ -449,18 +425,10 @@ async function submitMessage() {
})
if (response.status === 200) {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Sending success...'
indexStore.msgAlert('alert-success', 'Sending success...', 2)
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = 'Sending failed...'
indexStore.msgAlert('alert-danger', 'Sending failed...', 2)
}
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 3000)
}
</script>

73
pages/player.vue
View File

@ -751,12 +751,6 @@ import { storeToRefs } from 'pinia'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
import { useIndex } from '~/stores/index'
import { useMedia } from '~/stores/media'
import { usePlaylist } from '~/stores/playlist'
const { $_, $dayjs } = useNuxtApp()
const { secToHMS, filename, secondsToTime, toMin, mediaType } = stringFormatter()
const { processPlaylist, genUID } = playlistOperations()
@ -1118,27 +1112,14 @@ async function onSubmitImport(evt: any) {
}
)
.then(() => {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Import success!'
indexStore.showAlert = true
indexStore.msgAlert('alert-success', 'Import success!', 2)
playlistStore.getPlaylist(listDate.value)
setTimeout(() => {
indexStore.showAlert = false
}, 2000)
})
.catch((e: string) => {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = e
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 4000)
indexStore.msgAlert('alert-danger', e, 4)
})
playlistIsLoading.value = false
playlistIsLoading.value = false
textFile.value = null
fileImport.value.value = null
}
@ -1171,22 +1152,10 @@ async function generatePlaylist() {
response.program,
false
)
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = 'Generate Playlist done...'
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 2000)
indexStore.msgAlert('alert-success', 'Generate Playlist done...', 2)
})
.catch((e: any) => {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = e.data ? e.data : e
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 4000)
indexStore.msgAlert('alert-danger', e.data ? e.data : e, 4)
})
// reset selections
@ -1219,31 +1188,13 @@ async function savePlaylist(saveDate: string) {
}),
})
.then((response: any) => {
indexStore.alertVariant = 'alert-success'
indexStore.alertMsg = response
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 2000)
indexStore.msgAlert('alert-success', response, 2)
})
.catch((e: any) => {
if (e.status === 409) {
indexStore.alertVariant = 'alert-warning'
indexStore.alertMsg = e.data
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 2000)
indexStore.msgAlert('alert-warning', e.data, 2)
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = e
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 4000)
indexStore.msgAlert('alert-danger', e, 4)
}
})
}
@ -1255,13 +1206,7 @@ async function deletePlaylist(playlistDate: string) {
}).then(() => {
playlistStore.playlist = []
indexStore.alertVariant = 'alert-warning'
indexStore.alertMsg = 'Playlist deleted...'
indexStore.showAlert = true
setTimeout(() => {
indexStore.showAlert = false
}, 2000)
indexStore.msgAlert('alert-warning', 'Playlist deleted...', 2)
})
}

11
stores/config.ts
View File

@ -3,9 +3,6 @@ import { defineStore } from 'pinia'
const { timeToSeconds } = stringFormatter()
import { useAuth } from '~/stores/auth'
import { useIndex } from '~/stores/index'
export const useConfig = defineStore('config', {
state: () => ({
configID: 0,
@ -77,9 +74,7 @@ export const useConfig = defineStore('config', {
},
]
indexStore.alertMsg = e
indexStore.alertVariant = 'alert-danger'
indexStore.showAlert = true
indexStore.msgAlert('alert-danger', e, 3)
})
},
@ -148,9 +143,7 @@ export const useConfig = defineStore('config', {
this.configPlayout = data
})
.catch(() => {
indexStore.alertMsg = 'No playout config found!'
indexStore.alertVariant = 'alert-danger'
indexStore.showAlert = true
indexStore.msgAlert('alert-danger', 'No playout config found!', 3)
})
},

14
stores/index.ts
View File

@ -9,10 +9,16 @@ export const useIndex = defineStore('index', {
getters: {},
actions: {
resetAlert() {
this.showAlert = false
this.alertVariant = 'alert-success'
this.alertMsg = ''
msgAlert(variance: string, text: string, seconds: number = 3) {
this.alertVariant = variance
this.alertMsg = text
this.showAlert = true
setTimeout(() => {
this.showAlert = false
this.alertVariant = 'alert-success'
this.alertMsg = ''
}, seconds * 1000);
},
},
})

8
stores/media.ts
View File

@ -1,9 +1,5 @@
import { defineStore } from 'pinia'
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
import { useIndex } from '~/stores/index'
const { genUID } = playlistOperations()
export const useMedia = defineStore('media', {
@ -36,9 +32,7 @@ export const useMedia = defineStore('media', {
if (response.status === 200) {
return response.json()
} else {
indexStore.alertVariant = 'alert-danger'
indexStore.alertMsg = `Storage not exist!`
indexStore.showAlert = true
indexStore.msgAlert('alert-danger', 'Storage not exist!', 3)
return {
source: '',

3
stores/playlist.ts
View File

@ -7,9 +7,6 @@ import { defineStore } from 'pinia'
dayjs.extend(utc)
dayjs.extend(timezone)
import { useAuth } from '~/stores/auth'
import { useConfig } from '~/stores/config'
const { timeToSeconds } = stringFormatter()
const { processPlaylist } = playlistOperations()