Skip to content

Commit

Permalink
Redesign ChannelProfile
Browse files Browse the repository at this point in the history
  • Loading branch information
@untilrecovery @genofire
untilrecovery authored and genofire committed Mar 12, 2023
1 parent 0113e16 commit 8a45461
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 92 deletions.
20 changes: 15 additions & 5 deletions src/components/AdminDrawer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,17 @@
>
<v-list>
<v-list-item v-if="channel">
<v-list-item-avatar color="black">
<v-img v-if="channel.logo" :src="channel.logo" contain />
<span v-else>{{ channel.title.slice(0, 2) }}</span>
</v-list-item-avatar>
<router-link
:to="{
name: 'ChannelProfile',
params: { channelid: selectionAdminChannel },
}"
>
<v-list-item-avatar color="black">
<v-img v-if="channel.logo" :src="channel.logo" contain />
<span v-else>{{ channel.title.slice(0, 2) }}</span>
</v-list-item-avatar></router-link
>

<v-spacer />
<v-menu offset-y>
Expand Down Expand Up @@ -93,7 +100,10 @@
v-for="item in channelMenu"
:key="item.name"
link
:to="{ name: item.name, params: { channelid: selectionAdminChannel } }"
:to="{
name: item.name,
params: { channel: channel },
}"
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
Expand Down
29 changes: 23 additions & 6 deletions src/components/UploadDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,25 @@
outlined
dense
label="File input"
:success="success"
:error="errorMessage !== null"
:error-messages="errorMessage"
></v-file-input>
</v-form>
<v-progress-linear
:value="uploadProgress"
v-if="uploadProgress > 0"
></v-progress-linear>
<v-expand-transition>
<v-progress-linear
:value="uploadProgress"
v-if="uploadProgress > 0"
height="20"
class="mb-6"
color="success darken-1"
background-color="neutral lighten-1"
>
<template #default="{ value }">
<strong>{{ Math.ceil(value) }}%</strong>
</template>
</v-progress-linear>
</v-expand-transition>
</v-card-text>
<v-divider />

