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

added a lot of translations and fixed profile and navbar

Browse Source
This commit is contained in:
Tobias Kurze
2019-08-15 14:34:32 +02:00
parent ab4693acd7
commit 36c8e40622
9 changed files with 263 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/App.vue
View File

@@ -6,36 +6,53 @@
</b-alert>
<div id="nav">
<router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link>
|
<router-link to="/login">Login</router-link>
|
<router-link to="/profile">Profile</router-link>
|
<router-link :to="{ name: 'rooms' }">{{ $t('rooms') }}</router-link>
|
<router-link :to="{ name: 'recorders' }">{{ $t('recorders') }}</router-link>
|
<router-link :to="{ name: 'commands' }">{{ $t('commands') }}</router-link>
|
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" onclick="location.href='/admin'" class="btn btn-danger">Admin</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<router-link class="dropdown-item" :to="{ name: 'admin.user' }">{{ $t('user') }}</router-link>
<router-link class="dropdown-item" :to="{ name: 'admin.group' }">{{ $t('group') }}</router-link>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
|
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand to="/">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
LRC - <strong>L</strong>ecture <strong>R</strong>ecord <strong>C</strong>ontrol
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item to="/about">About</b-nav-item>
<b-nav-item 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-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown split split-to="admin" variant="outline-danger" :text="$t('admin')">
<b-dropdown-item to="user">{{ $t('user') }}</b-dropdown-item>
<b-dropdown-item to="group">{{ $t('group') }}</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item v-for="(lang, i) in langs"
v-bind:key="lang"
@click="$i18n.locale=lang">{{ lang }}</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template slot="button-content"><em>User</em></template>
<b-dropdown-item to="/profile">Profile</b-dropdown-item>
<b-dropdown-item to="/logout">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<span>({{tokenValidity}})</span> |
<span>({{refreshTokenValidity}})</span>
</div>
@@ -59,6 +76,7 @@
refreshTokenValidity: -1,
showAlert: true,
alertMessage: 'NO MESSAGE PROVIDED',
langs: ['de', 'en', 'es'],
};
},
methods: {
@@ -81,6 +99,9 @@
this.tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);
this.refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);
// this.$log.debug(this.$store.state);
if (this.tokenValidity < 50 && this.refreshTokenValidity > 30) {
this.$store.dispatch('refreshToken'); // renew access token
}
}, 1000);
});

2
src/components/Login.vue
View File

@@ -21,7 +21,7 @@
</li>
</ul>
<button v-on:click="oidc_login">Login via OIDC</button>
<a href="/api/auth/oidc?redirect_url=/login">OIDC with redirect</a>
<a href="http://localhost:5443/api/auth/oidc?redirect_url=/login">OIDC with redirect</a>
</section>
<section class="section">
<div class="container">

34
src/components/Profile.vue
View File

@@ -18,12 +18,16 @@
<font-awesome-icon icon="pencil-alt"/></a>
</p>
<p v-if="profile.nickname"><strong>{{$t('nickname')}}:&nbsp</strong>{{profile.nickname}}</p>
<p v-if="!formEditField['nickname'] && profile.nickname"><font-awesome-icon v-b-tooltip.hover :title="$t('nickname')" icon="user-tag"/>&nbsp;{{profile.nickname}}
<a class="badge badge-pill badge-info"
@click="()=>{form.nickname=profile.nickname; formEditField['nickname']=true;}">
<font-awesome-icon icon="pencil-alt"/></a>
</p>
<b-input-group style="max-width: 50%;" v-else size="sm">
<b-form-input name="nickname"
v-model="form.nickname"
class="form-control" type="text"
:placeholder="$t('nickname') + '('+profile.nickname +')'"></b-form-input>
:placeholder="$t('set_your_nickname') + ' ('+profile.nickname +')'"></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('nickname')"
@click="updateProfile('nickname')"
@@ -43,6 +47,13 @@
<hr/>
<div>
<button class="lang-btn" v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)">
<flag :iso="entry.flag" v-bind:squared="false"/>
{{entry.title}}
</button>
</div>
<p class="title">Token validity ({{tokenValidity}})</p>
<p class="title">Refresh token validity ({{refreshTokenValidity}})</p>
<p class="title">access_token ({{access_token}})</p>
@@ -68,6 +79,12 @@
errorMsg: '',
tokenValidity: -1,
refreshTokenValidity: -1,
formEditField: {},
languages: [
{flag: 'us', language: 'en', title: 'English'},
{flag: 'es', language: 'es', title: 'Español'},
{flag: 'de', language: 'de', title: 'Deutsch'},
],
form: {
first_name: '',
last_name: '',
@@ -83,17 +100,22 @@
},
updateProfile(fieldName) {
this.$parent.$data.isLoading = true;
this.$set(this.formEditField, fieldName, false);
const data = {};
data[fieldName] = this.form[fieldName];
this.$log.debug(this.form);
userRepository.updateProfile(data)
.then(() => {
this.$store.dispatch('loadRecorders')
this.$store.dispatch('loadProfile')
.then(() => {
this.$parent.$data.isLoading = false;
});
});
},
changeLocale(locale) {
this.$i18n.locale = locale;
// Vue.$moment.locale(locale);
}
},
mounted() {
this.$log.debug('Profile: mounting...');
@@ -131,4 +153,10 @@
color: red;
font-weight: bold;
}
.lang-btn {
padding: 15px;
border: 2px solid green;
font-size: 18px;
margin: 15px;
}
</style>

