tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added recorder status component and other stuff

Browse Source
This commit is contained in:
Tobias Kurze
2019-10-31 16:11:53 +01:00
parent 5505e823c4
commit 5792af21a5
10 changed files with 4096 additions and 3877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7002
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
src/App.vue
View File

@@ -31,10 +31,10 @@
<b-nav-item v-if="authenticated" to="/logout">Logout</b-nav-item>
<b-nav-item v-else="authenticated" to="/login">Login</b-nav-item>
<b-nav-item :to="{name: 'rooms'}">{{ $t('Rooms') }}</b-nav-item>
<b-nav-item :to="{name: 'recorders'}">{{ $t('Recorders') }}</b-nav-item>
<b-nav-item :to="{name: 'commands'}">{{ $t('Commands') }}</b-nav-item>
<b-nav-item :to="{name: 'test'}">{{ $t('Test') }}</b-nav-item>
<b-nav-item v-if="authenticated" :to="{name: 'rooms'}">{{ $t('Rooms') }}</b-nav-item>
<b-nav-item v-if="authenticated" :to="{name: 'recorders'}">{{ $t('Recorders') }}</b-nav-item>
<b-nav-item v-if="authenticated" :to="{name: 'commands'}">{{ $t('Commands') }}</b-nav-item>
<b-nav-item :to="{name: 'test'}">Test</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->

32
src/components/HelloWorld.vue
View File

@@ -1,6 +1,16 @@
<template>
<div class="hello">
<div>
<b-alert show dismissible>Default Alert</b-alert>
<!--<img alt="Vue logo" src="../assets/logo.png">-->
<div v-if="authenticated">
<h2>Yeah, you are logged in!</h2>
</div>
<div v-else class="hello">
<h1>{{ $t('welcomeMsg') }}</h1>
<h3>{{msg}}</h3>
<p>Go to <router-link :to="{name: 'login'}">login page</router-link> to login!</p>
<p>
{{ $t('guide') }}<br>
{{ $t('checkout') }}
@@ -8,9 +18,12 @@
</p>
<h3>{{ $t('plugins') }}</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha" target="_blank" rel="noopener">unit-mocha</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank"
rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
target="_blank" rel="noopener">typescript</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha"
target="_blank" rel="noopener">unit-mocha</a></li>
</ul>
<h3>{{ $t('links') }}</h3>
<ul>
@@ -24,11 +37,13 @@
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank"
rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</div>
</template>
<script lang="ts">
@@ -37,6 +52,10 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
get authenticated() {
return this.$store.getters.isAuthenticated;
}
}
</script>
@@ -45,14 +64,17 @@ export default class HelloWorld extends Vue {
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}

1
src/components/Profile.vue
View File

