<base href="/">
{% extends 'base.html' %}
        {% block custom_scripts %}
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
html {
  touch-action: manipulation;
}
</style>

		<script>
	function modechange(newmode) {
                $.post('/modechange', {newmode}, function(data) {
                        var text=data.msg;
                        var state=data.state
                        Swal.fire({
                                html: text,
                                icon: state,
                                showCloseButton: false,
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true,
                                didOpen: () => {
                        const b = Swal.getHtmlContainer().querySelector('b')
                        timerInterval = setInterval(() => {
                            b.textContent = Swal.getTimerLeft()
                        }, 100)
                    },
                    willClose: () => {
                        clearInterval(timerInterval)
                    }
                                                })
                        });
			}
        function flrchange(newmode) {
                $.post('/flrchange', {newmode}, function(data) {
                        var text=data.msg;
                        var state=data.state
                        Swal.fire({
                                html: text,
                                icon: state,
                                showCloseButton: false,
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true,
                                didOpen: () => {
                        const b = Swal.getHtmlContainer().querySelector('b')
                        timerInterval = setInterval(() => {
                            b.textContent = Swal.getTimerLeft()
                        }, 100)
                    },
                    willClose: () => {
                        clearInterval(timerInterval)
                    }
                                                })
                        });
                        }

        function statechange(mode, value) {
		if (mode == "pdhw") {
			$("#"+mode+"-loading-overlay")[0].classList.remove("d-none")
		} else {
			$("#heat-loading-overlay")[0].classList.remove("d-none")
		}
            $.post('/statechange', {mode: mode, value: value}, function(data) {
                var text=data.msg;
                var state=data.state;
		appendAlert(text, state);
                if (mode == "pdhw") {
                        $("#"+mode+"-loading-overlay")[0].classList.add("d-none")
                } else {
                        $("#heat-loading-overlay")[0].classList.add("d-none")
                }

            });
        }
	function tchange(which,temp, direct) {
	//$.post('/tempchange', {which: which, value: temp, directly: direct}, function(data) {
        //                var text=data.msg;
         //               var state=data.state;
	//		appendAlert(text, state);
         //               });
		socket.emit("client", {tempchange:which, value:temp, directly:direct})
				}
/*        function tempchange(which, directly) {
        if (which ==  "heat") {
            minimum=minch
            maximum=maxch
            stepp=0.1
            inputval=temp
        }
        if (which == "dhw") {
            minimum=30
            maximum=55
            stepp=1
            inputval=dhwsetpoint
        }
            (async () => {
                const { value: inputValue } = await Swal.fire({
					title: "{{ _('Change temperature') }}",
                    input: 'range',
                    inputAttributes: {
                        min: minimum,
                        max: maximum,
                        step: stepp
                    },
                    inputValue: inputval
                })
                if (confirm) {
                    $("#"+which)[0].classList.add("spinn")
                    $("#"+which)[0].classList.add("iconspinner")
                    var data = inputValue
                    $.post('/tempchange', {which: which, value: data, directly: directly}, function(data) {
                        var text=data.msg;
                        var state=data.state
                        Swal.fire({
                            html: text,
                            icon: state,
                            showCloseButton: false,
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true,
                            didOpen: () => {
                                const b = Swal.getHtmlContainer().querySelector('b')
                                timerInterval = setInterval(() => {
                                    b.textContent = Swal.getTimerLeft()
                                }, 100)
                            },
                            willClose: () => {
                                clearInterval(timerInterval)
                            }
                        })
                    $("#"+which)[0].classList.remove("spinn")
                    $("#"+which)[0].classList.remove("iconspinner")
                    });
                }


            })()
        }*/


        //setInterval(getdata, 2000);
	</script>
        {% endblock %}
{% block page_body %}
<div class="modal fade" id="restartModal" tabindex="-1" aria-lebelledby="restartModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5  data-i18n="restartsercice" class="modal-title">Service restart</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<div>Czy jesteś pewny że chcesz zrestartować usługę?</div>
				<button class="btn btn-danger" id="restartBtn">Restart</button>
				<button class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Zmień hasło</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="newPassword" class="form-label">Nowe hasło</label>
                    <input type="password" class="form-control" id="newPassword" required>
                    <div class="invalid-feedback">Hasło musi mieć min. 8 znaków, wielką literę, cyfrę i znak specjalny.</div>
                </div>
                <div class="mb-3">
                    <label for="confirmPassword" class="form-label">Powtórz hasło</label>
                    <input type="password" class="form-control" id="confirmPassword" required>
                    <div class="invalid-feedback">Hasła nie są identyczne.</div>
                </div>
                <button class="btn btn-outline-success w-100" id="submitBtn" disabled>Zmień hasło</button>
            </div>
        </div>
    </div>
