From 6b4cf7f41cf41f68fb79e72bae15042c0ce0537d Mon Sep 17 00:00:00 2001
From: saber-nyan <saber-nyan@ya.ru>
Date: Sun, 28 Apr 2019 03:37:37 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D1=87=D1=82=D0=B8=20=D1=81=D0=B2?=
 =?UTF-8?q?=D0=B5=D1=80=D1=81=D1=82=D0=B0=D0=BB,=20=D0=BD=D0=B0=D0=BF?=
 =?UTF-8?q?=D0=B8=D1=81=D0=B0=D0=BB=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D1=83?=
 =?UTF-8?q?=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D1=8B=20=D1=80=D0=BE=D1=83?=
 =?UTF-8?q?=D1=82=D0=B5=D1=80=D0=B0=20=D0=B4=D0=BB=D1=8F=20=D1=81=D0=B5?=
 =?UTF-8?q?=D1=80=D0=B2=D0=B8=D1=81=D0=BE=D0=B2=20=D0=B8=20=D1=81=D1=82?=
 =?UTF-8?q?=D1=80=D0=B8=D0=BC=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                   | 33 ----------------
 src/components/Content.vue    |  4 +-
 src/components/CtfService.vue | 28 ++++++++++++++
 src/components/Navbar.vue     | 73 +++++++++++++++++++++++++++++++++++
 src/components/Sidebar.vue    | 48 ++++++++++++++++-------
 src/components/Stream.vue     | 26 +++++++++++++
 src/main.ts                   |  4 +-
 src/router.ts                 |  3 +-
 src/views/Home.vue            | 30 +++++++-------
 9 files changed, 184 insertions(+), 65 deletions(-)
 create mode 100644 src/components/CtfService.vue
 create mode 100644 src/components/Navbar.vue
 create mode 100644 src/components/Stream.vue

diff --git a/src/App.vue b/src/App.vue
index 9efff83..2b2a247 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,38 +1,5 @@
 <template>
 	<div id="app">
-		<!--    <div id="nav">-->
-		<!--      <router-link to="/">Home</router-link> |-->
-		<!--      <router-link to="/about">About</router-link>-->
-		<!--    </div>-->
-		<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-			<router-link to="/" class="navbar-brand">Packmate</router-link>
-			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
-					aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-				<span class="navbar-toggler-icon"></span>
-			</button>
-
-			<div class="collapse navbar-collapse" id="navbarSupportedContent">
-				<ul class="navbar-nav mr-auto">
-					<li class="nav-item active">
-						<a class="nav-link" href="#">1337 (L33T)</a>
-					</li>
-					<li class="nav-item">
-						<a class="nav-link" href="#">1241 (Shitty service)</a>
-					</li>
-					<li class="nav-item">
-						<button type="button" class="btn btn-link"><svg id="i-plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-							<path d="M16 2 L16 30 M2 16 L30 16"></path>
-						</svg></button>
-					</li>
-				</ul>
-				<div class="my-2 my-lg-0">
-					<button type="button" class="btn btn-link"><svg id="i-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-						<path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z" />
-						<circle cx="16" cy="16" r="4" />
-					</svg></button>
-				</div>
-			</div>
-		</nav>
 		<router-view/>
 	</div>
 </template>
diff --git a/src/components/Content.vue b/src/components/Content.vue
index 5344eca..7618a18 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -7,10 +7,12 @@
 </template>
 
 <script lang="ts">
-    import {Component, Vue} from "vue-property-decorator";
+    import {Component, Prop, Vue} from "vue-property-decorator";
 
     @Component
     export default class Content extends Vue {
+        @Prop() private servicePort?: string;
+        @Prop() private streamId?: string;
     }
 </script>
 
