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

started fixing veevalidate (migrating to v3)

Browse Source
This commit is contained in:
Tobias
2020-07-31 10:54:41 +02:00
parent d26cc1492d
commit f07716b946
7 changed files with 504 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -1157,6 +1157,14 @@
"@fortawesome/fontawesome-common-types": "^0.2.30" "@fortawesome/fontawesome-common-types": "^0.2.30"
} }
}, },
"@fortawesome/free-regular-svg-icons": {
"version": "5.14.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.14.0.tgz",
"integrity": "sha512-6LCFvjGSMPoUQbn3NVlgiG4CY5iIY8fOm+to/D6QS/GvdqhDt+xZklQeERdCvVRbnFa1ITc1rJHPRXqkX5wztQ==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.30"
}
},
"@fortawesome/free-solid-svg-icons": { "@fortawesome/free-solid-svg-icons": {
"version": "5.14.0", "version": "5.14.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz", "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz",

1
package.json
View File

@@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.30", "@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0", "@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-regular-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0", "@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/vue-fontawesome": "^0.1.10", "@fortawesome/vue-fontawesome": "^0.1.10",
"@vue/cli": "^4.4.6", "@vue/cli": "^4.4.6",

41
src/components/Profile.vue
View File

@@ -5,12 +5,25 @@
<div class="hero-body"> <div class="hero-body">
<div class="container has-text-centered"> <div class="container has-text-centered">
<div class="clearfix"> <div class="clearfix">
<b-img left style="margin-right: 20px;" src="https://picsum.photos/125/125/?image=58" <b-img left style="margin-right: 20px;" src="https://picsum.photos/160/160/?image=58"
alt="Left image"></b-img> alt="Left image"></b-img>
<h2 class="title" v-if="profile.nickname">{{ profile.nickname }}</h2> <h2 class="title" v-if="profile.nickname">
{{ profile.nickname }}
</h2>
<h2 class="title" v-else-if="profile.first_name"> <h2 class="title" v-else-if="profile.first_name">
{{ profile.first_name }}&nbsp;{{ profile.last_name }}</h2> {{ profile.first_name }}&nbsp;{{ profile.last_name }}
<h2 class="title" v-else>{{ profile.email }}</h2> </h2>
<h2 class="title" v-else>
{{ profile.email }}
</h2>
<p>
<font-awesome-icon icon="id-badge"/>
<span v-b-tooltip.hover :title="$t('external user')" v-if="profile.external_user">&nbsp;{{ profile.external_user_id }}&nbsp;
(<font-awesome-icon :icon="['fab', 'openid']" />)</span>
<span v-b-tooltip.hover :title="$t('internal user')" v-else>&nbsp;{{ profile.id }}&nbsp;
(<font-awesome-icon :icon="['far', 'dot-circle']"/>)</span>
</p>
<p> <p>
<font-awesome-icon icon="envelope"/>&nbsp;{{ profile.email }} <font-awesome-icon icon="envelope"/>&nbsp;{{ profile.email }}
@@ -26,28 +39,23 @@
<font-awesome-icon icon="pencil-alt"/> <font-awesome-icon icon="pencil-alt"/>
</a> </a>
</p> </p>
<b-input-group style="max-width: 50%;" v-else size="sm"> <ValidationProvider v-slot="v" rules="required" v-else>
<b-input-group style="max-width: 50%;" size="sm">
<b-form-input name="nickname" <b-form-input name="nickname"
v-model="form.nickname" v-model="form.nickname"
class="form-control" type="text" class="form-control" type="text"
:placeholder="$t('set_your_nickname') + ' ('+profile.nickname +')'"></b-form-input> :placeholder="$t('set_your_nickname') + ' ('+profile.nickname +')'"></b-form-input>
<b-input-group-append> <b-input-group-append>
<b-button :disabled="errors.has('nickname')" <b-button :disabled="v.errors.length > 0"
@click="updateProfile('nickname')" @click="updateProfile('nickname')"
variant="outline-success"> variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</ValidationProvider>
<p v-if="profile.external_user">
<span>&f19b;</span>
<font-awesome-icon :icon="['fab', 'openid']"/>&nbsp;{{ $t('external user') }}
</p>
<p v-else>
<font-awesome-icon icon="pencil-alt"/>&nbsp;{{ $t('internal user') }}
</p>
</div> </div>
@@ -89,8 +97,11 @@
<script> <script>
import {EventBus} from '@/utils'; import {EventBus} from '@/utils';
import {getRemainingJwtValiditySeconds} from '../utils'; import {getRemainingJwtValiditySeconds} from '@/utils';
import getRepository from '@/api/RepositoryFactory'; import getRepository from '@/api/RepositoryFactory';
//import { extend } from 'vee-validate';
import '@/validation';
const userRepository = getRepository('user'); const userRepository = getRepository('user');

118
src/components/Rooms.vue
View File

@@ -17,18 +17,19 @@
</template> </template>
<div class="mt-3"> <div class="mt-3">
<b-button-group> <b-button-group>
<b-button variant="success" @click="showAllRooms()">{{$t('All rooms')}}</b-button> <b-button variant="success" @click="showAllRooms()">{{ $t('All rooms') }}</b-button>
<b-button variant="info" @click="showRoomsWithRecorder()">{{$t('Rooms with recorders')}}</b-button> <b-button variant="info" @click="showRoomsWithRecorder()">{{ $t('Rooms with recorders') }}</b-button>
<b-button variant="warning" @click="showRoomsWithoutRecorder()">{{$t('Rooms without recorders')}}</b-button> <b-button variant="warning" @click="showRoomsWithoutRecorder()">{{ $t('Rooms without recorders') }}
</b-button>
</b-button-group> </b-button-group>
</div> </div>
<p>{{ $tc('rooms_defined', rooms.length, {num: rooms.length})}}:</p> <p>{{ $tc('rooms_defined', rooms.length, {num: rooms.length}) }}:</p>
<b-card-group deck> <b-card-group deck>
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms" <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"> :header="room.name + ' (' +room.building_number+ ')'" v-bind:key="room.id">
<b-card-text> <b-card-text>
<h5 class="card-title"><strong>{{ $t('name') }}</strong>:&nbsp; <h5 class="card-title"><strong>{{ $t('name') }}</strong>:&nbsp;
<span v-if="!formEditField[room.id+'_name']">{{room.name}}&nbsp; <span v-if="!formEditField[room.id+'_name']">{{ room.name }}&nbsp;
<a class="float-right badge badge-pill badge-primary"> <a class="float-right badge badge-pill badge-primary">
<font-awesome-icon <font-awesome-icon
@click="initRoomUpdate(room, 'name')" @click="initRoomUpdate(room, 'name')"
@@ -36,6 +37,7 @@
</a> </a>
</span> </span>
<b-input-group v-else> <b-input-group v-else>
<ValidationProvider v-slot="{ errors }">
<b-form-input :id="room.id+'_name'" name="name" <b-form-input :id="room.id+'_name'" name="name"
v-model="updateValues[room.id+'_name']" v-model="updateValues[room.id+'_name']"
v-validate="'required|min:3'" v-validate="'required|min:3'"
@@ -50,12 +52,13 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
</h5> </h5>
<p class="card-text"><strong>{{ $t('building_number') }}</strong>:&nbsp; <p class="card-text"><strong>{{ $t('building_number') }}</strong>:&nbsp;
<span v-if="!formEditField[room.id+'_building_number']">{{room.building_number}}&nbsp; <span v-if="!formEditField[room.id+'_building_number']">{{ room.building_number }}&nbsp;
<a class="float-right badge badge-pill badge-primary"> <a class="float-right badge badge-pill badge-primary">
<font-awesome-icon <font-awesome-icon
@click="initRoomUpdate(room, 'building_number')" @click="initRoomUpdate(room, 'building_number')"
@@ -63,6 +66,7 @@
</a> </a>
</span> </span>
<b-input-group v-else> <b-input-group v-else>
<ValidationProvider v-slot="{ errors }">
<b-form-input :id="room.id+'_building_number'" name="building_number" <b-form-input :id="room.id+'_building_number'" name="building_number"
v-model="updateValues[room.id+'_building_number']" v-model="updateValues[room.id+'_building_number']"
v-validate="'required|min:3'" v-validate="'required|min:3'"
@@ -77,10 +81,11 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
</p> </p>
<p class="card-text"><strong>{{ $t('building_name') }}</strong>:&nbsp; <p class="card-text"><strong>{{ $t('building_name') }}</strong>:&nbsp;
<span v-if="!formEditField[room.id+'_building_name']">{{room.building_name}}&nbsp; <span v-if="!formEditField[room.id+'_building_name']">{{ room.building_name }}&nbsp;
<a class="float-right badge badge-pill badge-primary"> <a class="float-right badge badge-pill badge-primary">
<font-awesome-icon <font-awesome-icon
@click="initRoomUpdate(room, 'building_name')" @click="initRoomUpdate(room, 'building_name')"
@@ -88,6 +93,7 @@
</a> </a>
</span> </span>
<b-input-group v-else> <b-input-group v-else>
<ValidationProvider v-slot="{ errors }">
<b-form-input :id="room.id+'_building_name'" name="building_name" <b-form-input :id="room.id+'_building_name'" name="building_name"
v-model="updateValues[room.id+'_building_name']" v-model="updateValues[room.id+'_building_name']"
v-validate="'required|min:3'" v-validate="'required|min:3'"
@@ -102,12 +108,13 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
</p> </p>
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&nbsp; <p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>&nbsp;
<span v-if="!formEditField[room.id+'_alternate_name']">{{room.alternate_name}}&nbsp; <span v-if="!formEditField[room.id+'_alternate_name']">{{ room.alternate_name }}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info">
<font-awesome-icon <font-awesome-icon
@click="initRoomUpdate(room, 'alternate_name')" @click="initRoomUpdate(room, 'alternate_name')"
@@ -115,6 +122,7 @@
</a> </a>
</span> </span>
<b-input-group v-else size="sm"> <b-input-group v-else size="sm">
<ValidationProvider v-slot="{ errors }">
<b-form-input name="alternate_name" <b-form-input name="alternate_name"
v-model="updateValues[room.id+'_alternate_name']" v-model="updateValues[room.id+'_alternate_name']"
class="form-control" type="text" class="form-control" type="text"
@@ -128,10 +136,11 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
</p> </p>
<p class="card-text"><strong>{{ $t('room_number') }}:</strong>&nbsp; <p class="card-text"><strong>{{ $t('room_number') }}:</strong>&nbsp;
<span v-if="!formEditField[room.id+'_number']">{{room.number}}&nbsp; <span v-if="!formEditField[room.id+'_number']">{{ room.number }}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info">
<font-awesome-icon <font-awesome-icon
@click="initRoomUpdate(room, 'number')" @click="initRoomUpdate(room, 'number')"
@@ -139,6 +148,7 @@
</a> </a>
</span> </span>
<b-input-group v-else size="sm"> <b-input-group v-else size="sm">
<ValidationProvider v-slot="{ errors }">
<b-form-input name="number" <b-form-input name="number"
v-model="updateValues[room.id+'_number']" v-model="updateValues[room.id+'_number']"
v-validate="'required|min:3'" v-validate="'required|min:3'"
@@ -155,11 +165,12 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
</p> </p>
<p class="card-text"> <p class="card-text">
<small><strong>{{ $t('comment') }}:</strong>&nbsp; <small><strong>{{ $t('comment') }}:</strong>&nbsp;
<span v-if="!formEditField[room.id+'_comment']">{{room.comment}}&nbsp; <span v-if="!formEditField[room.id+'_comment']">{{ room.comment }}&nbsp;
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info">
<font-awesome-icon <font-awesome-icon
@click="initRoomUpdate(room, 'comment')" @click="initRoomUpdate(room, 'comment')"
@@ -173,14 +184,17 @@
</small> </small>
</p> </p>
<hr/> <hr/>
<span v-if="!formEditField[room.id+'_recorder_id']">{{room.recorder_id}}&nbsp; <span v-if="!formEditField[room.id+'_recorder_id']">{{ room.recorder_id }}&nbsp;
<div v-if="room.recorder"> <div v-if="room.recorder">
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&nbsp; <p class="card-text"><strong>{{
({{room.recorder.ip}}) / ({{room.recorder.network_name}})</p> $t('Recorder')
}}:</strong>&nbsp;{{ room.recorder.name }}&nbsp;
({{ room.recorder.ip }}) / ({{ room.recorder.network_name }})</p>
</div> </div>
<div v-else> <div v-else>
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{ <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{
$t('no_recorder_defined')}}</p> $t('no_recorder_defined')
}}</p>
</div> </div>
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info">
<font-awesome-icon <font-awesome-icon
@@ -189,6 +203,7 @@
</span> </span>
<b-form v-else> <b-form v-else>
<b-input-group> <b-input-group>
<ValidationProvider v-slot="{ errors }">
<select class="form-control" v-model="updateValues[room.id+'_recorder_id']"> <select class="form-control" v-model="updateValues[room.id+'_recorder_id']">
<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">
@@ -202,6 +217,7 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
<div class="form-check"> <div class="form-check">
@@ -216,11 +232,12 @@
</b-card-text> </b-card-text>
<div slot="footer"> <div slot="footer">
<small class="text-muted"> <small class="text-muted">
<p>{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}} <p>{{ $t('created') }}: {{ room.created_at | moment("dddd, MMMM Do YYYY") }}
<span class="pull-right"> <span class="pull-right">
<button type="button" v-on:click="deleteRoom(room.id)" <button type="button" v-on:click="deleteRoom(room.id)"
class="btn btn-sm btn-danger">{{ class="btn btn-sm btn-danger">{{
$t('delete') }}&nbsp;<font-awesome-icon $t('delete')
}}&nbsp;<font-awesome-icon
icon="trash"/> icon="trash"/>
</button> </button>
</span> </span>
@@ -234,28 +251,32 @@
<b-tab title="Create room"> <b-tab title="Create room">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="plus"/> <font-awesome-icon icon="plus"/>
<i>{{$t('create')}}</i>&nbsp;<font-awesome-icon icon="door-open"/> <i>{{ $t('create') }}</i>&nbsp;<font-awesome-icon icon="door-open"/>
<strong>{{$t('Room')}}</strong> <strong>{{ $t('Room') }}</strong>
</template> </template>
<b-card-text> <b-card-text>
<p>{{ $t('Create_a_new_room')}}:</p> <p>{{ $t('Create_a_new_room') }}:</p>
<!-- form starts here --> <!-- form starts here -->
<ValidationObserver v-slot="{ invalid }">
<form v-on:submit.prevent="saveRoom()"> <form v-on:submit.prevent="saveRoom()">
<section class="form"> <section class="form">
<ValidationProvider :name="$t('name')" rules="required|min:3" v-slot="{ errors }" slim>
<div class="form-group row"> <div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label> <label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<input name="name" <input name="name"
v-model="form.name" v-model="form.name"
v-validate="'required|min:3'" v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
class="form-control" type="text" placeholder="Room name" required> class="form-control" type="text" placeholder="Room name" required>
</div> </div>
<p class="col-sm-4" v-show="errors.has('name')"> <p class="col-sm-4" v-show="errors.length > 0">
{{ errors.first('name') }} {{ errors[0] }}
</p> </p>
</div> </div>
</ValidationProvider>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
@@ -266,19 +287,22 @@
</div> </div>
</div> </div>
<ValidationProvider :name="$t('number')" rules="required|min:3" v-slot="{ errors }" slim>
<div class="form-group row"> <div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label> <label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<input name="number" <input name="number"
v-model="form.number" v-model="form.number"
v-validate="'required|min:3'" v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
v-bind:class="{'is-danger': errors.has('number'), 'is-invalid': errors.has('number')}"
class="form-control" type="text" placeholder="Room number" required> class="form-control" type="text" placeholder="Room number" required>
</div> </div>
<p class="col-sm-4" v-show="errors.has('number')"> <p class="col-sm-4" v-show="errors.length > 0">
{{ errors.first('number') }} {{ errors[0] }}
</p> </p>
</div> </div>
</ValidationProvider>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
@@ -305,7 +329,7 @@
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control"> <div class="control">
<button <button
v-bind:disabled="errors.any()" v-bind:disabled="invalid"
type="submit" type="submit"
class="btn btn-primary"> class="btn btn-primary">
Create room Create room
@@ -315,6 +339,7 @@
</section> </section>
</form> </form>
</ValidationObserver>
</b-card-text> </b-card-text>
</b-tab> </b-tab>
</b-tabs> </b-tabs>
@@ -337,7 +362,7 @@
<div class="column"> <div class="column">
<section class="section"> <section class="section">
{{rooms}} {{ rooms }}
</section> </section>
</div> </div>
@@ -345,13 +370,13 @@
</template> </template>
<script> <script>
import {EventBus} from '@/utils'; import {EventBus} from '@/utils';
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'; import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
import getRepository from '@/api/RepositoryFactory'; import getRepository from '@/api/RepositoryFactory';
const RoomRepository = getRepository('room'); const RoomRepository = getRepository('room');
export default { export default {
components: { components: {
PulseLoader, PulseLoader,
}, },
@@ -374,15 +399,15 @@
}; };
}, },
methods: { methods: {
showAllRooms(){ showAllRooms() {
this.onlyShowRoomsWithRecorder = false; this.onlyShowRoomsWithRecorder = false;
this.onlyShowRoomsWithoutRecorder = false; this.onlyShowRoomsWithoutRecorder = false;
}, },
showRoomsWithRecorder(){ showRoomsWithRecorder() {
this.onlyShowRoomsWithRecorder = true; this.onlyShowRoomsWithRecorder = true;
this.onlyShowRoomsWithoutRecorder = false; this.onlyShowRoomsWithoutRecorder = false;
}, },
showRoomsWithoutRecorder(){ showRoomsWithoutRecorder() {
this.onlyShowRoomsWithRecorder = false; this.onlyShowRoomsWithRecorder = false;
this.onlyShowRoomsWithoutRecorder = true; this.onlyShowRoomsWithoutRecorder = true;
}, },
@@ -453,12 +478,11 @@
}; };
}, },
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;
}); });
@@ -469,19 +493,19 @@
return this.$store.state.recorders; return this.$store.state.recorders;
}, },
}, },
}; };
</script> </script>
<style> <style>
.comment { .comment {
white-space: pre-wrap; white-space: pre-wrap;
} }
.card:hover { .card:hover {
background-color: whitesmoke; background-color: whitesmoke;
} }
.required:after { .required:after {
content: " *"; content: " *";
} }
</style> </style>

