Показ выбранного паттерна, сохранение состояния при смене сервиса

This commit is contained in:
serega6531 2021-01-14 03:44:47 +03:00
parent 805b55aa44
commit ef7e8a40b1

View File

@ -1,7 +1,7 @@
<template> <template>
<nav class="navbar navbar-dark navbar-expand fixed-top bg-dark flex-md-nowrap p-0 shadow"> <nav class="navbar navbar-dark navbar-expand fixed-top bg-dark flex-md-nowrap p-0 shadow">
<span class="navbar-brand mb-0 ml-2">Packmate</span> <span class="navbar-brand mb-0 ml-2">Packmate</span>
<span class="navbar-text navbar-stats"> <span class="navbar-text navbar-nowrap">
{{ this.$store.state.currentStreamsCount }} {{ this.$store.state.currentStreamsCount }}
<u title="Streams per minute">SPM</u> <u title="Streams per minute">SPM</u>
, {{ packetsPerStream }} , {{ packetsPerStream }}
@ -10,13 +10,17 @@
<PatternsDropdown ref="patternsDropdown"/> <PatternsDropdown ref="patternsDropdown"/>
<span v-if="this.$route.query.pattern" class="navbar-text navbar-nowrap">
{{ selectedPatternText }}
</span>
<div class="navbar-collapse collapse"> <div class="navbar-collapse collapse">
<ul class="navbar-nav px-1 mr-auto"> <ul class="navbar-nav px-1 mr-auto">
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<router-link class="nav-link" to="/" exact>All</router-link> <router-link class="nav-link" :to="{name:'stream', params: {}, query: $route.query}" exact>All</router-link>
</li> </li>
<template v-for="service in this.$store.state.services"> <template v-for="service in this.$store.state.services">
<router-link :key="service.name" tag="li" class="nav-item text-nowrap edit-button" <router-link :key="service.port" tag="li" class="nav-item text-nowrap edit-button"
:to="{name:'stream', params: {servicePort: service.port}, query: $route.query}"> :to="{name:'stream', params: {servicePort: service.port}, query: $route.query}">
<a class="nav-link"> <a class="nav-link">
{{service.name}} #{{service.port}} {{service.name}} #{{service.port}}
@ -54,7 +58,7 @@
export default { export default {
name: 'Navbar', name: 'Navbar',
computed: { computed: {
packetsPerStream() { packetsPerStream: function() {
let streams = this.$store.state.currentStreamsCount; let streams = this.$store.state.currentStreamsCount;
let packets = this.$store.state.currentPacketsCount; let packets = this.$store.state.currentPacketsCount;
@ -65,6 +69,19 @@
return Math.round((pps + Number.EPSILON) * 10) / 10; return Math.round((pps + Number.EPSILON) * 10) / 10;
} }
}, },
selectedPatternText: function () {
let selected = this.$route.query.pattern;
if (typeof selected === 'string') {
selected = parseInt(selected);
}
let pattern = this.$store.state.patterns.find(o => o.id === selected);
if (pattern) {
return `[Selected: ${pattern.name}]`;
} else {
return '[Invalid pattern]';
}
},
}, },
data() { data() {
return { return {
@ -134,7 +151,7 @@
color: #FFF; color: #FFF;
} }
.navbar-stats { .navbar-nowrap {
white-space: nowrap; white-space: nowrap;
} }