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

changed a lot regarding rec state, etc.

Browse Source
This commit is contained in:
Tobias Kurze
2019-12-03 16:05:15 +01:00
parent 39e7bbd098
commit 6b7b9f8f09
13 changed files with 3758 additions and 3757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7401
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -13,11 +13,11 @@
"@fortawesome/free-solid-svg-icons": "^5.8.1", "@fortawesome/free-solid-svg-icons": "^5.8.1",
"@fortawesome/vue-fontawesome": "^0.1.6", "@fortawesome/vue-fontawesome": "^0.1.6",
"@vue/cli": "^3.6.3", "@vue/cli": "^3.6.3",
"axios": "^0.18.0", "axios": "^0.18.1",
"bootstrap": "^4.3.1", "bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.15", "bootstrap-vue": "^2.0.0-rc.15",
"i": "^0.3.6", "i": "^0.3.6",
"jquery": "^3.3.1", "jquery": "^3.4.1",
"js-cookie": "^2.2.0", "js-cookie": "^2.2.0",
"node-sass": "^4.13.0", "node-sass": "^4.13.0",
"npm": "^6.13.1", "npm": "^6.13.1",

12
src/App.vue
View File

@@ -118,7 +118,7 @@
}, },
refreshToken() { refreshToken() {
this.$store.dispatch('refreshToken'); this.$store.dispatch('refreshToken');
} },
}, },
mounted() { mounted() {
EventBus.$on('failedLoadingRecorders', (msg) => { EventBus.$on('failedLoadingRecorders', (msg) => {
@@ -132,11 +132,11 @@
}); });
this.$nextTick(() => { this.$nextTick(() => {
window.setInterval(() => { window.setInterval(() => {
//this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token)); // this.$log.debug(getRemainingJwtValiditySeconds(this.$store.state.access_token));
let tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token); const tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
//this.tokenValidity = this.tokenValidity.format('mm:ss'); // this.tokenValidity = this.tokenValidity.format('mm:ss');
let refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token); const refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
// this.$log.debug(this.$store.state); // this.$log.debug(this.$store.state);
if (tokenValidity < 50 && refreshTokenValidity > 30 && this.autoRenewSession && !this.refreshFailed) { if (tokenValidity < 50 && refreshTokenValidity > 30 && this.autoRenewSession && !this.refreshFailed) {
@@ -170,7 +170,7 @@
profile() { profile() {
return this.$store.state.profile; return this.$store.state.profile;
}, },
} },
}; };
</script> </script>

4
src/components/Login.vue
View File

@@ -120,7 +120,6 @@
this.redirectTarget = this.$route.query.redirectionTarget; this.redirectTarget = this.$route.query.redirectionTarget;
} }
this.redirect_interval = window.setInterval(() => { this.redirect_interval = window.setInterval(() => {
console.log(this.redirectTime);
this.redirectTime = this.redirectTime - 1; this.redirectTime = this.redirectTime - 1;
if (this.redirectTime < 0) { if (this.redirectTime < 0) {
clearInterval(this.redirect_interval); clearInterval(this.redirect_interval);
@@ -141,8 +140,7 @@
}, },
authenticated() { authenticated() {
return this.$store.getters.isAuthenticated; return this.$store.getters.isAuthenticated;
} },
}, },
}; };
</script> </script>

2
src/components/Profile.vue
View File

@@ -119,7 +119,7 @@
changeLocale(locale) { changeLocale(locale) {
this.$i18n.locale = locale; this.$i18n.locale = locale;
// Vue.$moment.locale(locale); // Vue.$moment.locale(locale);
} },
}, },
mounted() { mounted() {
this.$log.debug('Profile: mounting...'); this.$log.debug('Profile: mounting...');

23
src/components/RecorderState.vue
View File

@@ -29,23 +29,24 @@
props: ['recorder'], props: ['recorder'],
data() { data() {
return { return {
connectedWebsocket: false connectedWebsocket: false,
} };
}, },
mounted() { mounted() {
this.$socket.client.on('connect', function(msg) { this.$socket.client.on('connect', function(msg) {
this.$log.debug("We are connected!"); this.$log.debug('We are connected!');
this.$log.debug(msg); this.$log.debug(msg);
this.$socket.client.emit('request_recorder_state_'+ this.recorder.id, msg); this.$socket.client.emit('request_recorder_state_' + this.recorder.id, msg);
this.$socket.client.on('request_recorder_state_' + this.recorder.id, function(msg) { // this.$socket.client.on('request_recorder_state_' + this.recorder.id, function(msg) { # non arrow function might be necessary!
//TODO: refresh state! this.$socket.client.on('request_recorder_state_' + this.recorder.id, (msg) => {
console.log(msg); // TODO: refresh state!
this.$log.debug(msg);
}); });
}); });
this.$log.info("mounted called"); this.$log.info('mounted called');
if (!this.$socket.connected) { if (!this.$socket.connected) {
this.$log.info("connecting websocket..."); this.$log.info('connecting websocket...');
this.connectWebsocket(); this.connectWebsocket();
this.connectedWebsocket = true; this.connectedWebsocket = true;
} }
@@ -53,7 +54,7 @@
}, },
beforeDestroy() { beforeDestroy() {
this.$log.info("beforeDestroy called"); this.$log.info('beforeDestroy called');
if (this.connectedWebsocket) { if (this.connectedWebsocket) {
this.disconnectWebsocket(); this.disconnectWebsocket();
} }
@@ -70,7 +71,7 @@
} }
}, },
}, },
} };
</script> </script>
<style scoped> <style scoped>