43
src/components/Recorders.vue
View File

@@ -4,9 +4,9 @@
<section class="section">
<h1 class="title">{{ $t('Manage recorders') }}</h1>
<h1 class="title">{{ $t('Manage_recorders') }}</h1>
<p class="lead">
{{ $t('List, create and delete') }} <strong>{{ $t('recorders') }}</strong> and {{ $t('recordermodels')
{{ $t('List_create_and_delete') }} <strong>{{ $t('recorders') }}</strong> {{$t('and')}} {{ $t('recorder_models')
}}
</p>
<br/>
@@ -15,9 +15,9 @@
<b-tab title="Recorder list" active>
<template slot="title">
<font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="circle"/>
<strong>Recorder</strong>&nbsp;list
<strong>{{$t('Recorders')}}</strong>&nbsp;{{$t('list')}}
</template>
<p>{{ $t('There are')}}&nbsp;{{recorders.length}}&nbsp;{{ $t('recorders defined')}}:</p>
<p>{{ $tc('recorders_defined', recorders.length, {num: recorders.length})}}:</p>
<b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
v-for="(recorder) in recorders"
@@ -307,11 +307,12 @@
<hr/>
<strong>{{ $t('Virtual commands') }}:</strong>&nbsp;
<strong>{{ $t('virtual_commands') }}:</strong>&nbsp;
<b-list-group v-if="recorder.virtual_commands.length"
style="max-height: 400px; overflow-y:scroll;">
<b-list-group-item v-for="command in recorder.virtual_commands">
<b-list-group-item v-for="command in recorder.virtual_commands"
v-bind:key="command.id">
{{command.name}}
</b-list-group-item>
@@ -345,7 +346,7 @@
<strong>{{ $t('Recorder') }}</strong>
</template>
<b-card-text>
<p>{{ $t('Create a new recorder')}}:</p>
<p>{{ $t('Create_a_new_recorder')}}:</p>
<!-- form starts here -->
<form v-on:submit.prevent="saveRecorder()">
<section class="form">
@@ -357,7 +358,7 @@
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
class="form-control" type="text" placeholder="Recorder name"
class="form-control" type="text" :placeholder="$t('Recorder_name')"
required>
</div>
<p class="col-sm-4" v-show="errors.has('name')">
@@ -370,7 +371,7 @@
<label class="label col-sm-2 col-form-label">{{ $t('description') }}</label>
<div class="col-sm-6">
<textarea class="textarea form-control"
placeholder="Comments, remarks, notes, etc."
:placeholder="$t('Comments') +', ' + $t('notes') + ', etc.'"
v-model="form.description"></textarea>
</div>
</div>
@@ -398,7 +399,7 @@
v-validate="'ip'"
v-model="form.ip"
v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}"
class="form-control" type="text" placeholder="Recorder IP">
class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ip')">
</div>
<p class="col-sm-4" v-show="errors.has('ip')">
{{ errors.first('ip') }}
@@ -412,7 +413,7 @@
v-validate="'ip:6'"
v-model="form.ip6"
v-bind:class="{'is-danger': errors.has('ip6'), 'is-invalid': errors.has('ip6')}"
class="form-control" type="text" placeholder="Recorder IPv6">
class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ipv6')">
</div>
<p class="col-sm-4" v-show="errors.has('ip6')">
{{ errors.first('ip6') }}
@@ -450,10 +451,10 @@
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('recorder_model') }}</label>
<label class="label col-sm-2 col-form-label">{{ $t('Model') }}</label>
<div class="col-sm-6">
<select class="form-control" v-model="form.recorder_model_id">
<option disabled value="">No recorder_model selected</option>
<option disabled value="">{{$t('No_recorder_model_selected')}}</option>
<option v-for="recorderModel in recorderModels"
v-bind:value="recorderModel.id">
{{ recorderModel.name }}
@@ -484,7 +485,7 @@
>
</div>
<p class="col-sm-4">
{{ $t('username') }} {{$t('may be left blank (-> recorder model)')}}
{{$t('may_be_left_blank')}} (-> {{$t('Model')}})
</p>
</div>
@@ -498,7 +499,7 @@
>
</div>
<p class="col-sm-4">
{{ $t('password') }} {{$t('may be left blank (-> recorder model)')}}
{{$t('may_be_left_blank')}} (-> {{$t('Model')}})
</p>
</div>
@@ -520,10 +521,10 @@
</b-tab>
<b-tab title="Recorder model list">
<template slot="title">
<font-awesome-icon icon="list"/>&nbsp;Recorder&nbsp;<font-awesome-icon icon="scroll"/>
<strong>Model</strong>&nbsp;<i>list</i>
<font-awesome-icon icon="list"/>&nbsp;{{$t('Recorder')}}&nbsp;<font-awesome-icon icon="scroll"/>
<strong>{{$t('Model')}}</strong>&nbsp;<i>{{$t('list')}}</i>
</template>
<p>{{ $t('There are')}}&nbsp;{{recorderModels.length}}&nbsp;{{ $t('recorder models defined')}}:</p>
<p>{{ $tc('recorder_models_defined', recorderModels.length, {num: recorderModels.length} ) }}:</p>
<b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;"
v-for="(recorderModel) in recorderModels"
@@ -558,10 +559,12 @@
<hr/>
<b-list-group style="max-height: 400px; overflow-y:scroll;">
<strong>Recorder Model {{ $t('Commands') }}:</strong>&nbsp;
<b-list-group-item v-for="command in recorderModel.commands">
<strong>Recorder Model {{ $t('commands') }}:</strong>&nbsp;
<b-list-group-item v-for="command in recorderModel.commands"
v-bind:key="command.id">
{{command.name}}
<b-badge v-for="(a_type, arg) in command.parameters"
v-bind:key="arg"
v-if="command.parameters !== null" style="margin-right: 10px;">
<small>{{arg}}:&nbsp;{{a_type}}</small>
</b-badge>

