166 lines
3.7 KiB
Vue
166 lines
3.7 KiB
Vue
<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>
|
|
|
|
</md-drawer>
|
|
|
|
<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>
|
|
|
|
</md-content>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import SimpleFlowchart from '@/simple-flowchart';
|
|
|
|
|
|
export default {
|
|
name: 'Dashboard',
|
|
components: {SimpleFlowchart},
|
|
data: () => ({
|
|
showNavigation: false,
|
|
showNewElementChooser: false,
|
|
diagram: {
|
|
centerX: 0,
|
|
centerY: 0,
|
|
scale: 1,
|
|
nodes: [
|
|
{
|
|
id: 2,
|
|
x: 100,
|
|
y: 110,
|
|
type: 'ingest',
|
|
data: {"url": "rtmp://videon.test.kmlabz.com/test:6554"},
|
|
},
|
|
{
|
|
id: 4,
|
|
x: 357,
|
|
y: 80,
|
|
type: 'restreamer',
|
|
data: {"url": "rtmp://youtube.com/live/stream/ysos:55223", "streamkey": "asdjnao9gj9833tjkq389fjae9jf"},
|
|
},
|
|
{
|
|
id: 6,
|
|
x: 557,
|
|
y: 80,
|
|
type: 'encoder',
|
|
data: {"bitrate": 8000, "width": 600, "height": 800}
|
|
}
|
|
],
|
|
links: [
|
|
{
|
|
id: 1,
|
|
from: 2, // node id the link start
|
|
to: 4, // node id the link end
|
|
}
|
|
]
|
|
}
|
|
}),
|
|
methods: {
|
|
performAddElement() {
|
|
this.showNewElementChooser = true;
|
|
},
|
|
newElement(type) {
|
|
console.log(type);
|
|
this.showNewElementChooser = false;
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#dashboard-container {
|
|
height: 100%;
|
|
}
|
|
|
|
#diagram-container {
|
|
height: calc(100% - 64px);
|
|
}
|
|
|
|
#fab-holder {
|
|
position: absolute;
|
|
z-index: 5;
|
|
right: 2rem;
|
|
bottom: 2rem;
|
|
}
|
|
</style> |