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

120
src/components/HelloWorld.vue
View File

@@ -1,59 +1,81 @@
<template>
<div class="hello">
<h1>{{ $t('welcomeMsg') }}</h1>
<p>
{{ $t('guide') }}<br>
{{ $t('checkout') }}
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</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>
</ul>
<h3>{{ $t('links') }}</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>{{ $t('ecosystem') }}</h3>
<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://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>
<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') }}
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</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>
</ul>
<h3>{{ $t('links') }}</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>{{ $t('ecosystem') }}</h3>
<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://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">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {Component, Prop, Vue} from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
get authenticated() {
return this.$store.getters.isAuthenticated;
}
}
</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;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

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>