Expand All @@ -53,8 +65,9 @@ export default {
return {
dialog: true,
fileSrc: {},
uploadProgress: 0,
uploadProgress: 20,
errorMessage: null,
success: null,
};
},
methods: {
Expand All @@ -64,10 +77,14 @@ export default {
upload() {
console.log("upload");
this.errorMessage = null;
this.success = false;
api.Channels.LogoUploader(
this.channelid,
this.fileSrc,
() => console.log("success"),
() => {
this.success = true;
console.log("success");
},
(percent) => {
console.log(percent, "%");
this.uploadProgress = percent;
Expand Down
5 changes: 2 additions & 3 deletions src/router/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,13 @@ import Stats from "@/views/Admin/Stats.vue"
import Server from "@/views/Admin/Server.vue"
import About from "@/views/Admin/About.vue"
import GlobalStreamSchedule from "@/views/Admin/GlobalStreamSchedule.vue"
// import ChannelEdit from "@/views/Admin/ChannelEdit.vue"
import ChannelProfile from "@/views/Admin/ChannelProfile.vue"

// for channel
import ChannelDistribution from "@/views/Admin/ChannelDistribution.vue"
import StreamSchedule from "@/views/Admin/StreamSchedule.vue"
import AdminChannelLive from "@/views/Admin/ChannelLive.vue"
import ChannelEdit from "@/views/Admin/ChannelEdit.vue"
// import ChannelEdit from "@/views/Admin/ChannelEdit.vue"
import ChannelProfile from "@/views/Admin/ChannelProfile.vue"
import StreamEdit from "@/views/Admin/StreamEdit.vue"
import ChannelRecordings from "@/views/Admin/ChannelRecordings.vue"
import RecordingEdit from "@/views/Admin/RecordingEdit.vue"
Expand Down
189 changes: 116 additions & 73 deletions src/views/Admin/ChannelProfile.vue
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,107 @@
<template>
<v-container fluid>
<v-row no-gutters>
<v-col>
<h3>Channel Profile</h3>
<v-alert
v-if="confirmRemove"
<v-card>
<v-overlay :value="confirmRemove">
<v-snackbar
v-model="confirmRemove"
class="mt-2"
border="left"
type="error"
prominent
dense
dismissible
app
top
max-width="100%"
transition="scroll-y-transition"
>
<v-row align="center">
<v-col class="grow">
Do you really want to remove this channel? This action cannot be
undone.
</v-col>
<v-col class="shrink">
<v-btn outlined @click="remove()"> Remove </v-btn>
</v-col>
</v-row>
</v-alert>
<v-form class="pa-0 mt-2" @submit="save()">
<v-text-field
v-model="channel.title"
:color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
label="Title"
outlined
<v-alert
id="alert"
v-model="confirmRemove"
class="mb-0"
type="error"
icon="mdi-alert"
dense
@input="enableSave = true"
/>
<v-text-field
v-model="channel.common_name"
:color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
label="Comman Name (used in URLs)"
outlined
dense
@input="enableSave = true"
/>
<v-text-field
v-model.lazy="channel.logo"
:color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
label="Logo URL"
outlined
dense
@input="enableSave = true"
>
<template #append-outer>
<v-btn icon @click="showUploadDialog = true" class="mt-n1">
<v-icon> mdi-plus </v-icon>
</v-btn>
</template>
</v-text-field>
<v-btn
class="ml-auto mr-1"
color="success"
:disabled="!enableSave"
@click="save()"
dismissible
>
<v-icon left> mdi-content-save </v-icon>
Save
</v-btn>
<v-btn
v-if="channelid"
class="ml-1"
color="error"
@click="confirmRemove = true"
<v-row align="center">
<v-col class="grow">
Do you really want to remove this channel? This action cannot be
undone.
</v-col>
<v-col class="shrink">
<v-btn outlined @click="remove()"> Remove </v-btn>
</v-col>
</v-row>
</v-alert>
</v-snackbar>
</v-overlay>
<v-card-title>Channel Profile</v-card-title>
<v-card-text>
<div class="d-flex mt-4">
<div
class="d-flex flex-column mr-2 align-center"
style="width: 200px"
>
<v-icon left> mdi-delete </v-icon>
Delete
</v-btn>
</v-form>
<v-divider v-if="channelid" class="mt-4 mb-4" />
<h4 v-if="channelid">Stream Ingress</h4>
<v-avatar class="ma-4" rounded="0" height="128" width="128">
<v-img v-if="channel.logo" :src="channel.logo" contain />
</v-avatar>
<v-btn fab depressed @click="showUploadDialog = true" class="mt-2">
<v-icon> mdi-pencil </v-icon>
</v-btn>
</div>
<div class="d-flex flex-grow-1 ml-2">
<v-form class="pa-0 mt-2" @submit="save()" style="width: 100%">
<v-text-field
v-model="channel.title"
:color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
label="Title"
outlined
dense
@input="enableSave = true"
/>
<v-text-field
v-model="channel.common_name"
:color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
label="Comman Name (used in URLs)"
outlined
dense
@input="enableSave = true"
/>
<v-text-field
v-model.lazy="channel.logo"
:color="darkMode ? 'grey lighten-3' : 'grey darken-2'"
label="Logo URL"
outlined
dense
@input="enableSave = true"
>
</v-text-field>
</v-form>
</div>
</div>
</v-card-text>
<v-divider />
<v-card-actions class="neutral lighten-1">
<v-btn
v-if="channelid"
class="ml-1"
color="error"
text
@click="confirmRemove = true"
>
<v-icon left> mdi-delete </v-icon>
Delete
</v-btn>
<v-btn
class="ml-auto mr-1"
color="success"
:disabled="!enableSave"
@click="save()"
>
<v-icon left> mdi-content-save </v-icon>
Save
</v-btn>
</v-card-actions>
</v-card>
<v-divider v-if="channelid" class="mt-4 mb-4" />
<v-card v-if="channelid">
<v-card-title>Stream Ingress</v-card-title>
<v-card-text>
<v-simple-table v-if="channelid" dense>
<template #default>
<thead>
Expand Down Expand Up @@ -129,10 +156,10 @@
<UploadDialog
v-if="showUploadDialog"
:channelid="channelid"
@closeSpeakerEditDialog="closeUploadDialog"
@closeUploadDialog="closeUploadDialog"
/>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-container>
</template>

Expand Down Expand Up @@ -210,3 +237,19 @@ export default {
},
};
</script>

<style scoped>
#alert {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.v-snack >>> .v-snack__content {
padding: 0 !important;
}
.v-snack >>> .v-snack__wrapper {
display: block;
margin: 0;
width: 60% !important;
min-height: unset !important;
}
</style>
10 changes: 5 additions & 5 deletions vue.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ module.exports = {
// target: 'https://media.kukoon.de',
changeOrigin: true,
},
// '^/ws': {
// target: 'wss://media.kukoon.de',
// ws: true,
// changeOrigin: true,
// },
'^/ws': {
target: 'wss://media.kukoon.de',
ws: true,
changeOrigin: true,
},
},
},
}

0 comments on commit 8a45461

Please sign in to comment.