</div>
                <div class="container-fluid px-lg-5 py-lg-3">
		            <div class="row gx-4 gx-lg-5">
                        <div class="col-md-6 mb-1">
                            <div class="card h-100 shadow">


<div class="input-group card-header">
  <span class="input-group-text" id="basic-addon1" data-i18n="chtemp"></span>
<button id="curvecalc-btn" class="btn btn-outline-secondary focus-ring focus-ring-warning" data-i18n="[data-bs-title]recalctooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title=""><b id="hcurve">20</b>℃   <span id="button-spinner" class="spinner-border spinner-border-sm d-none" role="status"></span>
</button>
<select class="form-select form-select-sm w-sm-auto w-auto" id="powerheat">
  <option value="" selected disabled hidden>Status</option>
  <option value="pch" data-i18n="heating">Heating</option>
  <option value="pcool" data-i18n="cooling">Cooling</option>
  <option value="off" data-i18n="off">OFF</option>
</select>
         <span class="input-group-text" id="basic-addon1">
  <i class="bi bi-power" id="firestatus" data-i18n="[data-bs-title]firestatus" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title=""></i></span>
</div>
                                <div class="card-body position-relative">
    <div id="heat-loading-overlay" class="position-absolute top-0 start-0 w-100 h-100 bg-body bg-opacity-75 d-flex align-items-center justify-content-center d-none">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
					<div class="row mb-3">
						<div class="col">
							<p class="card-text" data-i18n="actintemp"></p></div>
						<div class="col-auto">
							<b id="intemp">N.A.</b>&#8451;
						</div>
					</div>
					<div class="row mb-3">
						<div class="col">
							<p class="card-text" data-i18n="setintemp"></p>
						</div>
						<div class="col-auto">
							<b id="setpoint">N.A.</b>&#8451;
						</div>
					</div>
					<div class="row">
						<div class="col">
							<p class="card-text" data-i18n="actouttemp"></p>
						</div>
						<div class="col col-auto">
							<b id="outtemp">N.A.</b>&#8451;{% if outsidetemp == 'openmeteo' %} <a href="https://open-meteo.com/">Weather data by Open-Meteo.com</a>{% endif %}
						</div>
					</div>
					
                                </div>
				<div class="card-footer">
					<!--<a class="btn btn-primary btn-lm float-sm-start" id="heat" onclick="tempchange('heat', '0')" href="#!">{{ _('Zmień zadaną wewnątrz') }}</a>-->
<div class="input-group">
  <button class="btn btn-outline-secondary" style="width: 20% !important" type="button" id="water-decrement-button" onclick="$('#intempval').val(parseFloat(parseFloat($('#intempval').val())-0.2).toFixed(1))"> - </button>
  <input type="number" class="form-control" placeholder=""  value="22" aria-label="" aria-describedby="button-addon1" disabled style="text-align: center" id="intempval">
    <button class="btn btn-outline-secondary" style="height: 20% !important; width: 20% !important" type="button" id="water-increment-button"> + </button>

</div>
<!--<a class="float-sm-end" id="pch" onclick="statechange('pch','on')" href="#"><i id="heatpower" class="iconpower"></i></a>-->
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-1">
                            <div class="card h-100 shadow">
				    <div class="input-group card-header">
					    <span class="input-group-text" id="basic-addon1" data-i18n="dhwsettemp"></span>
  <span class="input-group-text"><b id="dhwsetpoint">N.A.</b>℃ </span>