13
src/components/Rooms.vue
View File

@@ -3,9 +3,9 @@
<section class="section">
<h1 class="title">{{ $t('Manage rooms') }}</h1>
<h1 class="title">{{ $t('Manage_rooms') }}</h1>
<p class="lead">
{{ $t('List, create and delete') }} <strong>{{ $t('rooms') }}</strong>
{{ $t('List_create_and_delete') }} <strong>{{ $t('rooms') }}</strong>
</p>
<br/>
@@ -15,7 +15,7 @@
<font-awesome-icon icon="list"/>&nbsp;<font-awesome-icon icon="door-open"/>
<strong>Room</strong>&nbsp;<i>list</i>
</template>
<p>{{ $t('There are')}}&nbsp;{{rooms.length}}&nbsp;{{ $t('rooms defined')}}:</p>
<p>{{ $tc('rooms_defined', rooms.length, {num: rooms.length})}}:</p>
<b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms"
:header="room.name + ' (' +room.building_number+ ')'" v-bind:key="room.id">
@@ -61,7 +61,7 @@
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('building_number'), 'is-invalid': errors.has('building_number')}"
class="form-control" type="text"
:placeholder="'Building number ('+room.building_number +')'"
:placeholder="$t('Building_number') +'('+room.building_number +')'"
required></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('building_number')"
@@ -231,7 +231,7 @@
<strong>{{$t('Room')}}</strong>
</template>
<b-card-text>
<p>{{ $t('Create a new room')}}:</p>
<p>{{ $t('Create_a_new_room')}}:</p>
<!-- form starts here -->
<form v-on:submit.prevent="saveRoom()">
<section class="form">
@@ -276,7 +276,8 @@
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
<div class="col-sm-6">
<textarea class="textarea form-control" placeholder="Comments, remarks, notes, etc."
<textarea class="textarea form-control"
:placeholder="$t('Comments') +', ' + $t('notes') + ', etc.'"
v-model="form.comment"></textarea>
</div>
</div>