diff --git a/src/components/CtfService.vue b/src/components/CtfService.vue
new file mode 100644
index 0000000..ae08fa6
--- /dev/null
+++ b/src/components/CtfService.vue
@@ -0,0 +1,28 @@
+<template>
+	<li class="nav-item" :class="{ 'active': subIsActive('/' + port) }">
+		<router-link class="nav-link" :to="'/' + port">{{ name }} ({{ port }})</router-link>
+	</li>
+</template>
+
+<script lang="ts">
+    import {Component, Prop, Vue} from "vue-property-decorator";
+
+    @Component({
+        methods: {
+            subIsActive(input) {
+                const paths = Array.isArray(input) ? input : [input];
+                return paths.some(path => {
+                    return this.$route.path.indexOf(path) === 0; // current path starts with this path string
+                });
+            }
+        }
+    })
+    export default class CrfService extends Vue {
+        @Prop() private port!: number;
+        @Prop() private name!: string;
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..1201021
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,73 @@
+<template>
+
+	<!--    <div id="nav">-->
+	<!--      <router-link to="/">Home</router-link> |-->
+	<!--      <router-link to="/about">About</router-link>-->
+	<!--    </div>-->
+	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+		<router-link to="/" class="navbar-brand">Packmate</router-link>
+		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+				aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+
+		<div class="collapse navbar-collapse" id="navbarSupportedContent">
+			<ul class="navbar-nav mr-auto">
+				<!--					<li class="nav-item active">-->
+				<!--						<a class="nav-link" href="#">1337 (L33T)</a>-->
+				<!--					</li>-->
+				<!--					-->
+				<CtfService
+						v-for="service in ctfServices"
+						:key="service.port"
+						:port="service.port"
+						:name="service.name"></CtfService>
+
+				<li class="nav-item">
+					<button type="button" class="btn btn-link">
+						<svg id="i-plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16"
+							 fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round"
+							 stroke-width="2">
+							<path d="M16 2 L16 30 M2 16 L30 16"></path>
+						</svg>
+					</button>
+				</li>
+			</ul>
+			<div class="my-2 my-lg-0">
+				<button type="button" class="btn btn-link">
+					<svg id="i-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16"
+						 fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+						<path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z"/>
+						<circle cx="16" cy="16" r="4"/>
+					</svg>
+				</button>
+			</div>
+		</div>
+	</nav>
+</template>
+
+<script lang="ts">
+    import {Component, Vue} from "vue-property-decorator";
+    import CtfService from '@/components/CtfService.vue';
+
+    @Component({
+        data() {
+            return {
+                ctfServices: [
+                    {
+                        port: 1337,
+                        name: "ShittyService",
+                    },
+                ],
+            };
+        },
+        components: {CtfService}
+    })
+    export default class Navbar extends Vue {
+
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 566d335..9ddd11e 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -2,28 +2,48 @@
 	<nav class="col-md-2 d-none d-md-block bg-light sidebar">
 		<div class="sidebar-sticky">
 			<ul class="nav flex-column">
-				<li class="nav-item">
-					<a class="nav-link active" href="#">
-						#1<br/>
-						13:37:01
-					</a>
-				</li>
-				<li class="nav-item">
-					<a class="nav-link" href="#">
-						#2<br/>
-						12:28:02
-					</a>
-				</li>
+				<!--				<li class="nav-item">-->
+				<!--					<a class="nav-link active" href="#">-->
+				<!--						#1<br/>-->
+				<!--						13:37:01-->
+				<!--					</a>-->
+				<!--				</li>-->
+				<!--				<li class="nav-item">-->
+				<!--					<a class="nav-link" href="#">-->
+				<!--						#2<br/>-->
+				<!--						12:28:02-->
+				<!--					</a>-->
+				<!--				</li>-->
+				<Stream
+					v-for="stream in streams"
+					:key="stream.id"
+					:id="stream.id"
+					:time="stream.time"></Stream>
 			</ul>
 		</div>
 	</nav>
 </template>
 
 <script lang="ts">
-    import {Component, Vue} from "vue-property-decorator";
+    import {Component, Prop, Vue} from "vue-property-decorator";
+    import Stream from '@/components/Stream.vue';
 
-    @Component
+    @Component({
+        components: {Stream},
+        data() {
+            return {
+                streams: [
+                    {
+                        id: 111,
+                        time: 1556411080,
+                    },
+                ]
+            };
+        }
+    })
     export default class Sidebar extends Vue {
+        @Prop() private servicePort?: string;
+        @Prop() private streamId?: string;
     }
 </script>
 
diff --git a/src/components/Stream.vue b/src/components/Stream.vue
new file mode 100644
index 0000000..386a547
--- /dev/null
+++ b/src/components/Stream.vue
@@ -0,0 +1,26 @@
+<template>
+	<li class="nav-item">
+<!--		<a class="nav-link active" href="#">-->
+<!--			#1<br/>-->
+<!--			13:37:01-->
+<!--		</a>-->
+		<router-link class="nav-link" active-class="active" :to="'/' + $route.params.servicePort + '/' + id">
+			#{{id}}<br/>
+			{{time}}
+		</router-link>
+	</li>
+</template>
+
+<script lang="ts">
+    import {Component, Prop, Vue} from "vue-property-decorator";
+
+    @Component
+    export default class Stream extends Vue {
+        @Prop() private id!: number;
+        @Prop() private time!: number;
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/main.ts b/src/main.ts
index afd5024..a5206b6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,6 @@ import router from './router';
 Vue.config.productionTip = false;
 
 new Vue({
-  router,
-  render: (h) => h(App),
+    router,
+    render: (h) => h(App),
 }).$mount('#app');
diff --git a/src/router.ts b/src/router.ts
index e540d9a..be2cb85 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -7,9 +7,10 @@ Vue.use(Router);
 export default new Router({
   routes: [
     {
-      path: '/',
+      path: '/:servicePort?/:streamId?',
       name: 'home',
       component: Home,
+      props: true,
     },
     {
       path: '/about',
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b23c30e..15670b3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,28 +1,30 @@
 <template>
-	<!--  <div class="home">-->
-	<!--    <img alt="Vue logo" src="../assets/logo.png">-->
-	<!--    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>-->
-	<!--  </div>-->
-	<div class="container-fluid">
-		<div class="row">
-			<Sidebar/>
-			<Content/>
+	<div>
+		<Navbar></Navbar>
+		<div class="container-fluid">
+			<div class="row">
+				<Sidebar :servicePort="servicePort" :streamId="streamId"/>
+				<Content :servicePort="servicePort" :streamId="streamId"/>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts">
-    import {Component, Vue} from "vue-property-decorator";
-    import Sidebar from '@/components/Sidebar.vue';
-    import Content from '@/components/Content.vue';
+    import {Component, Prop, Vue} from "vue-property-decorator";
+    import Sidebar from "@/components/Sidebar.vue";
+    import Content from "@/components/Content.vue";
+    import Navbar from "@/components/Navbar.vue";
 
     @Component({
         components: {
-            // HelloWorld,
-			Sidebar,
-			Content,
+            Navbar,
+            Sidebar,
+            Content,
         },
     })
     export default class Home extends Vue {
+        @Prop() private servicePort?: string;
+        @Prop() private streamId?: string;
     }
 </script>