</button>
<select class="form-select form-select-sm w-sm-auto w-auto" id="powerdhw" onchange="statechange('pdhw', this.value)">
  <option value="" selected disabled hidden>...</option>
  <option value="on" data-i18n="on">ON</option>
  <option value="off" data-i18n="off">OFF</option>
</select>
         <span class="input-group-text" id="basic-addon1">
  <i class="bi bi-power" id="dhwstatus" data-i18n="[data-bs-title]firestatus" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title=""></i>

	 </span>
</div>

                                    <!--<div class="card-header d-flex flex-column flex-sm-row justify-content-between align-items-center">
					<h3 class="card-title text-nowrap mb-2 mb-sm-0">

                                           <i class="icondhw"></i>&nbsp{{ _('Zadana CWU: ') }}<b id="dhwsetpoint">N.A.</b>&#8451;</h3>

<select class="form-select form-select-sm w-sm-auto w-auto ms-4">
	<option value="0">OFF</option>
  <option value="1">ON</option>
</select>
				    </div>-->
                                <div class="card-body position-relative">
					    <div id="pdhw-loading-overlay" class="position-absolute top-0 start-0 w-100 h-100 bg-body bg-opacity-75 d-flex align-items-center justify-content-center d-none">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

				<div class="row mb-3">
					<div class="col">
						<p class="card-text" data-i18n="actdhwtemp"></p>
					</div>
					<div class="col-auto">
						<b id="ttemp">N.A.</b>&#8451;
					</div>
				</div>
                                </div>
				<div class="card-footer">
<div class="input-group">
  <button class="btn btn-outline-secondary" style="width: 20% !important" type="button" id="dhw-decrement-button"> - </button>
  <input type="number" class="form-control" placeholder=""  value="0" aria-label="" aria-describedby="" disabled style="text-align: center" id="dhwtempval">
    <button class="btn btn-outline-secondary" style="height: 20% !important; width: 20% !important" type="button" id="dhw-increment-button"> + </button>

