Hallo zusammen,
ich habe eine FTUI Oberfläche fürs Handy. Habe dafür größtenteils das nav_mobile Template genutzt.
Ich hab eine Seite auf der alle Temperatursensoren angezeigt werden. Ich würde jetzt dort gerne auf einen Sensor klicken um dann die Details (Chart mit Verlauf) zu sehen. Ich wollte es elegant lösen und nicht für jeden TempSensor eine detail.html bauen. Daher war meine Idee den Device Namen mittels HTTP GET Request immer an die gleiche temperatur_detail.html zu geben. Dort wird der Device Name per JS ausgelesen und dynamisch in das Chart eingefügt.
Unten sehr ihr meinen Code. Der Übersichtlichkeit halber hab ich alles gekürzt, was nichts mit dem Problem zu tun hat und auch erstmal nur einen TempSensor in der temperatur.html.
Ich hänge jetzt aktuell an der Stelle, dass der Link aus der temperatur.html nicht funktioniert, weil die Navigation nicht direkt über die Dateinamen sondern über das Attribut "data-load" in der index.html läuft. Ich weiß nicht wie ich dort die Device Namen aus dem HTML GET abgreifen soll ohne alle TempSensoren in die Navigation einzubauen.
Hat einer einen Tipp für mich oder einen anderen Ansatz wie ich meine Detailansicht realisieren könnte?
Danke und Grüße,
Tobelix
index.html
<body>
<!-- Demo FTUI 2.6 mobil page with slideout navigation -->
<nav id="menu">
<div data-type="link" class="default large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-home"
data-color="white"
data-text-align="right"
data-load="#content_temperatur"
data-url="#content_temperatur.html"
data-active-color="green"
data-active-pattern="(.*index.html|.*#content_temperatur.html)">Temperatur</div>
<div data-type="link" class="large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-thermometer"
data-color="white"
data-text-align="right"
data-load="#content_temperatur_detail"
data-url="#content_temperatur_detail.html"
data-active-color="green"
data-active-pattern=".*#content_temperatur_detail.html*">Temperatur Details</div>
</nav>
<main id="panel" class="">
<header id="header-nav" class="bg-lightgray row">
<div data-type="slideout" class="col-1-8 bigger center-align notouch"></div>
<div id="linkname" class="col-3-6 large bold center middle"></div>
</header>
<div class="page" id="content_temperatur"></div>
<div class="page" id="content_temperatur_detail"></div>
</main>
</body>
content_temperatur.html
<body>
<div class="page" id="content_temperatur">
<a href=#content_temperatur_detail.html?device=EG_AA_TF><section>
<div class="large col-1-2 left-align left-space">Außen</div>
<div class="large col-1-2 left-space">
<div class="large col-1-4" data-type="label" data-device="EG_AA_TF" data-get="temperature" data-icon="fa-temperature" data-limits='[18,20,23]'
data-colors='["blue","green","#FF0000"]' data-unit="°C">
</div>
<div class="large col-1-4 left-space" data-type="label" data-device="EG_AA_TF" data-get="humidity" data-icon="fa-temperature" data-limits='[39,40,61]'
data-colors='["white","green","#FF0000"]' data-unit="%">
</div>
</div>
</section></a>
</div>
</body>
content_temperatur_detail.html
<head>
<script>
//GET Parameter auslesen und entsprechend an das Chart weitergeben
//https://stackoverflow.com/questions/19491336/how-to-get-url-parameter-using-jquery-or-plain-javascript
function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
}
};
var device = getUrlParameter('device');
var logdevice = "FileLog_"+ device;
$("#chart").attr("data-device",device);
$("#chart").attr("data-logdevice",logdevice);
</script>
<title>Test Temp</title>
</head>
<body>
<div class="page" id="content_temperatur_detail">
<section style="transform: rotate(90deg);">
<div id="chart"
data-type="chart"
data-logfile="-"
data-columnspec='["4:temperature","4:humidity"]'
data-style='["ftui l2","ftui l1fill"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temperatur","Feuchtigkeit"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="0"
data-maxvalue="35"
data-yunit_sec="%"
data-ytext_sec="Luftfeuchtigkeit"
data-height="250"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-nofulldays="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"
data-timeranges='[
["Aktuelle Woche","0W","-1W"],
["Letzte Woche","1W","0W"],
["Heute","0D","-1D"],
["Gestern","1D","0D"]
]'>
</div>
</section>
</div>
</body>