32
src/main.ts
View File

@@ -11,7 +11,7 @@ import VueLogger from 'vuejs-logger';
import VueSocketIOExt from 'vue-socket.io-extended'; import VueSocketIOExt from 'vue-socket.io-extended';
import io from 'socket.io-client'; import io from 'socket.io-client';
import i18n from '@/plugins/i18n'; import i18n from '@/plugins/i18n';
import { ValidationProvider } from 'vee-validate'; import { ValidationObserver, ValidationProvider, extend, localize } from 'vee-validate';
// @ts-ignore // @ts-ignore
import FlagIcon from 'vue-flag-icon'; import FlagIcon from 'vue-flag-icon';
// @ts-ignore // @ts-ignore
@@ -34,6 +34,7 @@ import {
faPencilAlt, faPencilAlt,
faCogs, faCogs,
faAt, faAt,
faIdBadge,
faUser, faUser,
faEnvelope, faEnvelope,
faHome, faHome,
@@ -57,6 +58,11 @@ import {
import { faOpenid, import { faOpenid,
} from '@fortawesome/free-brands-svg-icons'; } from '@fortawesome/free-brands-svg-icons';
import {
faDotCircle,
} from '@fortawesome/free-regular-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
@@ -71,7 +77,8 @@ Vue.prototype.$isProduction = isProduction;
library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt, library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt,
faUser, faEnvelope, faUserTag, faExternalLinkAlt, faSync, faHome, faCode, faBarcode, faTag, faTags, faVideo, faLock, faUser, faEnvelope, faUserTag, faExternalLinkAlt, faSync, faHome, faCode, faBarcode, faTag, faTags, faVideo, faLock,
faLockOpen, faArrowCircleLeft, faArrowCircleRight, faWrench, faPlay, faFrown, faSmile, faThumbsUp, faThumbsDown, faOpenid); faLockOpen, faArrowCircleLeft, faArrowCircleRight, faWrench, faPlay, faFrown, faSmile, faThumbsUp, faThumbsDown,
faOpenid, faDotCircle, faIdBadge);
Vue.component('font-awesome-icon', FontAwesomeIcon); Vue.component('font-awesome-icon', FontAwesomeIcon);
@@ -92,9 +99,24 @@ Vue.use(BootstrapVue);
Vue.use(FlagIcon); Vue.use(FlagIcon);
Vue.use(VueCookies); Vue.use(VueCookies);
Vue.use(VueSweetalert2); Vue.use(VueSweetalert2);
// Vue.use(VeeValidate);
Vue.use(VueMoment); Vue.use(VueMoment);
import en from 'vee-validate/dist/locale/en.json';
import de from 'vee-validate/dist/locale/de.json';
import es from 'vee-validate/dist/locale/es.json';
import * as rules from 'vee-validate/dist/rules';
// install rules and localization
Object.keys(rules).forEach((rule) => {
// @ts-ignore
extend(rule, rules[rule]);
});
localize('de', de);
// Install components globally
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider); Vue.component('ValidationProvider', ValidationProvider);
// const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3}); // const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3});
@@ -106,10 +128,6 @@ const socket = io('ws://localhost:5443', {
Vue.use(VueSocketIOExt, socket); Vue.use(VueSocketIOExt, socket);
// setup fake backend
// import { configureFakeBackend } from './helpers';
// configureFakeBackend();
Vue.config.productionTip = false; Vue.config.productionTip = false;

9
src/validation.js Normal file
View File

@@ -0,0 +1,9 @@
import { extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';
extend('positive', value => {
return value >= 0;
});
extend('email', email);
extend('required', required);

1
tsconfig.json
View File

@@ -7,6 +7,7 @@
"importHelpers": true, "importHelpers": true,
"moduleResolution": "node", "moduleResolution": "node",
"experimentalDecorators": true, "experimentalDecorators": true,
"resolveJsonModule": true,
"esModuleInterop": true, "esModuleInterop": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"sourceMap": true, "sourceMap": true,