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

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

{% block breadcrumb %}
    <a href="{{ path('devices') }}">Topas Geräte</a> > Topas Gerät bearbeiten: <b class="d-md-down-none">{{ device.topasID }}</b>
{% endblock %}

{% block body %}
    <div class="create_device" id="app" v-cloak>
        <div class="row">
            <div class="col-12 d-flex align-items-center">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" v-model="active">
                    <label class="form-check-label">Topas Gerät ist aktiv</label>
                </div>
            </div>
            <div class="col-sm-4">
                <label class="m-0 pt-2">Firma</label>
                <select 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 class="form-control" name="datanumber" v-model="datanumber">
            </div>
            <div class="col-12 mt-3">
                <div class="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"  :value="'Port ' + key"
                                           :class="{'active': key === selectedAnalogPort, 'form-control btn btn-outline-primary': !Object.hasOwn(errors, key),'form-control btn': Object.hasOwn(errors, key), 'btn-danger text-white': Object.hasOwn(errors, key) && analogports[key].active == true}" @click="selectAnalogPort(key)">
                                    <div class="input-group-text pl-2 pr-0">
                                        <div class="form-check form-switch form-switch-lg p-0">
                                            <input class="form-check-input m-0" type="checkbox" :id="key" v-model="value.active" @change="selectAnalogPort(key)">
                                        </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">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="analogProps.diagram">
                                        </div>
                                        <label class="m-0" for="device_active">Tankgrafik anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="analogProps.tanklist">
                                        </div>
                                        <label class="m-0" for="device_active">in Tankliste anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="analogProps.customerview">
                                        </div>
                                        <label class="m-0" for="device_active">in Kundenansicht anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="analogProps.basiview" @change="primaryPortInBasiView(selectedAnalogPort)">
                                        </div>
                                        <label class="m-0" for="device_active">in Fuhrparkansicht anzeigen</label>
                                    </div>
                                    <div class="col-6" v-if="analogProps.basiview_error == true">
                                        <div class="alert alert-warning">
                                            Dieser Port wird als Primärport an einem Tank verwendet. Der Tank ist dann in der Fuhrparkansicht der Tankliste nicht mehr sichtbar.
                                        </div>
                                    </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>
                                                    <div class="input-group">
                                                        <input :class="{'form-control': true,'border-danger': (errors.hasOwnProperty(selectedAnalogPort) && (errors[selectedAnalogPort].measure || errors[selectedAnalogPort].missing)) && analogports[selectedAnalogPort].active == true}" v-model="analogProps.measured_min" @keyup="complete_ma('analog')">
                                                        <div class="input-group-text pl-2 pr-0" data-toggle="tooltip" title="Anzeige - Ignoriere Werte unter Min">
                                                            <div class="form-check form-switch  form-switch-lg p-0">
                                                                <input class="form-check-input m-0" type="checkbox" v-model="analogProps.ignore_under_min">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="input-group">
                                                        <input :class="{'form-control': true,'border-danger': (errors.hasOwnProperty(selectedAnalogPort) && (errors[selectedAnalogPort].measure|| errors[selectedAnalogPort].missing)) && analogports[selectedAnalogPort].active == true}" v-model="analogProps.measured_max" @keyup="complete_ma('analog')">
                                                        <div class="input-group-text pl-2 pr-0" data-toggle="tooltip" title="Anzeige - Ignoriere Werte über Max">
                                                            <div class="form-check form-switch  form-switch-lg p-0">
                                                                <input class="form-check-input m-0" type="checkbox" v-model="analogProps.ignore_over_max">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </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)) && analogports[selectedAnalogPort].active == true}" 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)) && analogports[selectedAnalogPort].active == true}" 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)) && analogports[selectedAnalogPort].active == true}" 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)) && analogports[selectedAnalogPort].active == true}" 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)) && analogports[selectedAnalogPort].active == true}" 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-text">
                                                            Toleranz Bezugszeitraum
                                                        </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-text">Von</div>
                                                        <input class="form-control" type="text" v-model="analogProps.capacity_from">
                                                        <div class="input-group-text">Bis</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="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 btn-outline-primary" :value="'Port ' + key"
                                           :class="{ 'active': key === selectedDigitalPort }" href="#" @click="selectedDigitalPort = key">
                                    <div class="input-group-text pl-2 pr-0">
                                        <div class="form-check form-switch  form-switch-lg p-0">
                                            <input class="form-check-input m-0" type="checkbox" :id="key" v-model="value.active" @change="selectDigitalPort(key)">
                                        </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">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="digitalProps.diagram">
                                        </div>
                                        <label class="m-0">Tankgrafik anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="digitalProps.tanklist">
                                        </div>
                                        <label class="m-0" for="device_active">in Tankliste anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="digitalProps.customerview">
                                        </div>
                                        <label class="m-0" for="device_active">in Kundenansicht anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="digitalProps.basiview">
                                        </div>
                                        <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="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" :value="'Port ' + key"
                                           :class="{'active': key === selectedVirtualPort, 'form-control btn btn-outline-primary': !Object.hasOwn(errors, key),'form-control btn': Object.hasOwn(errors, key), 'btn-danger text-white': Object.hasOwn(errors, key) && virtualports[key].active == true}" @click="selectVirtualPort(key)">
                                    <div class="input-group-text pl-2 pr-0">
                                        <div class="form-check form-switch form-switch-lg p-0">
                                            <input class="form-check-input m-0" type="checkbox" :id="key" v-model="value.active" @change="selectVirtualPort(key)">
                                        </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">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="virtualProps.diagram">
                                        </div>
                                        <label class="m-0" for="device_active">Tankgrafik anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="virtualProps.tanklist">
                                        </div>
                                        <label class="m-0" for="device_active">in Tankliste anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="virtualProps.customerview">
                                        </div>
                                        <label class="m-0" for="device_active">in Kundenansicht anzeigen</label>
                                    </div>
                                    <div class="col-md-6 mb-2 d-flex align-items-center">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" v-model="virtualProps.basiview">
                                        </div>
                                        <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>
                                            <tr>
                                                <td></td>
                                                <td>Min</td>
                                                <td>Max</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    Graphenbereich
                                                    <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)) && virtualports[selectedVirtualPort].active == true}" 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)) && virtualports[selectedVirtualPort].active == true}" v-model="virtualProps.capacity_max" @keyup="complete_ma('virtual')">
                                                </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 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-primary noload ms-2" @click="saveDevice()">Topas Gerät speichern</button>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('_resources/js/vue.min.js') }}"></script>
    <script>

        const {
            createApp,
            ref,
            reactive,
            computed,
            getCurrentInstance,
            toRaw
        } = Vue

        createApp({
            setup() {
                const id = ref({{ device.id }})
                const active = ref({{ device.active == true ? 'true':'false' }})
                const company = ref({{ device.company.id }})
                const topasID = ref('{{ device.topasId }}')
                const datanumber = ref('{{ device.datanumber }}')
                const recalculated = ref(false)
                const measurements = reactive({
                    {% for measurement in measurements %}
                    '{{ measurement.id }}': {'name': '{{ measurement.name }}'},
                    {% endfor %}
                })
                const errors = reactive({})
                const selectedAnalogPort = ref('A1')
                const selectedDigitalPort = ref('D1')
                const selectedVirtualPort = ref('V1')
                const analogports = reactive({{ analogPorts | raw }})
                const digitalports = reactive({{ digitalPorts | raw }})
                const virtualports = reactive({{ virtualPorts | raw }})
                const primaryports = reactive({{ primaryPorts | raw }})

                const analogProps = computed(() => {
                    return analogports[selectedAnalogPort.value]
                })
                const digitalProps = computed(() => {
                    return digitalports[selectedDigitalPort.value]
                })
                const virtualProps = computed(() => {
                    return virtualports[selectedVirtualPort.value]
                })

                function saveDevice() {
                    if (!topasID.value || topasID.value.trim() == '') {
                        toastr.warning('\'' + $('#topasid').parent().find('label').text() + '\' ist ungültig')
                        return
                    }
                    showLoading()
                    $.ajax({
                        url   : '{{ path('devices_save') }}',
                        method: 'POST',
                        data  : {
                            id          : id .value,
                            active      : active.value,
                            company     : company.value,
                            topasID     : topasID.value,
                            datanumber  : datanumber.value,
                            analogports : toRaw(analogports),
                            digitalports: toRaw(digitalports),
                            virtualports: toRaw(virtualports)
                        }
                    }).done(function (data) {
                        if (data.result == 1) {
                            window.location.replace("{{ path('devices') }}")
                        }
                    })
                }

                function selectAnalogPort(key) {
                    selectedAnalogPort.value = key
                    primaryPortInBasiView(key)
                    complete_ma('analog')
                }

                function selectDigitalPort(key) {
                    selectedDigitalPort.value = key
                }

                function selectVirtualPort(key) {
                    selectedVirtualPort.value = key
                    complete_ma('virtual')
                }

                function primaryPortInBasiView(key) {
                    analogports[key].basiview_error = false
                    var isPrimaryPort = false

                    for (var i = 0; i < primaryports.length; i++) {
                        if (primaryports[i] === key) {
                            isPrimaryPort = true
                            break
                        }
                    }

                    if (isPrimaryPort) {
                        if (analogports[key].basiview == false) {
                            analogports[key].basiview_error = true
                        }
                    }
                    return false
                }

                function complete_ma(type) {
                    try {
                        let ports = analogports
                        let sel = selectedAnalogPort.value
                        if (type == 'virtual') {
                            ports = virtualports
                            sel = selectedVirtualPort.value
                        }

                        let port = ports[sel]
                        port = normalizeNumbers(port)

                        let checkedData;
                        if (type == 'virtualports') {
                            checkedData = checkVirtualData(port, sel);
                        } else {
                            checkedData = checkData(port, sel);
                        }
                        if (!checkedData) {
                            ports[sel].measured_alarm_min = ''
                            ports[sel].measured_alarm_max = ''
                            ports[sel].measured_order = ''
                            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 = ports[sel].measured_alarm_min
                        let measured_alarm_max = ports[sel].measured_alarm_max
                        let measured_order = ports[sel].measured_order
                        if (!isNaN(min_mA) && !isNaN(max_mA) && !isNaN(minimum) && !isNaN(maximum)) {
                            let factor = (max_mA - min_mA) / (maximum - minimum)
                            let measured_order = ((order - minimum) * factor) + min_mA
                            ports[sel].measured_alarm_min = ((alarm_min - minimum) * factor) + min_mA
                            ports[sel].measured_alarm_max = ((alarm_max - minimum) * factor) + min_mA
                            ports[sel].measured_order = isNaN(measured_order) ? '' : measured_order
                        }
                        if (ports[sel].measured_alarm_min != measured_alarm_min ||
                            ports[sel].measured_alarm_max != measured_alarm_max ||
                            ports[sel].measured_order != measured_order) {
                            recalculated.value = true
                        }
                    } catch (e) {
                        console.log("CATCH");
                        console.log(e)
                    }
                }

                function checkData(port, key) {
                    if (port.active == false) {
                        delete errors[key]
                        return true;
                    }

                    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 (!isNaN(mMin) &&
                        !isNaN(mMax) &&
                        !isNaN(cMin) &&
                        !isNaN(cMax) &&
                        !isNaN(cAlarmMin) &&
                        !isNaN(cAlarmMax)
                    ) {
                        delete errors[key]
                        if (mMin >= mMax) {
                            if (!errors.hasOwnProperty(key)) {
                                errors[key] = {}
                            }
                            errors[key].measure = true
                        }
                        if (cMin >= cMax || cMin >= cAlarmMin || cMin >= cAlarmMax || cMax <= cAlarmMin) {
                            if (!errors.hasOwnProperty(key)) {
                                errors[key] = {}
                            }
                            errors[key].capacity = true
                        }
                        if (cMin > cAlarmMin || cAlarmMin >= cAlarmMax) {
                            if (!errors.hasOwnProperty(key)) {
                                errors[key] = {}
                            }
                            errors[key].capacityalarmmin = true
                        }
                        if (cMin >= cAlarmMax || cAlarmMin >= cAlarmMax) {
                            if (!errors.hasOwnProperty(key)) {
                                errors[key] = {}
                            }
                            errors[key].capacityalarmmax = true
                        }
                        if (!isNaN(cOrder)) {
                            if (cOrder >= cAlarmMax) {
                                if (!errors.hasOwnProperty(key)) {
                                    errors[key] = {}
                                }
                                errors[key].capacityalarmmax = true
                                errors[key].capacityorder = true
                            }
                            if (cOrder <= cAlarmMin) {
                                if (!errors.hasOwnProperty(key)) {
                                    errors[key] = {}
                                }
                                errors[key].capacityalarmmin = true
                                errors[key].capacityorder = true
                            }
                            if (cOrder <= cMin || cOrder >= cMax) {
                                if (!errors.hasOwnProperty(key)) {
                                    errors[key] = {}
                                }
                                errors[key].capacity = true
                                errors[key].capacityorder = true
                            }
                        }
                        if (errors[key]) {
                            return false
                        }
                        return true
                    } else {
                        if (!errors.hasOwnProperty(key)) {
                            errors[key] = {}
                        }
                        errors[key].missing = 3
                        return false
                    }
                }

                function checkVirtualData(port, key) {
                    if (port.active == false) {
                        delete errors[key]
                        return true;
                    }

                    let cMin = parseFloat(port.capacity_min)
                    let cMax = parseFloat(port.capacity_max)


                    if (!isNaN(cMin) &&
                        !isNaN(cMax)
                    ) {
                        delete errors[key]
                        if (cMin >= cMax) {
                            if (!errors.hasOwnProperty(key)) {
                                errors[key] = {}
                            }
                            errors[key].capacity = true
                        }
                        if (errors[key]) {
                            return false
                        }
                        return true
                    } else {
                        if (!errors.hasOwnProperty(key)) {
                            errors[key] = {}
                        }
                        errors[key].missing = 3
                        return false
                    }
                }

                function 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].trim() != '') {
                                port[field] = parseFloat(port[field]);
                            }
                        }
                    }
                    return port;
                }

                for (let i = 1; i <= 8; i++) {
                    selectedAnalogPort.value = 'A' + i
                    analogports['A' + i].key = 'A' + i
                    complete_ma('analog')
                    selectedVirtualPort.value = 'V' + i
                    complete_ma('virtual')
                }
                selectAnalogPort('A1')
                selectDigitalPort('D1')
                selectVirtualPort('V1')

                return {
                    id,
                    active,
                    company,
                    topasID,
                    datanumber,
                    recalculated,
                    measurements,
                    errors,
                    selectedAnalogPort,
                    selectedDigitalPort,
                    selectedVirtualPort,
                    analogports,
                    digitalports,
                    virtualports,
                    primaryports,
                    // computed
                    analogProps,
                    digitalProps,
                    virtualProps,
                    // functions
                    saveDevice,
                    selectAnalogPort,
                    selectDigitalPort,
                    selectVirtualPort,
                    primaryPortInBasiView,
                    complete_ma,
                    checkData,
                    checkVirtualData,
                    normalizeNumbers
                }
            },
            delimiters: [
                '{$',
                '}'
            ]
        }).mount('#app')


    </script>
{% endblock %}