pooted stuff into components
This commit is contained in:
parent
6c934187e3
commit
98df1eb97d
70
src/components/ElementAdder.vue
Normal file
70
src/components/ElementAdder.vue
Normal 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
51
src/components/Toolbar.vue
Normal 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
32
src/components/WorkspaceDrawerContent.vue
Normal 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>
|
||||||
@ -1,88 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="page-container md-layout-column" id="dashboard-container">
|
<div class="page-container md-layout-column" id="dashboard-container">
|
||||||
|
|
||||||
<md-dialog :md-active.sync="showNewElementChooser">
|
<!-- toolbar -->
|
||||||
<md-dialog-title>Select the type of the new element</md-dialog-title>
|
<toolbar @showDrawerClicked="showDrawer = true"/>
|
||||||
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<!-- drawer -->
|
||||||
|
<md-drawer :md-active.sync="showDrawer" md-swipeable>
|
||||||
|
<workspace-drawer-content/>
|
||||||
</md-drawer>
|
</md-drawer>
|
||||||
|
|
||||||
|
<!-- workspace -->
|
||||||
<md-content id="diagram-container">
|
<md-content id="diagram-container">
|
||||||
<simple-flowchart :scene.sync="diagram"></simple-flowchart>
|
<simple-flowchart :scene.sync="diagram"></simple-flowchart>
|
||||||
|
<element-adder @addElement="newElement"/>
|
||||||
<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>
|
|
||||||
|
|
||||||
</md-content>
|
</md-content>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -91,14 +21,21 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
import SimpleFlowchart from '@/simple-flowchart';
|
import SimpleFlowchart from '@/simple-flowchart';
|
||||||
|
import ElementAdder from "@/components/ElementAdder";
|
||||||
|
import WorkspaceDrawerContent from "@/components/WorkspaceDrawerContent";
|
||||||
|
import Toolbar from "@/components/Toolbar";
|
||||||
import {maxBy} from 'lodash';
|
import {maxBy} from 'lodash';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Dashboard',
|
name: 'Dashboard',
|
||||||
components: {SimpleFlowchart},
|
components: {
|
||||||
|
SimpleFlowchart,
|
||||||
|
ElementAdder,
|
||||||
|
WorkspaceDrawerContent,
|
||||||
|
Toolbar
|
||||||
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
showNavigation: false,
|
showDrawer: false,
|
||||||
showNewElementChooser: false,
|
|
||||||
diagram: {
|
diagram: {
|
||||||
centerX: 0,
|
centerX: 0,
|
||||||
centerY: 0,
|
centerY: 0,
|
||||||
@ -136,9 +73,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
methods: {
|
methods: {
|
||||||
performAddElement() {
|
|
||||||
this.showNewElementChooser = true;
|
|
||||||
},
|
|
||||||
newElement(type) {
|
newElement(type) {
|
||||||
this.showNewElementChooser = false;
|
this.showNewElementChooser = false;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user