videon/videon-frontend
videon/videon-frontend
3
0
Fork 0
Code Pull Requests Releases Activity

pooted stuff into components

Browse Source
This commit is contained in:
Pünkösd Marcell 2020-12-04 22:22:17 +01:00
parent 6c934187e3
commit 98df1eb97d
4 changed files with 170 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/ElementAdder.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div>
<md-dialog :md-active.sync="showNewElementChooser">
<md-dialog-title>Select the type of the new element</md-dialog-title>
<md-button @click="addElement('ingest')">
<md-icon>vertical_align_bottom</md-icon>
Ingest
</md-button>
<i></i> <!-- This is to prevent margin collapse -->
<md-button @click="addElement('encoder')">
<md-icon>gradient</md-icon>
Encoder
</md-button>
<i></i>
<md-button @click="addElement('restreamer')">
<md-icon>publish</md-icon>
Restreamer
</md-button>
</md-dialog>
<md-speed-dial class="md-bottom-right">
<md-speed-dial-target @click="showNewElementChooser = true">
<md-icon>add</md-icon>
</md-speed-dial-target>
<md-speed-dial-content>
<md-button @click="addElement('restreamer')" class="md-icon-button">
<md-icon>publish</md-icon>
</md-button>
<md-button @click="addElement('encoder')" class="md-icon-button">
<md-icon>gradient</md-icon>
</md-button>
<md-button @click="addElement('ingest')" class="md-icon-button">
<md-icon>vertical_align_bottom</md-icon>
</md-button>
</md-speed-dial-content>
</md-speed-dial>
</div>
</template>
<script>
export default {
name: "ElementAdder",
data() {
return {
showNewElementChooser: false
}
},
methods: {
addElement(type) {
this.showNewElementChooser = false;
this.$emit("addElement", type)
}
}
}
</script>
<style scoped>
</style>

51
src/components/Toolbar.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<md-toolbar class="md-primary">
<md-button class="md-icon-button" @click="showDrawerClicked">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">VideON</span>
<div class="md-toolbar-section-end">
<md-progress-spinner
v-if="processing"
class="md-accent"
md-mode="indeterminate"
:md-stroke="4"
:md-diameter="35" />
<md-button class="md-raised" :disabled="!applyEnabled" @click="applyClicked">Apply</md-button>
</div>
</md-toolbar>
</template>
<script>
export default {
name: "ToolbarContent",
props: {
processing: {
type: Boolean,
default: false
},
applyEnabled: {
type: Boolean,
default: false
}
},
methods: {
showDrawerClicked() {
this.$emit("showDrawerClicked");
},
applyClicked() {
this.$emit("applyClicked");
}
}
}
</script>
<style scoped>
</style>

32
src/components/WorkspaceDrawerContent.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div>
<md-toolbar class="md-transparent" md-elevation="0">
<span class="md-title">VideON</span>
</md-toolbar>
<md-list>
<md-list-item>
<md-avatar class="md-avatar-icon">J</md-avatar>
<span class="md-list-item-text">Joska</span>
</md-list-item>
<md-list-item>
<md-button class="md-raised md-accent">Logout</md-button>
</md-list-item>
</md-list>
</div>
</template>
<script>
export default {
name: "WorkspaceDrawerContent"
}
</script>
<style scoped>
</style>

100
src/views/Dashboard.vue
View File

@ -1,88 +1,18 @@
<template>
<div class="page-container md-layout-column" id="dashboard-container">
<md-dialog :md-active.sync="showNewElementChooser">
<md-dialog-title>Select the type of the new element</md-dialog-title>
<md-button @click="newElement('ingest')">
<md-icon>vertical_align_bottom</md-icon>
Ingest
</md-button>
<i></i> <!-- This is to prevent margin collapse -->
<md-button @click="newElement('encoder')">
<md-icon>gradient</md-icon>
Encoder
</md-button>
<i></i>
<md-button @click="newElement('restreamer')">
<md-icon>publish</md-icon>
Restreamer
</md-button>
</md-dialog>
<md-toolbar class="md-primary">
<md-button class="md-icon-button" @click="showNavigation = true">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">VideON</span>
<div class="md-toolbar-section-end">
<md-button class="md-raised" :disabled="true">Apply</md-button>
</div>
</md-toolbar>
<md-drawer :md-active.sync="showNavigation" md-swipeable>
<md-toolbar class="md-transparent" md-elevation="0">
<span class="md-title">VideON</span>
</md-toolbar>
<md-list>
<md-list-item>
<md-avatar class="md-avatar-icon">J</md-avatar>
<span class="md-list-item-text">Joska</span>
</md-list-item>
<md-list-item>
<md-button class="md-raised md-accent">Logout</md-button>
</md-list-item>
</md-list>
<!-- toolbar -->
<toolbar @showDrawerClicked="showDrawer = true"/>
<!-- drawer -->
<md-drawer :md-active.sync="showDrawer" md-swipeable>
<workspace-drawer-content/>
</md-drawer>
<!-- workspace -->
<md-content id="diagram-container">
<simple-flowchart :scene.sync="diagram"></simple-flowchart>
<md-speed-dial class="md-bottom-right">
<md-speed-dial-target @click="performAddElement">
<md-icon>add</md-icon>
</md-speed-dial-target>
<md-speed-dial-content>
<md-button @click="newElement('restreamer')" class="md-icon-button">
<md-icon>publish</md-icon>
</md-button>
<md-button @click="newElement('encoder')" class="md-icon-button">
<md-icon>gradient</md-icon>
</md-button>
<md-button @click="newElement('ingest')" class="md-icon-button">
<md-icon>vertical_align_bottom</md-icon>
</md-button>
</md-speed-dial-content>
</md-speed-dial>
<element-adder @addElement="newElement"/>
</md-content>
</div>
@ -91,14 +21,21 @@
<script>
import SimpleFlowchart from '@/simple-flowchart';
import ElementAdder from "@/components/ElementAdder";
import WorkspaceDrawerContent from "@/components/WorkspaceDrawerContent";
import Toolbar from "@/components/Toolbar";
import {maxBy} from 'lodash';
export default {
name: 'Dashboard',
components: {SimpleFlowchart},
components: {
SimpleFlowchart,
ElementAdder,
WorkspaceDrawerContent,
Toolbar
},
data: () => ({
showNavigation: false,
showNewElementChooser: false,
showDrawer: false,
diagram: {
centerX: 0,
centerY: 0,
@ -136,9 +73,6 @@ export default {
}
}),
methods: {
performAddElement() {
this.showNewElementChooser = true;
},
newElement(type) {
this.showNewElementChooser = false;