@@ -129,7 +129,6 @@
this.$nextTick(() => {
window.setInterval(() => {
this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
}, 1000);

75
src/components/RecorderState.vue Normal file
View File

@@ -0,0 +1,75 @@
<template>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
:header="recorder.name"
v-bind:key="recorder.id">
<b-card-text>
<h5 class="card-title">
<strong>{{ $t('name') }}:&nbsp;{{recorder.name}}</strong>&nbsp
<router-link :to="{ name: 'recorders'}"> ({{$t('recorders')}}&nbsp
<font-awesome-icon icon="external-link-alt"/>
)
</router-link>
</h5>
</b-card-text>
<div slot="footer">
<small class="text-muted">
<p>{{ $t('created')}}: {{recorder.created_at | moment("dddd, MMMM Do YYYY")}}<br/>
{{ $t('last_time_modified')}}: {{recorder.last_time_modified | moment("dddd, MMMM Do YYYY")}}<br/>
</p>
</small>
</div>
</b-card>
</template>
<script>
export default {
props: ['recorder'],
data() {
return {
connectedWebsocket: false
}
},
mounted() {
this.$socket.client.on('connect', function(msg) {
console.log("We are connected!");
console.log(msg);
this.$socket.client.emit('request_recorder_state_'+ this.recorder.id, msg);
this.$socket.client.on('request_recorder_state_' + this.recorder.id, function(msg) {
//TODO: refresh state!
console.log(msg);
});
});
this.$log.info("mounted called");
if (!this.$socket.connected) {
this.connectWebsocket();
this.connectedWebsocket = true;
};
},
beforeDestroy() {
this.$log.info("beforeDestroy called");
if (this.connectedWebsocket) {
this.disconnectWebsocket();
}
},
methods: {
connectWebsocket() {
this.$socket.client.connect();
},
disconnectWebsocket() {
if (this.$socket.connected) {
this.$socket.client.disconnect();
}
}
},
}
</script>
<style scoped>
</style>

80
src/components/SelectRecorder.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div v-if="authenticated">
<div v-if="profile.favorite_recorders.length <=0">
<p>You haven't configured favorite recorders yet – click below to do so!</p>
</div>
<div v-else>
<p>Yeah, you already configured a favorite recorder :)</p>
<ul>
<li v-for="recorder in profile.favorite_recorders">{{recorder.name}}</li>
</ul>
</div>
<b-form>
<b-input-group>
<select class="form-control" v-model="favorite_recorder_id">
<option value="">No recorder selected</option>
<option v-for="recorder in recorders" v-bind:value="recorder.id">
{{ recorder.name }}
</option>
</select>
<b-input-group-append>
<b-button variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
</b-input-group>
</b-form>
</div>
<div v-else>
<p>You must sign in in order to select a recorder!</p>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
@Component
export default class SelectRecorder extends Vue {
@Prop() private msg!: string;
@Prop() private favorite_recorder_id!: string;
get authenticated() {
return this.$store.getters.isAuthenticated;
}
get profile() {
return this.$store.state.profile;
}
get recorders() {
return this.$store.state.recorders;
}
private mounted() {
this.$store.dispatch('loadProfile');
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

10
src/main.ts
View File

@@ -34,7 +34,7 @@ import {
faAt,
faUser,
faEnvelope,
faUserTag,
faUserTag, faExternalLinkAlt,
} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
@@ -48,7 +48,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
const isProduction = process.env.NODE_ENV === 'production';
library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt,
faUser, faEnvelope, faUserTag);
faUser, faEnvelope, faUserTag, faExternalLinkAlt);
Vue.component('font-awesome-icon', FontAwesomeIcon);
@@ -72,10 +72,8 @@ Vue.use(VueSweetalert2);
Vue.use(VeeValidate);
Vue.use(VueMoment);
const socket = io('ws://localhost:5000',);
console.log(socket.nsp);
// const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3});
const socket = io('ws://localhost:5443',{autoConnect: false, reconnectionAttempts: 3});
Vue.use(VueSocketIOExt, socket);

2
src/plugins/i18n.ts
View File

@@ -32,6 +32,8 @@ const messages = {
name: 'Name',
alternate_name: 'alternativer Name',
group: 'Gruppe',
groups: 'Gruppen',
permissions: 'Berechtigungen',
created: 'erstellt',
Comments: 'Kommentare',
Comment: 'Kommentar',

12
src/store.ts
View File

@@ -313,10 +313,20 @@ const getters = {
getLoginProviders(sState: any) {
return sState.loginProviders;
},
getUserName(sState: any) {
if (sState.profile == null || Object.keys(sState.profile).length === 0) {
return '';
}
if (sState.profile.nickname) {
return sState.profile.nickname;
}
return sState.profile.first_name + ' ' + sState.profile.last_name;
},
// this is probably wrong!!
hasAccessRight(sState: any) {
(requested_permission: string) => {
return sState.profile.effective_permissions.find((permission: any) => {
permission.name === requested_permission
permission.name === requested_permission;
});
};
},

43
src/views/Home.vue
View File

@@ -1,9 +1,26 @@
<template>
<div class="home">
<b-alert show>Default Alert</b-alert>
<div class="container">
<section class="section">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<HelloWorld v-if="!authenticated" msg="you are not authenticated!"/>
<div v-else>
<h1>Welcome <span v-if="profile.last_seen!=null">back</span> {{$store.getters.getUserName}}! <span
v-if="profile.last_seen!=null">(Last seen: {{profile.last_seen | moment("dddd, MMMM Do YYYY")}})</span>
</h1>
<SelectRecorder/>
<div v-if="profile.favorite_recorders.length >0">
<ul>
<li v-for="recorder in profile.favorite_recorders">{{recorder.name}}</li>
</ul>
<RecorderState v-for="recorder in profile.favorite_recorders" :recorder="recorder"/>
</div>
</div>
</section>
</div>
</div>
</template>
@@ -11,17 +28,33 @@
import {Component, Vue} from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import i18n from '@/plugins/i18n';
import SelectRecorder from '@/components/SelectRecorder.vue';
import RecorderState from '@/components/RecorderState.vue';
@Component({
components: {
RecorderState,
SelectRecorder,
HelloWorld,
},
})
export default class Home extends Vue {
public data() {
return {
return {};
}
};
mounted() {
if (this.profile == null || Object.keys(this.profile).length === 0) {
this.$store.dispatch('loadProfile');
}
}
get authenticated() {
return this.$store.getters.isAuthenticated;
}
get profile() {
return this.$store.state.profile;
}
}