</div>


					<!--<a class="btn btn-primary btn-lm float-sm-start" id="dhw" onclick="tempchange('dhw', '1')" href="#!">{{ _('Zmień zadaną CWU') }}</a>
					<a class="float-sm-end" id="pdhw" onclick="statechange('pdhw','on')" href="#"><i id="dhwpower" class="iconpower"></i></a>-->
                                </div>
                            </div>
                        </div>
                  <!--      <div class="col-md-4 mb-1">
                            <div class="card h-100">
                                <div class="card-body">
					<h3 class="card-title"><i class="iconcool"></i>&nbsp{{ _('Chłodzenie') }}</h3>
					<p class="card-text">{{ _('Wilgotność wewnątrz: ') }}<b id="humid">N.A.</b> %</p>

                                </div>
				<div class="card-footer"><a class="btn btn-primary btn-lm float-sm-start" id="cool" onclick="tempchange('cool')" href="#!">{{ _('Zmień temp. chłodzenia') }}</a>
                                    <a class="float-sm-end" id="pcool" onclick="statechange('pcool','on')" href="#"><i id="coolpower" class="iconpower"></i></a>
                                </div>
			    </div>
		  </div>-->
                    </div>
                </div>
                <div class="container-fluid px-lg-5 py-lg-3">
                    <div class="row gx-4 gx-lg-5">
                        <div class="col-md-4 mb-1">
                            <div class="card h-100 shadow">
                                <div class="card-body">
					<div class="row">
						<div class="col">
							<p class="card-text" data-i18n="dash.two"></p>
						</div>
						<div class="col-auto">
							<b id="two">N.A.</b> &#8451;</p>
						</div>
					</div>
					<div class="row mb-3">
                                                <div class="col">
							<p class="card-text" data-i18n="dash.pump"></p>
						</div>
                                                <div class="col-auto">
							<b id="pump">N.A.</b>
						</div>
					</div>
					<div class="row mb-3">
                                                <div class="col">
							<p class="card-text" data-i18n="dash.threeway"></p>
						</div>
                                                <div class="col-auto">
							<b id="threeway">N.A.</b>
						</div>
                                        </div>
					<div class="row">
                                                <div class="col">
							<p class="card-text" data-i18n="dash.freq"></p>
						</div>
                                                <div class="col-auto">
							<b id="fact">N.A.</b> Hz
						</div>
                                        </div>
			    </div>
			<div class="card-footer">
					<a class="btn btn-outline-secondary btn-lm float-sm-start" href="/parameters" data-i18n="parameters"></a>
                                </div>
                        </div>
		</div>
						<div class="col-md-4 mb-1">
                            <div class="card h-100 shadow">
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col">
						<h5 class="card-title" data-i18n="freqlimit">Frequency limit: </h5></div> <div class="col-auto"><b id="flimit">N.A.</b></div>
                                        <div class="col-auto">
                                            <div class="custom-control custom-switch">
						<form method="POST">
                                                    <select class="form-select" aria-label="flimitchange" id="flimitchange" style="display: none;" name="flimitchange" onchange="flrchange($('#flimitchange').val())">
                                                        <option data-i18n="flimitchangeon" value="1">ON</option>
                                                        <option data-i18n="flimitchangeoff" value="0">OFF</option>
                                                    </select>
                                                    <span class="custom-control-label"></span>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
				                                        <div id="flimitauto" style="display: none;">
										<div class="row mb-3">
											<div class="col">
												<p class="card-text" data-i18n="flimitton">{{ _('Temperatura załączania: ')}}</p>
											</div>
											<div class="col-auto">
												><b id="ltemp">N.A.</b>°C
											</div>
										</div>
										<div class="row">
											<div class="col">
												<p class="card-text" data-i18n="flimitrelstat">{{ _('Status przekaźnika (CN23): ') }}</p>
											</div>
											<div class="col-auto">
												<b id="flrelay">N.A.</b>
											</div>
										</div>
									</div>
                                </div>
                                <div class="card-footer">
					<a class="btn btn-outline-secondary btn-lm float-sm-start" href="/settings#settings-hcurve" data-i18n="settings">Ustawienia</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-1" id="presetdiv">
                            <div class="card h-100 shadow">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col">
						<h5 class="card-title" data-i18n="ind.modech">{{ _('Wybór trybu:') }}<b id="preset">N.A.</b></h5>
                                        </div>
                                        <div class="col-auto">
                                            <div class="custom-control custom-switch">
                                                <form method="POST">
                                                    <select class="form-select" aria-label="presetchange" id="presetchange" style="display: none;" name="presetchange" onchange="modechange($('#presetchange').val())">
                                                        <option value="quiet">CICHY</option>
                                                        <option value="eco">EKO</option>
                                                        <option value="turbo">TURBO</option>
                                                    </select>
                                                    <span class="custom-control-label"></span>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
				    <div id="presetauto" style="display: none;">
                                    <div class="row"><div class="col"><p class="card-text" id="quiet">QUIET </p></div><div class="col">&gt;</div>
					    <div class="col"><b id=presetquiet></b> °C
</div></div>
                                    <div class="row"><div class="col"><p class="card-text" id="eco">ECO </p></div></div>
				    <div class="row"><div class="col"><p class="card-text" id="turbo">TURBO</p></div><div class="col">&lt;</div><div class="col"><b id="presetturbo"></b> °C
					    </div>