22
src/components/Recorders.vue
View File

@@ -240,9 +240,10 @@
description="Set to offline / maintenance mode." description="Set to offline / maintenance mode."
label-for="offline" label-for="offline"
:label="$t('offline')"> :label="$t('offline')">
<b-form-checkbox id="offline" <b-form-checkbox :id="'offline' + recorder.id"
v-model="form.offline" name="check-button" switch> v-model="recorder.offline" name="check-button_offline" switch
<b>({{$t('Offline')}}: {{ form.offline }})</b> @input="()=>{initRecorderUpdate(recorder, 'offline'); updateRecorder(recorder.id, 'offline')}">
<b>({{$t('Offline')}}: {{ recorder.offline }})</b>
</b-form-checkbox> </b-form-checkbox>
</b-form-group> </b-form-group>
@@ -251,10 +252,10 @@
description="Lock recorder: No changes can be made." description="Lock recorder: No changes can be made."
label-for="locked" label-for="locked"
:label="$t('locked')"> :label="$t('locked')">
<b-form-checkbox id="locked" <b-form-checkbox :id="'locked' + recorder.id"
v-model="recorder.locked" name="check-button" switch v-model="recorder.locked" name="check-button_locked" switch
@change="()=>{initRecorderUpdate(recorder, 'locked'); updateRecorder(recorder.id, 'locked')}"> @input="()=>{initRecorderUpdate(recorder, 'locked'); updateRecorder(recorder.id, 'locked')}">
<b>({{$t('Locked')}}: {{ form.locked }})</b> <b>({{$t('Locked')}}: {{ recorder.locked }})</b>
</b-form-checkbox> </b-form-checkbox>
</b-form-group> </b-form-group>
@@ -662,17 +663,18 @@
}, },
methods: { methods: {
initRecorderUpdate(recorder, fieldName) { initRecorderUpdate(recorder, fieldName) {
this.$log.debug(recorder);
this.$log.debug(recorder[fieldName]); // THIS SHOULD BE TRUE, NOT FALSE!! grml this.$log.debug(recorder[fieldName]); // THIS SHOULD BE TRUE, NOT FALSE!! grml
this.$set(this.formEditField, recorder.id + '_' + fieldName, true); this.$set(this.formEditField, recorder.id + '_' + fieldName, true);
this.$set(this.updateValues, recorder.id + '_' + fieldName, recorder[fieldName]); this.$set(this.updateValues, recorder.id + '_' + fieldName, recorder[fieldName]);
this.$log.debug(this.updateValues);
}, },
updateRecorder(id, fieldName) { updateRecorder(id, fieldName) {
this.$log.debug(id);
this.$log.debug(fieldName);
this.$parent.$data.isLoading = true; this.$parent.$data.isLoading = true;
const data = {}; const data = {};
this.$log.debug(this.updateValues); this.$log.debug(this.updateValues[id + '_' + fieldName]);
data[fieldName] = this.updateValues[id + '_' + fieldName]; data[fieldName] = this.updateValues[id + '_' + fieldName];
this.$log.debug(data);
recorderRepository.updateRecorder(id, data) recorderRepository.updateRecorder(id, data)
.then(() => { .then(() => {
this.$store.dispatch('loadRecorders') this.$store.dispatch('loadRecorders')

8
src/components/Rooms.vue
View File

@@ -455,13 +455,13 @@
}, },
rooms() { rooms() {
if(this.onlyShowRoomsWithRecorder){ if(this.onlyShowRoomsWithRecorder){
return this.$store.state.rooms.filter(item => { return this.$store.state.rooms.filter((item) => {
return item.recorder return item.recorder;
}); });
} }
else if(this.onlyShowRoomsWithoutRecorder){ else if(this.onlyShowRoomsWithoutRecorder){
return this.$store.state.rooms.filter(item => { return this.$store.state.rooms.filter((item) => {
return !item.recorder return !item.recorder;
}); });
} }
return this.$store.state.rooms; return this.$store.state.rooms;

10
src/components/SelectRecorder.vue
View File

@@ -2,7 +2,7 @@
<div v-if="authenticated"> <div v-if="authenticated">
<b-form> <b-form>
<b-input-group> <b-input-group>
<select class="form-control" v-model="favorite_recorder_id"> <select class="form-control" v-model="favoriteRecorderId">
<option value="">No recorder selected</option> <option value="">No recorder selected</option>
<option v-for="recorder in recorders" v-bind:value="recorder.id"> <option v-for="recorder in recorders" v-bind:value="recorder.id">
{{ recorder.name }} {{ recorder.name }}
@@ -29,7 +29,7 @@
@Component @Component
export default class SelectRecorder extends Vue { export default class SelectRecorder extends Vue {
@Prop() private msg!: string; @Prop() private msg!: string;
favorite_recorder_id = ''; private favoriteRecorderId = '';
get authenticated() { get authenticated() {
return this.$store.getters.isAuthenticated; return this.$store.getters.isAuthenticated;
@@ -39,13 +39,13 @@
return this.$store.state.recorders; return this.$store.state.recorders;
} }
mounted() { private mounted() {
this.$store.dispatch('loadProfile'); this.$store.dispatch('loadProfile');
this.$store.dispatch('loadRecorders'); this.$store.dispatch('loadRecorders');
} }
recorderSelected() { private recorderSelected() {
this.$emit('recorderSelected', {'recorder_id': this.favorite_recorder_id}); this.$emit('recorderSelected', {recorder_id: this.favoriteRecorderId});
} }
} }
</script> </script>

14
src/components/Test.vue
View File

@@ -44,7 +44,7 @@
// Vue.$moment.locale(locale); // Vue.$moment.locale(locale);
}, },
sendWsMessage(msg) { sendWsMessage(msg) {
console.log("sending msg: " + msg); this.$log.debug('sending msg: ' + msg);
this.$socket.client.emit('my_event', msg); this.$socket.client.emit('my_event', msg);
}, },
connectWebsocket() { connectWebsocket() {
@@ -62,18 +62,18 @@
}, },
mounted() { mounted() {
this.$socket.client.on('my_response', function(msg) { this.$socket.client.on('my_response', function(msg) {
console.log(msg); this.$log.debug(msg);
}); });
this.$socket.client.on('server_event', function(msg) { this.$socket.client.on('server_event', function(msg) {
console.log("get server_event:"); this.$log.debug('get server_event:');
console.log(msg); this.$log.debug(msg);
}); });
this.$socket.client.on('connect', function(msg) { this.$socket.client.on('connect', function(msg) {
console.log("We are connected!"); this.$log.debug('We are connected!');
console.log(msg); this.$log.debug(msg);
}); });
//this.$socket.$unsubscribe('even_name'); // this.$socket.$unsubscribe('even_name');
}, },
beforeDestroy() { beforeDestroy() {

2
src/main.ts
View File

@@ -76,7 +76,7 @@ Vue.use(VueMoment);
const socket = io('ws://localhost:5443', { const socket = io('ws://localhost:5443', {
autoConnect: false, autoConnect: false,
reconnectionAttempts: 3, reconnectionAttempts: 3,
query: {jwt: store.state.access_token} query: {jwt: store.state.access_token},
}); });
Vue.use(VueSocketIOExt, socket); Vue.use(VueSocketIOExt, socket);

8
src/store.ts
View File

@@ -186,14 +186,14 @@ const actions = {
}, },
logout(context: any, revokeRefreshToken: any) { logout(context: any, revokeRefreshToken: any) {
context.commit('setTokens', {tokens: {access_token: '', refresh_token: ''}}); context.commit('setTokens', {tokens: {access_token: '', refresh_token: ''}});
if(revokeRefreshToken){ if (revokeRefreshToken) {
return revokeRefreshKey(context.state.access_token) return revokeRefreshKey(context.state.access_token)
.catch((error) => { .catch((error) => {
Vue.$log.warn('Error Authenticating (Could not revoke refresh token): ', error); Vue.$log.warn('Error Authenticating (Could not revoke refresh token): ', error);
EventBus.$emit('failedRevokingRefreshToken', error); EventBus.$emit('failedRevokingRefreshToken', error);
}); });
} }
//this.clearAll(); // this.clearAll();
}, },
oidc_login(context: any, redirectionUrl: any) { oidc_login(context: any, redirectionUrl: any) {
// context.commit('setUserData', { userData }); // context.commit('setUserData', { userData });
@@ -342,9 +342,9 @@ const getters = {
}, },
// this is probably wrong!! // this is probably wrong!!
hasAccessRight(sState: any) { hasAccessRight(sState: any) {
(requested_permission: string) => { (requestedPermission: string) => {
return sState.profile.effective_permissions.find((permission: any) => { return sState.profile.effective_permissions.find((permission: any) => {
permission.name === requested_permission; permission.name === requestedPermission;
}); });
}; };
}, },

5
src/views/Home.vue
View File

@@ -14,7 +14,7 @@
<hr/> <hr/>
<p>{{$t('Favorite recorders:')}}</p> <p>{{$t('Favorite recorders:')}}</p>
<b-card-group deck> <b-card-group deck>
<RecorderState v-for="recorder in profile.favorite_recorders" :recorder="recorder"/> <RecorderState v-for="recorder in profile.favorite_recorders" :recorder="recorder" v-bind:key="recorder.id"/>
</b-card-group> </b-card-group>
</div> </div>
</div> </div>
@@ -57,8 +57,7 @@
} }
addFavoriteRecorderToProfile(recorder) { addFavoriteRecorderToProfile(recorder) {
console.log(recorder); userRepository.addFavoriteRecorder(recorder.recorder_id).then(() => {
userRepository.addFavoriteRecorder(recorder["recorder_id"]).then(() => {
this.$store.dispatch('loadProfile'); this.$store.dispatch('loadProfile');
}); });
} }