fixed recorders (validate migration)

This commit is contained in:
2020-07-31 14:40:13 +02:00
parent f07716b946
commit c0d6da48c9
6 changed files with 130 additions and 64 deletions

View File

@@ -43,24 +43,25 @@
icon="pencil-alt"/>
</a>
</span>
<b-input-group v-else>
<ValidationProvider :name="$t('name')" rules="required|min:3" v-slot="{ errors }" v-else slim>
<b-input-group>
<b-form-input :id="recorder.id+'_name'" name="name"
v-model="updateValues[recorder.id+'_name']"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text"
:placeholder="'Name ('+recorder.name +')'"
@blur="updateRecorder(recorder.id, 'name')"
@keyup.enter="updateRecorder(recorder.id, 'name')"
required></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('name')"
<b-button :disabled="errors.length > 0"
@click="updateRecorder(recorder.id, 'name')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
</b-input-group>
</ValidationProvider>
</h5>
<hr/>
<p class="card-text"><strong>{{ $t('Model') }}:</strong>&nbsp;
@@ -79,24 +80,25 @@
icon="pencil-alt"/>
</a>
</span>
<b-input-group v-else size="sm">
<ValidationProvider :name="$t('network_name')" rules="required|ip_or_fqdn" v-slot="{ errors }" v-else slim>
<b-input-group size="sm">
<b-form-input name="network_name"
style="min-width: 80%;"
v-model="updateValues[recorder.id+'_network_name']"
v-validate="'required|ip_or_fqdn'"
v-bind:class="{'is-danger': errors.has('network_name'), 'is-invalid': errors.has('network_name')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text"
:placeholder="'Network name ('+recorder.network_name +')'"
@keyup.enter="updateRecorder(recorder.id, 'network_name')"></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('network_name')"
<b-button :disabled="errors.length > 0"
@click="updateRecorder(recorder.id, 'network_name')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
<span>{{ errors.first('network_name') }}</span>
<span>{{ errors[0] }}</span>
</b-input-group>
</ValidationProvider>
</p>
<p class="card-text"><strong>{{ $t('ip') }}:</strong>&nbsp;
@@ -106,24 +108,26 @@
icon="pencil-alt"/>
</a>
</span>
<b-input-group v-else size="sm">
<ValidationProvider :name="$t('ip')" rules="ip" v-slot="{ errors }" v-else slim>
<b-input-group size="sm">
<b-form-input name="ip"
v-model="updateValues[recorder.id+'_ip']"
v-validate="'ip'"
v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text"
:placeholder="$t('ip address') +' ('+recorder.ip +')'"
@keyup.enter="updateRecorder(recorder.id, 'ip')"
required></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('ip')"
<b-button :disabled="errors.length > 0"
@click="updateRecorder(recorder.id, 'ip')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
<span>{{ errors[0] }}</span>
</b-input-group>
<span>{{ errors.first('ip') }}</span>
</ValidationProvider>
</p>
<p class="card-text"><strong>{{ $t('ip v6') }}:</strong>&nbsp;
@@ -133,24 +137,26 @@
icon="pencil-alt"/>
</a>
</span>
<b-input-group v-else size="sm">
<ValidationProvider :name="$t('ip6')" rules="ip6" v-slot="{ errors }" v-else slim>
<b-input-group size="sm">
<b-form-input name="ip6"
v-model="updateValues[recorder.id+'_ip6']"
v-validate="'ip:6'"
v-bind:class="{'is-danger': errors.has('ip6'), 'is-invalid': errors.has('ip6')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text"
:placeholder="$t('ip v6 address') +' ('+recorder.ip6 +')'"
@keyup.enter="updateRecorder(recorder.id, 'ip6')"
required></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('ip6')"
<b-button :disabled="errors.length > 0"
@click="updateRecorder(recorder.id, 'ip6')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
<span>{{ errors[0] }}</span>
</b-input-group>
<span>{{ errors.first('ip6') }}</span>
</ValidationProvider>
</p>
<p class="card-text"><strong>{{ $t('ssh_port') }}:</strong>&nbsp;
@@ -160,25 +166,27 @@
icon="pencil-alt"/>
</a>
</span>
<b-input-group v-else size="sm">
<ValidationProvider :name="$t('ssh_port')" rules="required|between:0,65535" v-slot="{ errors }" v-else slim>
<b-input-group size="sm">
<b-form-input name="ssh_port"
v-model="updateValues[recorder.id+'_ssh_port']"
v-validate="'required|between:0,65535'"
v-bind:class="{'is-danger': errors.has('ssh_port'), 'is-invalid': errors.has('ssh_port')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text"
:placeholder="'Room number ('+recorder.ssh_port +')'"
@blur="updateRecorder(recorder.id, 'ssh_port')"
@keyup.enter="updateRecorder(recorder.id, 'ssh_port')"
required></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('ssh_port')"
<b-button :disabled="errors.length > 0"
@click="updateRecorder(recorder.id, 'ssh_port')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
<span>{{ errors[0] }}</span>
</b-input-group>
<span>{{ errors.first('ssh_port') }}</span>
</ValidationProvider>
</p>
<p class="card-text"><strong>{{ $t('telnet_port') }}:</strong>&nbsp;
@@ -189,25 +197,26 @@
icon="pencil-alt"/>
</a>
</span>
<b-input-group v-else size="sm">
<ValidationProvider :name="$t('telnet_port')" rules="required|between:0,65535" v-slot="{ errors }" v-else slim>
<b-input-group size="sm">
<b-form-input name="telnet_port"
v-model="updateValues[recorder.id+'_telnet_port']"
v-validate="'required|between:0,65535'"
v-bind:class="{'is-danger': errors.has('telnet_port'), 'is-invalid': errors.has('telnet_port')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text"
:placeholder="'Room number ('+recorder.telnet_port +')'"
@blur="updateRecorder(recorder.id, 'telnet_port')"
@keyup.enter="updateRecorder(recorder.id, 'telnet_port')"
required></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('telnet_port')"
<b-button :disabled="errors.length > 0"
@click="updateRecorder(recorder.id, 'telnet_port')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
<span>{{ errors[0] }}</span>
</b-input-group>
<span>{{ errors.first('telnet_port') }}</span>
</ValidationProvider>
</p>
<hr/>
@@ -363,23 +372,25 @@
<b-card-text>
<p>{{ $t('Create_a_new_recorder')}}:</p>
<!-- form starts here -->
<ValidationObserver v-slot="{ invalid }">
<form v-on:submit.prevent="saveRecorder()">
<section class="form">
<ValidationProvider :name="$t('name')" rules="required|min:3" v-slot="{ errors }" slim>
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
<div class="col-sm-6">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text" :placeholder="$t('Recorder_name')"
required>
</div>
<p class="col-sm-4" v-show="errors.has('name')">
{{ errors.first('name') }}
<p class="col-sm-4" v-show="errors.length > 0">
{{ errors[0] }}
</p>
</div>
</ValidationProvider>
<div class="form-group row">
@@ -391,93 +402,99 @@
</div>
</div>
<ValidationProvider :name="$t('network_name')" rules="required|ip_or_fqdn" v-slot="{ errors }" slim>
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('network_name') }}</label>
<div class="col-sm-6">
<input name="network_name"
v-model="form.network_name"
v-validate="'required|ip_or_fqdn'"
v-bind:class="{'is-danger': errors.has('network_name'), 'is-invalid': errors.has('network_name')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text" :placeholder="$t('network_name')"
required
>
</div>
<p class="col-sm-4" v-show="errors.has('network_name')">
{{ errors.first('network_name') }}
<p class="col-sm-4" v-show="errors.length > 0">
{{ errors[0] }}
</p>
</div>
</ValidationProvider>
<ValidationProvider :name="$t('mac')" rules="mac" v-slot="{ errors }" slim>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('mac') }}</label>
<div class="col-sm-6">
<input name="mac"
v-validate="'mac'"
v-model="form.mac"
v-bind:class="{'is-danger': errors.has('mac'), 'is-invalid': errors.has('mac')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('mac')">
</div>
<p class="col-sm-4" v-show="errors.has('mac')">
{{ errors.first('mac') }}
<p class="col-sm-4" v-show="errors.length > 0">
{{ errors[0] }}
</p>
</div>
</ValidationProvider>
<ValidationProvider :name="$t('ip')" rules="ip" v-slot="{ errors }" slim>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('ip') }}</label>
<div class="col-sm-6">
<input name="ip"
v-validate="'ip'"
v-model="form.ip"
v-bind:class="{'is-danger': errors.has('ip'), 'is-invalid': errors.has('ip')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ip')">
</div>
<p class="col-sm-4" v-show="errors.has('ip')">
{{ errors.first('ip') }}
</p>
<p class="col-sm-4" v-show="errors.length > 0">
{{ errors[0] }}
</p>
</div>
</ValidationProvider>
<ValidationProvider :name="$t('ipv6')" rules="ip6" v-slot="{ errors }" slim>
<div class="form-group row">
<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')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text" :placeholder="$t('Recorder') + ' ' + $t('ipv6')">
</div>
<p class="col-sm-4" v-show="errors.has('ip6')">
{{ errors.first('ip6') }}
<p class="col-sm-4" v-show="errors.length > 0">
{{ errors[0] }}
</p>
</div>
</ValidationProvider>
<ValidationProvider :name="$t('telnet_port')" rules="required|between:0,65535" v-slot="{ errors }" slim>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('telnet_port') }}</label>
<div class="col-sm-6">
<input name="telnet_port"
v-model="form.telnet_port"
v-validate="'required|between:0,65535'"
v-bind:class="{'is-danger': errors.has('telnet_port'), 'is-invalid': errors.has('telnet_port')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="number" value="22"
placeholder="Telnet Port (23)">
</div>
<p class="col-sm-4" v-show="errors.has('telnet_port')">
{{ errors.first('telnet_port') }}
<p class="col-sm-4" v-show="errors.length > 0">
{{ errors[0] }}
</p>
</div>
</ValidationProvider>
<ValidationProvider :name="$t('ssh_port')" rules="required|between:0,65535" v-slot="{ errors }" slim>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('ssh_port') }}</label>
<div class="col-sm-6">
<input name="ssh_port"
v-model="form.ssh_port"
v-validate="'required|between:0,65535'"
v-bind:class="{'is-danger': errors.has('ssh_port'), 'is-invalid': errors.has('ssh_port')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="number" value="23"
placeholder="SSH Port (22)">
</div>
<p class="col-sm-4" v-show="errors.has('ssh_port')">
{{ errors.first('ssh_port') }}
<p class="col-sm-4" v-show="errors.length > 0">
{{ errors[0] }}
</p>
</div>
</ValidationProvider>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('Model') }}</label>
@@ -504,12 +521,13 @@
</div>
</div>
<ValidationProvider :name="$t('username')" rules="" v-slot="{ errors }" slim>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('username') }}</label>
<div class="col-sm-6">
<input name="username"
v-model="form.username"
v-bind:class="{'is-danger': errors.has('username'), 'is-invalid': errors.has('username')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text" :placeholder="$t('username')"
>
</div>
@@ -517,13 +535,15 @@
{{$t('may_be_left_blank')}} (-> {{$t('Model')}})
</p>
</div>
</ValidationProvider>
<ValidationProvider :name="$t('password')" rules="" v-slot="{ errors }" slim>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('password') }}</label>
<div class="col-sm-6">
<input name="password"
v-model="form.password"
v-bind:class="{'is-danger': errors.has('password'), 'is-invalid': errors.has('password')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text" :placeholder="$t('password')"
>
</div>
@@ -531,12 +551,13 @@
{{$t('may_be_left_blank')}} (-> {{$t('Model')}})
</p>
</div>
</ValidationProvider>
<div class="field is-grouped">
<div class="control">
<button
v-bind:disabled="errors.any()"
v-bind:disabled="invalid"
type="submit"
class="btn btn-primary">
Create recorder
@@ -546,6 +567,7 @@
</section>
</form>
</ValidationObserver>
</b-card-text>
</b-tab>
<b-tab title="Recorder model list">