</div></div>
                                </div>
                                <div class="card-footer">
					<a class="btn btn-outline-secondary btn-lm float-sm-start"  href="/settings#settings-hcurve" data-i18n="settings">Ustawienia</a>

                                </div>
                            </div>
                        </div>
        <div class="col-md-4 mb-1" id="antionoffdiv" style="display: none">
            <div class="card h-100 shadow">
                <div class="card-body">
                   <h6 class="card-title d-flex align-items-center justify-content-between">
					<span data-i18n="ind.aood">{{ _('Tryb Anty ON-OFF "Delta"') }}</span>
					<span>Δt = <b id="delta"></b> °C</span>
					</h6>

                    <div class="row align-items-center">
                        <div class="col"><p class="card-text mode-label" data-i18n="freqlimit" id="flimiton-label">Ograniczenie częstot.</p></div>
                        <div class="col-auto text-center">&lt;</div>
                        <div class="col-auto text-center"><b id="deltatempflimit"></b>  °C</div>
                    </div>

                    <div class="row align-items-center">
                        <div class="col"><p class="card-text mode-label" id="quiet-label">Quiet</p></div>
                        <div class="col-auto text-center">&lt;</div>
                        <div class="col-auto text-center"><b id="deltatempquiet"></b>  °C</div>
                    </div>

                    <div class="row align-items-center">
                        <div class="col"><p class="card-text mode-label" id="eco-label">Eco</p></div>
                    </div>

                    <div class="row align-items-center">
                        <div class="col"><p class="card-text mode-label" id="turbo-label">Turbo</p></div>
                        <div class="col-auto text-center">&gt;</div>
                        <div class="col-auto text-center"><b id="deltatempturbo"></b>  °C</div>
                    </div>

                    <div class="row mt-2 align-items-center">
                        <div class="col"><p class="card-text" data-i18n="set.aoodt">{{ _('Czas przeliczania delty:') }}</p></div>
                        <div class="col-auto text-center"><b id="antionoffdeltatime"></b> '</div>
                    </div>

                </div>
                <div class="card-footer">
                    <a class="btn btn-outline-secondary btn-lm float-sm-start" href="/settings" data-i18n="settings">Ustawienia</a>
                </div>
            </div>
        </div>
</div>
</div>
        <script src="{{ url_for('static', filename='longtouch.js') }}"></script>
	<!--        <script src="{{ url_for('static', filename='custom.js') }}"></script>-->
		<script>

$(document).ready(function () {
				translateElement("flrelay");
translateElement("pump");
translateElement("threeway");
  $("#powerheat").change(function () {
	                //if (mode == "pdhw") {
                        $("#heat-loading-overlay")[0].classList.remove("d-none")
                        //$("#heat-loading-overlay")[0].classList.remove("d-none")
			socket.emit('client', {mode: $(this).val(), value: 'on'})
           /* $.post('/statechange', {mode: mode, value: value}, function(data) {
                var text=data.msg;
                var state=data.state;
                appendAlert(text, state);
                if (mode == "pdhw") {
                        $("#"+mode+"-loading-overlay")[0].classList.add("d-none")
                } else {
                        $("#heat-loading-overlay")[0].classList.add("d-none")
                }

            });*/

			  });
  // Obsługa kliknięcia przycisku
  $("#curvecalc-btn").click(function () {
	$("#hcurve").text("Obliczanie...");
	$("#button-spinner").removeClass("d-none");
    socket.emit('client', { curvecalc: 'curvecalc' });
    // Zmień zawartość przycisku na kręcące się kółko
/*    $("#hcurve").text("Obliczanie..."); // Zmień tekst
    $("#button-spinner").removeClass("d-none"); // Pokaż spinner
    // Wyślij żądanie GET na endpoint /curvecalc
    $.get("/curvecalc", function (data) {
      // Obsłuż odpowiedź
      console.log("Odpowiedź z serwera:", data);
	appendAlert(data.msg, 'success');
      // Przywróć oryginalną zawartość przycisku
      $("#hcurve").text(data.msg);
      $("#button-spinner").addClass("d-none"); // Ukryj spinner
    }).fail(function (error) {
      // Obsłuż błąd
      console.error("Błąd podczas wysyłania żądania:", error);
	appendAlert(error, 'danger')
      // Przywróć oryginalną zawartość przycisku
      $("#button-text").text("Oblicz krzywą");
      $("#button-spinner").addClass("d-none"); // Ukryj spinner

      // Opcjonalnie: Wyświetl komunikat o błędzie
 //     alert("Wystąpił błąd podczas obliczania krzywej.");
	appendAlert("Wystąpił nieoczekiwany błąd", 'danger')
    }); */
  });
});
		</script>
        <script src="{{ url_for('static', filename='socket.js') }}"></script>
{% endblock %}