3
src/main.ts
View File

@@ -32,6 +32,7 @@ import {
faAt,
faUser,
faEnvelope,
faUserTag,
} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
@@ -45,7 +46,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);
faUser, faEnvelope, faUserTag);
Vue.component('font-awesome-icon', FontAwesomeIcon);

143
src/plugins/i18n.ts
View File

@@ -5,6 +5,81 @@ Vue.use(VueI18n);
const messages = {
de: {
welcomeMsg: 'Willkommen zu deiner Vue.js + TypeScript App',
guide: 'For a guide and recipes on how to configure / customize this project,',
checkout: 'check out the',
plugins: 'Installed CLI Plugins',
links: 'Essential Links',
ecosystem: 'Ecosystem',
Building_number: 'Gebäudenummer',
building_number: 'Gebäude #',
building_name: 'Gebäude',
Manage_rooms: 'Räume verwalten',
Manage_recorders: 'Aufzeichnungsgeräte verwalten',
Create_a_new_recorder: 'Ein neues Aufzeichnungsgerät anlegen',
Create_a_new_room: 'Einen neuen Raum anlegen',
Recorder_name: 'Name des Aufzeichnungsgerätes',
Recorder: 'Aufzeichnungsgerät',
recorder: 'Aufzeichnungsgerät',
Recorders: 'Aufzeichnungsgeräte',
recorders: 'Aufzeichnungsgeräte',
command: 'Befehl',
commands: 'Befehle',
Commands: 'Befehle',
virtual_commands: 'virtuelle Befehle',
admin: 'Admin',
name: 'Name',
alternate_name: 'alternativer Name',
group: 'Gruppe',
created: 'erstellt',
Comments: 'Kommentare',
Comment: 'Kommentar',
comment: 'Kommentar',
Room: 'Raum',
room: 'Raum',
Rooms: 'Räume',
rooms: 'Räume',
Room_number: 'Raumnummer',
room_number: 'Raumnummer',
user: 'Benutzer',
username: 'Benutzername',
password: 'Passwort',
first_name: 'Vorname',
last_name: 'Nachname',
nickname: 'Spitzname',
set_your_nickname: 'Lege deinen Spitznamen fest',
notes: 'Anmerkungen',
List_create_and_delete: 'Auflisten, anlegen und löschen von',
no_recorder_defined: 'Kein Aufzeichnungsgerät definiert',
No_recorder_selected: 'Kein Aufzeichnungsgerät ausgewählt',
No_recorder_model_selected: 'Kein Aufzeichnungsgerätemodell ausgewählt',
Model: 'Modell',
list: 'Liste',
recorder_model: 'Aufzeichnungsgerätemodell',
recorder_models: 'Aufzeichnungsgerätemodellen',
description: 'Beschreibung',
network_name: 'Netzwerkname',
ip: 'IP (v4)',
ipv6: 'IP v6',
may_be_left_blank: 'kann ggf. leer gelassen werden',
rooms_defined: 'Es ist kein Raum definiert! | Ein Raum ist definiert | {num} Räume sind definiert',
recorders_defined: 'Es ist kein Aufzeichnungsgerät definiert! | Ein Aufzeichnungsgerät ist definiert | ' +
'{num} Aufzeichnungsgeräte sind definiert',
recorder_models_defined: 'Es ist kein Aufzeichnungsgerätemodell definiert | ' +
'Ein Aufzeichnungsgerätemodell ist definiert' +
' | {num} Aufzeichnungsgerätemodelle sind definiert',
no: 'nein',
yes: 'ja',
create: 'anlegen',
and: 'und',
number: 'Nummer',
delete: 'löschen',
requires_username: 'Nutzername benötigt',
requires_password: 'Passwort benötigt',
ssh_port: 'SSH Port',
telnet_port: 'Telnet Port',
},
en: {
welcomeMsg: 'Welcome to Your Vue.js + TypeScript App',
guide: 'For a guide and recipes on how to configure / customize this project,',
@@ -12,8 +87,72 @@ const messages = {
plugins: 'Installed CLI Plugins',
links: 'Essential Links',
ecosystem: 'Ecosystem',
Building_number: 'Building number',
building_number: 'Building #',
building_name: 'Building',
Manage_rooms: 'Manage rooms',
Manage_recorders: 'Manage recorders',
Create_a_new_recorder: 'Create a new recorder',
Create_a_new_room: 'Create a new room',
Recorder_name: 'Recorder name',
Recorder: 'Recorder',
recorder: 'recorder',
Recorders: 'Recorders',
recorders: 'recorders',
command: 'command',
commands: 'commands',
Commands: 'Commands',
virtual_commands: 'virtual commands',
admin: 'admin',
name: 'name',
alternate_name: 'alternate name',
group: 'group',
created: 'created',
Comments: 'comments',
comments: 'comments',
comment: 'comment',
Room: 'room',
room: 'room',
Rooms: 'Rooms',
rooms: 'rooms',
Room_number: 'Room number',
room_number: 'room number',
user: 'user',
username: 'username',
password: 'password',
first_name: 'first name',
last_name: 'last name',
nickname: 'nickname',
set_your_nickname: 'Set your nickname',
notes: 'notes',
List_create_and_delete: 'List_create_and_delete',
no_recorder_defined: 'no recorder defined',
No_recorder_selected: 'No recorder selected',
No_recorder_model_selected: 'No recorder model selected',
Model: 'Model',
list: 'list',
recorder_model: 'recorder model',
recorder_models: 'recorder models',
description: 'description',
network_name: 'network name',
ip: 'IP (v4)',
ipv6: 'IP v6',
may_be_left_blank: 'may be left blank',
rooms_defined: 'No room defined yet! | There is one room defined | There are {num} rooms defined',
recorders_defined: 'No recorder defined yet! | There is one recorder defined | ' +
'There are {num} recorders defined',
recorder_models_defined: 'No recorder model defined yet! | There is one recorder model defined | ' +
'There are {num} recorder models defined',
no: 'no',
yes: 'yes',
and: 'and',
delete: 'delete',
create: 'create',
number: 'number',
requires_username: 'requires username',
requires_password: 'requires password',
ssh_port: 'SSH Port',
telnet_port: 'Telnet Port',
},
es: {
welcomeMsg: 'Bienvenido a tu aplicación Vue.js + TypeScript',
@@ -27,7 +166,7 @@ const messages = {
export default new VueI18n({
locale: 'en', // set locale
fallbackLocale: 'es', // set fallback locale
locale: 'de', // set locale
fallbackLocale: 'en', // set fallback locale
messages, // set locale messages
});

25
src/views/Home.vue
View File

@@ -1,12 +1,7 @@
<template>
<div class="home">
<b-alert show>Default Alert</b-alert>
<div>
<button class="lang-btn" v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)">
<flag :iso="entry.flag" v-bind:squared="false"/>
{{entry.title}}
</button>
</div>
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
@@ -25,26 +20,14 @@
export default class Home extends Vue {
public data() {
return {
languages: [
{flag: 'us', language: 'en', title: 'English'},
{flag: 'es', language: 'es', title: 'Español'},
{flag: 'de', language: 'de', title: 'Deutsch'},
],
};
}
public changeLocale(locale: string): void {
i18n.locale = locale;
// Vue.$moment.locale(locale);
}
}
</script>
<style>
.lang-btn {
padding: 15px;
border: 2px solid green;
font-size: 18px;
margin: 15px;
}
</style>

2
src/views/NotFound.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<p>404 - Not Found</p>
<p>404 - Not Found -> have you meant... blabla (GT)</p>
</div>
</template>