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

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">

36
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];
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>

45
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') }}
@@ -406,13 +407,13 @@
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('ip v6') }}</label>
<label class="label col-sm-2 col-form-label">{{ $t('ipv6') }}</label>
<div class="col-sm-6">
<input name="ip6"
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>