{% extends "index.html.twig" %}

{% block searchBtn %}{% endblock %}
{% block searchTerm %}{% endblock %}

{% block breadcrumb %}
    <a href="{{ path('devices') }}">Topas Geräte</a> > Topas Gerät erstellen
{% endblock %}

{% block body %}
    <div class="create_device" id="app" v-cloak>
        <div class="form-row">
            <div class="col-12 d-flex align-items-center">
                <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                    <input type="checkbox" class="switch-input" v-model="active">
                    <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                </label>
                <label class="m-0" for="device_active">Topas Gerät ist aktiv</label>
            </div>
            <div class="col-sm-4">
                <label class="m-0 pt-2">Firma</label>
                <select id="company" class="form-control" name="company" v-model="company">
                    {% for company in companies %}
                        <option value="{{ company.id }}">{{ company.name }}</option>
                    {% else %}
                        <option disabled>Keine Firmen vorhanden</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-sm-4">
                <label class="m-0 pt-2">Topas ID</label>
                <input class="form-control item-required" id="topasid" name="topasid" v-model="topasID">
            </div>
            <div class="col-sm-4">
                <label class="m-0 pt-2">Daten Nummer</label>
                <input id="datanumber" class="form-control" name="datanumber" v-model="datanumber">
            </div>
            <div class="col-12 mt-3">
                <div class="form-row">
                    <div class="col-2">
                        <ul class="nav nav-pills flex-column port-nav">
                            <li class="nav-item" v-for="(value,key,index) in analogports">
                                <div class="input-group mb-1">
                                    <input type="button" :class="{'active': key === selectedAnalogPort, 'form-control btn-outline-secondary': !errors[key],'form-control btn-outline-danger': errors[key]}" :value="'Port ' + key"
                                           href="#" @click="selectAnalogPort(key)">
                                    <div class="input-group-append">
                                        <div class="input-group-text border-secondary pl-2 pr-0">
                                            <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                                <input type="checkbox" class="switch-input" :id="key" v-model="value.active" @change="selectAnalogPort(key)">
                                                <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-10">
                        <div class="card">
                            <div class="card-body">
                                <div class="form-row">
                                    <div class="col-12">
                                        Port <b>{$ selectedAnalogPort }</b> bearbeiten
                                        <hr>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="analogProps.diagram">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">Tankgrafik anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="analogProps.tanklist">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">in Tankliste anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="analogProps.customerview">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">in Kundenansicht anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="analogProps.basiview">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">in Fuhrparkansicht anzeigen</label>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="m-0 pt-2">Beschreibung</label>
                                        <input class="form-control" name="description" id="description" v-model="analogProps.description">
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="m-0 pt-2">Maßeinheit</label>
                                        <select class="form-control" id="measurement" v-model="analogProps.unit_id">
                                            <option :value="id" v-for="(measurement, id) in measurements">
                                                {$ measurement.name }
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <table class="table-responsive">
                                            <thead class="text-center">
                                            <tr>
                                                <td></td>
                                                <td>Min</td>
                                                <td>Max</td>
                                                <td>Alarm Min</td>
                                                <td>Alarm Max</td>
                                                <td>Bestellmenge</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    Eingehende Meßwerte in mA
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedAnalogPort) && (errors[selectedAnalogPort].measure || errors[selectedAnalogPort].missing)}" v-model="analogProps.measured_min" @keyup="complete_ma('analog')">
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedAnalogPort) && (errors[selectedAnalogPort].measure|| errors[selectedAnalogPort].missing)}" v-model="analogProps.measured_max" @keyup="complete_ma('analog')">
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="analogProps.measured_alarm_min" disabled>
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="analogProps.measured_alarm_max" disabled>
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="analogProps.measured_order" disabled>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Füllmenge in
                                                    <span v-if="measurements[analogports[selectedAnalogPort].unit_id]">
														{$ measurements[analogports[selectedAnalogPort].unit_id].name }
													</span>
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedAnalogPort) && (errors[selectedAnalogPort].capacity || errors[selectedAnalogPort].missing)}" v-model="analogProps.capacity_min" @keyup="complete_ma('analog')">
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedAnalogPort) && (errors[selectedAnalogPort].capacity || errors[selectedAnalogPort].missing)}" v-model="analogProps.capacity_max" @keyup="complete_ma('analog')">
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedAnalogPort) && (errors[selectedAnalogPort].capacityalarmmin || errors[selectedAnalogPort].missing)}" v-model="analogProps.capacity_alarm_min" @keyup="complete_ma('analog')">
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedAnalogPort) && (errors[selectedAnalogPort].capacityalarmmax || errors[selectedAnalogPort].missing)}" v-model="analogProps.capacity_alarm_max" @keyup="complete_ma('analog')">
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedAnalogPort) && (errors[selectedAnalogPort].capacityorder || errors[selectedAnalogPort].missing)}" v-model="analogProps.capacity_order" @keyup="complete_ma('analog')">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td class="text-center">+ / -</td>
                                                <td colspan="4"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Toleranz Meßwerte in mA
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="analogProps.measured_tolerance">
                                                </td>
                                                <td colspan="4">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
															<span class="input-group-text" id="">
																Toleranz Bezugszeitraum
															</span>
                                                        </div>
                                                        <input type="text" class="form-control" disabled>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Toleranz Füllmenge in <span class="measurement-display"></span>
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="analogProps.capacity_tolerance">
                                                </td>
                                                <td colspan="4">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Von</span>
                                                        </div>
                                                        <input class="form-control" type="text" v-model="analogProps.capacity_from">
                                                        <div class="input-group-prepend input-group-append">
                                                            <div class="input-group-text">Bis</div>
                                                        </div>
                                                        <input class="form-control" type="text" v-model="analogProps.capacity_till">
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-3">
                <div class="form-row">
                    <div class="col-2">
                        <ul class="nav nav-pills flex-column port-nav">
                            <li class="nav-item" v-for="(value,key,index) in digitalports">
                                <div class="input-group mb-1">
                                    <input type="button" class="form-control btn-outline-secondary" :value="'Port ' + key"
                                           :class="{ 'active': key === selectedDigitalPort }" href="#" @click="selectedDigitalPort = key">
                                    <div class="input-group-append">
                                        <div class="input-group-text border-secondary pl-2 pr-0">
                                            <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                                <input type="checkbox" class="switch-input" :id="key" v-model="value.active">
                                                <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-10">
                        <div class="card">
                            <div class="card-body">
                                <div class="form-row">
                                    <div class="col-12">
                                        Port <b>{$ selectedDigitalPort }</b> bearbeiten
                                        <hr>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="digitalProps.diagram">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">Tankgrafik anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="digitalProps.tanklist">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">in Tankliste anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="digitalProps.customerview">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">in Kundenansicht anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="digitalProps.basiview">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">in Fuhrparkansicht anzeigen</label>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="m-0 pt-2">Beschreibung</label>
                                        <input class="form-control" id="description" v-model="digitalProps.description">
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="m-0 pt-2">Alarmstatus</label>
                                        <select class="form-control" v-model="digitalProps.alarm_state">
                                            <option value="false">0</option>
                                            <option value="true">1</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="m-0 pt-2">Beschreibung wenn Alarmstatus 0</label>
                                        <input class="form-control" v-model="digitalProps.false_label">
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="m-0 pt-2">Beschreibung wenn Alarmstatus 1</label>
                                        <input class="form-control" v-model="digitalProps.true_label">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-3">
                <div class="form-row">
                    <div class="col-2">
                        <ul class="nav nav-pills flex-column port-nav">
                            <li class="nav-item" v-for="(value,key,index) in virtualports">
                                <div class="input-group mb-1">
                                    <input type="button" class="form-control btn-outline-secondary" :value="'Port ' + key"
                                           :class="{'active': key === selectedVirtualPort, 'form-control btn-outline-secondary': !errors[key],'form-control btn-outline-danger': errors[key]}" @click="selectVirtualPort(key)">
                                    <div class="input-group-append">
                                        <div class="input-group-text border-secondary pl-2 pr-0">
                                            <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                                <input type="checkbox" class="switch-input" :id="key" v-model="value.active" @change="selectVirtualPort(key)">
                                                <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-10">
                        <div class="card">
                            <div class="card-body">
                                <div class="form-row">
                                    <div class="col-12">
                                        Port <b>{$ selectedVirtualPort }</b> bearbeiten
                                        <hr>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="virtualProps.diagram">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">Tankgrafik anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="virtualProps.tanklist">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">in Tankliste anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="virtualProps.customerview">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">in Kundenansicht anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <label class="switch switch-label switch-sm switch-primary m-0 mr-2">
                                            <input type="checkbox" class="switch-input" v-model="virtualProps.basiview">
                                            <span class="switch-slider" data-checked="✓" data-unchecked="✕"></span>
                                        </label>
                                        <label class="m-0" for="device_active">in Fuhrparkansicht anzeigen</label>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="m-0 pt-2">Beschreibung</label>
                                        <input class="form-control" name="description" id="description" v-model="virtualProps.description">
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="m-0 pt-2">Maßeinheit</label>
                                        <select class="form-control" id="measurement" v-model="virtualProps.unit_id">
                                            <option :value="id" v-for="(measurement, id) in measurements">
                                                {$ measurement.name }
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <table class="table-responsive">
                                            <thead class="text-center">
                                            <tr>
                                                <td></td>
                                                <td>Min</td>
                                                <td>Max</td>
                                                <td>Alarm Min</td>
                                                <td>Alarm Max</td>
                                                <td>Bestellmenge</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    Eingehende Meßwerte in mA
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedVirtualPort) && (errors[selectedVirtualPort].measure || errors[selectedVirtualPort].missing)}" v-model="virtualProps.measured_min" @keyup="complete_ma('virtual')">
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedVirtualPort) && (errors[selectedVirtualPort].measure|| errors[selectedVirtualPort].missing)}" v-model="virtualProps.measured_max" @keyup="complete_ma('virtual')">
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="virtualProps.measured_alarm_min" disabled>
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="virtualProps.measured_alarm_max" disabled>
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="virtualProps.measured_order" disabled>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Füllmenge in
                                                    <span v-if="measurements[analogports[selectedVirtualPort]]">
                                                        {$ measurements[virtualports[selectedVirtualPort].unit_id].name }
                                                    </span>
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedVirtualPort) && (errors[selectedVirtualPort].capacity || errors[selectedVirtualPort].missing)}" v-model="virtualProps.capacity_min" @keyup="complete_ma('virtual')">
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedVirtualPort) && (errors[selectedVirtualPort].capacity || errors[selectedVirtualPort].missing)}" v-model="virtualProps.capacity_max" @keyup="complete_ma('virtual')">
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedVirtualPort) && (errors[selectedVirtualPort].capacityalarmmin || errors[selectedVirtualPort].missing)}" v-model="virtualProps.capacity_alarm_min" @keyup="complete_ma('virtual')">
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedVirtualPort) && (errors[selectedVirtualPort].capacityalarmmax || errors[selectedVirtualPort].missing)}" v-model="virtualProps.capacity_alarm_max" @keyup="complete_ma('virtual')">
                                                </td>
                                                <td>
                                                    <input :class="{'form-control': true,'border-danger': errors.hasOwnProperty(selectedVirtualPort) && (errors[selectedVirtualPort].capacityorder || errors[selectedVirtualPort].missing)}" v-model="virtualProps.capacity_order" @keyup="complete_ma('virtual')">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td class="text-center">+ / -</td>
                                                <td colspan="4"></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Toleranz Meßwerte in mA
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="virtualProps.measured_tolerance">
                                                </td>
                                                <td colspan="4">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
															<span class="input-group-text" id="">
																Toleranz Bezugszeitraum
															</span>
                                                        </div>
                                                        <input type="text" class="form-control" disabled>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Toleranz Füllmenge in <span class="measurement-display"></span>
                                                </td>
                                                <td>
                                                    <input class="form-control" v-model="virtualProps.capacity_tolerance">
                                                </td>
                                                <td colspan="4">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">Von</span>
                                                        </div>
                                                        <input class="form-control" type="text" v-model="virtualProps.capacity_from">
                                                        <div class="input-group-prepend input-group-append">
                                                            <div class="input-group-text">Bis</div>
                                                        </div>
                                                        <input class="form-control" type="text" v-model="virtualProps.capacity_till">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><span class="mt-3">&nbsp;</span></td>
                                            </tr>
                                            <tr>
                                                <td>Bezugsport</td>
                                                <td>
                                                    <select class="form-control" id="measurement" v-model="virtualProps.basi_port">
                                                        <option :value="key" v-for="(value,key,index) in analogports">
                                                            {$ key }
                                                        </option>
                                                    </select>
                                                </td>
                                                <td colspan="4">Analogport bei welchem dieser virtuelle Port angezeigt
                                                    werden soll, z.B. A2.
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Berechnungsformel</td>
                                                <td colspan="5">
                                                    <input class="form-control" type="text" v-model="virtualProps.formula">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td colspan="5">
                                                    Angabe von Analogports und Zahlen aus welchen dieser V-Port
                                                    berechnet wird, z.B. (A2 + A3) * 0.5
                                                    Erlaubt sind folgende Zeichen und mathematische Formel: Analogports
                                                    A1 bis A8, (), +, *, -, /
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-3">
                <a href="{{ path('devices') }}" class="btn btn-secondary">Abbrechen</a>
                <button class="btn btn-success noload" @click="saveDevice()">Topas Gerät speichern</button>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('_resources/js/vue.min.js') }}"></script>
    <script>
        let analogPortObj = {
            {% for prop, default in analogProperties %}
            '{{ prop }}': {{ default|raw }},
            {% endfor %}
        };

        let digitalPortObj = {
            {% for prop, default in digitalProperties %}
            '{{ prop }}': {{ default|raw }},
            {% endfor %}
        };

        let virtualPortObj = {
            {% for prop, default in virtualProperties %}
            '{{ prop }}': {{ default|raw }},
            {% endfor %}
        };

        let app = new Vue({
            el        : '#app',
            delimiters: [
                '{$',
                '}'
            ],
            data      : {
                active             : false,
                company            : '',
                topasID            : '',
                datanumber         : '',
                recalculated       : false,
                measurements       : {
                    {% for measurement in measurements %}
                    '{{ measurement.id }}': {'name': '{{ measurement.name }}'},
                    {% endfor %}
                },
                errors             : {},
                selectedAnalogPort : 'A1',
                selectedDigitalPort: 'D1',
                selectedVirtualPort: 'V1',
                analogports        : {
                    'A1': JSON.parse(JSON.stringify(analogPortObj)),
                    'A2': JSON.parse(JSON.stringify(analogPortObj)),
                    'A3': JSON.parse(JSON.stringify(analogPortObj)),
                    'A4': JSON.parse(JSON.stringify(analogPortObj)),
                    'A5': JSON.parse(JSON.stringify(analogPortObj)),
                    'A6': JSON.parse(JSON.stringify(analogPortObj)),
                    'A7': JSON.parse(JSON.stringify(analogPortObj)),
                    'A8': JSON.parse(JSON.stringify(analogPortObj))
                },
                digitalports       : {
                    'D1': JSON.parse(JSON.stringify(digitalPortObj)),
                    'D2': JSON.parse(JSON.stringify(digitalPortObj)),
                    'D3': JSON.parse(JSON.stringify(digitalPortObj)),
                    'D4': JSON.parse(JSON.stringify(digitalPortObj)),
                    'D5': JSON.parse(JSON.stringify(digitalPortObj)),
                    'D6': JSON.parse(JSON.stringify(digitalPortObj)),
                    'D7': JSON.parse(JSON.stringify(digitalPortObj)),
                    'D8': JSON.parse(JSON.stringify(digitalPortObj))
                },
                virtualports       : {
                    'V1': JSON.parse(JSON.stringify(virtualPortObj)),
                    'V2': JSON.parse(JSON.stringify(virtualPortObj)),
                    'V3': JSON.parse(JSON.stringify(virtualPortObj)),
                    'V4': JSON.parse(JSON.stringify(virtualPortObj)),
                    'V5': JSON.parse(JSON.stringify(virtualPortObj)),
                    'V6': JSON.parse(JSON.stringify(virtualPortObj)),
                    'V7': JSON.parse(JSON.stringify(virtualPortObj)),
                    'V8': JSON.parse(JSON.stringify(virtualPortObj))
                },
            },
            computed  : {
                analogProps : function () {
                    return this.analogports[this.selectedAnalogPort];
                },
                digitalProps: function () {
                    return this.digitalports[this.selectedDigitalPort];
                },
                virtualProps: function () {
                    return this.virtualports[this.selectedVirtualPort];
                }
            },
            mounted() {
                for (let i = 1; i <= 8; i++) {
                    this.selectedAnalogPort = 'A' + i;
                    // this.complete_ma('analog');
                    this.selectedVirtualPort = 'V' + i;
                    // this.complete_ma('virtual');
                }
                this.selectedAnalogPort = 'A1';
                this.selectedVirtualPort = 'V1';
            },
            methods   : {
                saveDevice() {
                    let self = this;
                    if (!self.topasID || self.topasID.trim() == '') {
                        toastr.warning("'" + $('#topasid').parent().find('label').text() + "' ist ungültig");
                        return;
                    }
                    if (!self.company || self.company.trim() == '') {
                        toastr.warning("'" + $('#company').parent().find('label').text() + "' ist ungültig");
                        return;
                    }
                    if (!self.datanumber || self.datanumber.trim() == '') {
                        toastr.warning("'" + $('#datanumber').parent().find('label').text() + "' ist ungültig");
                        return;
                    }
                    showLoading();
                    $.ajax({
                        url   : '{{ path('devices_save') }}',
                        method: 'POST',
                        data  : {
                            active      : self.active,
                            company     : self.company,
                            topasID     : self.topasID,
                            datanumber  : self.datanumber,
                            analogports : self.analogports,
                            digitalports: self.digitalports,
                            virtualports: self.virtualports
                        }
                    }).done(function (data) {
                        if (data.result == 1) {
                            window.location.replace("{{ path('devices') }}");
                        }
                    });
                },
                selectAnalogPort(key) {
                    this.selectedAnalogPort = key;
                    this.complete_ma('analog');
                },
                selectVirtualPort(key) {
                    this.selectedVirtualPort = key;
                    this.complete_ma('virtual');
                },
                selectAnalogPort(key) {
                    this.selectedAnalogPort = key;
                    this.complete_ma('analog');
                },
                selectVirtualPort(key) {
                    this.selectedVirtualPort = key;
                    this.complete_ma('virtual');
                },
                complete_ma(type) {
                    try {
                        let ports = type + 'ports';
                        if (this.$data.hasOwnProperty(ports)) {
                            let sel = 'selected' + type.charAt(0).toUpperCase() + type.slice(1) + 'Port';
                            if (this.$data.hasOwnProperty(sel)) {
                                let port = this.$data[ports][this.$data[sel]];
                                port = this.normalizeNumbers(port);

                                if (!this.checkData(port, this.$data[sel])) {
                                    this.$data[ports][this.$data[sel]].measured_alarm_min = '';
                                    this.$data[ports][this.$data[sel]].measured_alarm_max = '';
                                    this.$data[ports][this.$data[sel]].measured_order = '';
                                    this.$forceUpdate();
                                    return;
                                }

                                let min_mA = parseFloat(port.measured_min);
                                let max_mA = parseFloat(port.measured_max);

                                let minimum = parseFloat(port.capacity_min);
                                let maximum = parseFloat(port.capacity_max);
                                let alarm_min = parseFloat(port.capacity_alarm_min);
                                let alarm_max = parseFloat(port.capacity_alarm_max);
                                let order = parseFloat(port.capacity_order);

                                let measured_alarm_min = this.$data[ports][this.$data[sel]].measured_alarm_min;
                                let measured_alarm_max = this.$data[ports][this.$data[sel]].measured_alarm_max;
                                let measured_order = this.$data[ports][this.$data[sel]].measured_order;
                                if (min_mA >= 0 && max_mA >= 0 && minimum >= 0 && maximum >= 0) {
                                    let factor = (max_mA - min_mA) / (maximum - minimum);
                                    let measured_order = ((order - minimum) * factor) + min_mA;
                                    this.$data[ports][this.$data[sel]].measured_alarm_min = ((alarm_min - minimum) * factor) + min_mA;
                                    this.$data[ports][this.$data[sel]].measured_alarm_max = ((alarm_max - minimum) * factor) + min_mA;
                                    this.$data[ports][this.$data[sel]].measured_order = isNaN(measured_order) ? '' : measured_order;
                                }
                                if (this.$data[ports][this.$data[sel]].measured_alarm_min != measured_alarm_min ||
                                    this.$data[ports][this.$data[sel]].measured_alarm_max != measured_alarm_max ||
                                    this.$data[ports][this.$data[sel]].measured_order != measured_order) {
                                    this.recalculated = true;
                                }

                                this.$forceUpdate();
                            }
                        }
                    } catch (e) {
                        console.log(e);
                    }
                },
                checkData(port, key) {
                    if (port.active == false) {
                        delete this.errors[key];
                        return false;
                    }

                    let mMin = parseFloat(port.measured_min);
                    let mMax = parseFloat(port.measured_max);
                    let cMin = parseFloat(port.capacity_min);
                    let cMax = parseFloat(port.capacity_max);

                    let cAlarmMin = parseFloat(port.capacity_alarm_min);
                    let cAlarmMax = parseFloat(port.capacity_alarm_max);
                    let cOrder = parseFloat(port.capacity_order);

                    if (mMin >= 0 &&
                        mMax >= 0 &&
                        cMin >= 0 &&
                        cMax >= 0 &&
                        cAlarmMin >= 0 &&
                        cAlarmMax >= 0
                    ) {
                        delete this.errors[key];
                        if (mMin >= mMax) {
                            if (!this.errors.hasOwnProperty(key)) {
                                this.errors[key] = {};
                            }
                            this.errors[key].measure = true;
                        }
                        if (cMin >= cMax || cMin >= cAlarmMin || cMin >= cAlarmMax || cMax <= cAlarmMin || cMax <= cAlarmMax) {
                            if (!this.errors.hasOwnProperty(key)) {
                                this.errors[key] = {};
                            }
                            this.errors[key].capacity = true;
                        }
                        if (cMin > cAlarmMin || cAlarmMin >= cAlarmMax) {
                            if (!this.errors.hasOwnProperty(key)) {
                                this.errors[key] = {};
                            }
                            this.errors[key].capacityalarmmin = true;
                        }
                        if (cMin >= cAlarmMax || cMax <= cAlarmMax || cAlarmMin >= cAlarmMax) {
                            if (!this.errors.hasOwnProperty(key)) {
                                this.errors[key] = {};
                            }
                            this.errors[key].capacityalarmmax = true;
                        }
                        if (!isNaN(cOrder)) {
                            if (cOrder >= cAlarmMax) {
                                if (!this.errors.hasOwnProperty(key)) {
                                    this.errors[key] = {};
                                }
                                this.errors[key].capacityalarmmax = true;
                                this.errors[key].capacityorder = true;
                            }
                            if (cOrder <= cAlarmMin) {
                                if (!this.errors.hasOwnProperty(key)) {
                                    this.errors[key] = {};
                                }
                                this.errors[key].capacityalarmmin = true;
                                this.errors[key].capacityorder = true;
                            }
                            if (cOrder <= cMin || cOrder >= cMax) {
                                if (!this.errors.hasOwnProperty(key)) {
                                    this.errors[key] = {};
                                }
                                this.errors[key].capacity = true;
                                this.errors[key].capacityorder = true;
                            }
                        }
                        if (this.errors[key]) {
                            return false;
                        }
                        return true;
                    } else {
                        if (!this.errors.hasOwnProperty(key)) {
                            this.errors[key] = {};
                        }
                        this.errors[key].missing = 3;
                        return false;
                    }
                },
                normalizeNumbers(port) {
                    let fields = [
                        'measured_min',
                        'measured_max',
                        'capacity_min',
                        'capacity_max',
                        'capacity_alarm_min',
                        'capacity_alarm_max',
                        'capacity_order'
                    ];
                    for (let field of fields) {
                        if (typeof port[field] === 'string' || port[field] instanceof String) {
                            port[field] = port[field].replace(',', '.');
                            if (!isNaN(port[field])) {
                                port[field] = parseFloat(port[field]);
                            }
                        }
                    }
                    return port;
                }
            }
        })
    </script>
{% endblock %}