131 lines
2.7 KiB
Vue
131 lines
2.7 KiB
Vue
<template>
|
|
<div class="page-container md-layout-column" id="dashboard-container">
|
|
|
|
<!-- toolbar -->
|
|
<toolbar @showDrawerClicked="showDrawer = true" :processing="false" :model-changed="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>
|
|
<element-adder @addElement="newElement"/>
|
|
</md-content>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<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,
|
|
ElementAdder,
|
|
WorkspaceDrawerContent,
|
|
Toolbar
|
|
},
|
|
data: () => ({
|
|
showDrawer: 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: {
|
|
newElement(type) {
|
|
this.showNewElementChooser = false;
|
|
|
|
let newNode = {
|
|
x: 10,
|
|
y: 10,
|
|
type
|
|
}
|
|
|
|
switch (type) {
|
|
case "ingest":
|
|
newNode.data = {
|
|
"url": "https://videon.test.kmlabz.com/live"
|
|
}
|
|
break;
|
|
case "encoder":
|
|
newNode.data = {
|
|
"bitrate": 8000,
|
|
"width": 600,
|
|
"height": 800
|
|
}
|
|
break;
|
|
case "restreamer":
|
|
newNode.data = {
|
|
"url": "https://youtube.com/live",
|
|
"streamkey": "testkey"
|
|
}
|
|
break;
|
|
}
|
|
|
|
if (this.diagram.nodes.length > 0) {
|
|
const max_id = maxBy(this.diagram.nodes, 'id').id
|
|
|
|
newNode.id = max_id + 1;
|
|
} else {
|
|
newNode.id = 0;
|
|
}
|
|
|
|
this.diagram.nodes.push(newNode)
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#dashboard-container {
|
|
height: 100%;
|
|
}
|
|
|
|
#diagram-container {
|
|
height: calc(100% - 64px);
|
|
}
|
|
</style> |