?Problem beim Einbinden von Template

FlorianSenne · 11 Dezember 2023, 11:46:31

Hallo zusammen,

ich bin gerade dabei, für die einzelnen Stockwerke/displays spezifische html´s zu machen. Aufbau meiner Seiten ist immer:

1) Index.html
2) dann die jeweilige Seite für das Display; hier eg.html
3) Temples welche ich einbinde, zB die Wettervorhersage; hier Wetter.html

Nun habe ich folgende Codes:
Index-html:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <script src="../js/fhem-tablet-ui.js" defer></script>
    <title>Display EG</title>
    <meta name='toast' content='0'>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>


<body>
<div class="gridster">

    <ul>
        <li data-row="1" data-col="1"  data-template="eg.html"></li>
        
    </ul>
</div>
</body>
</html>

eg-html:

Code Auswählen

<!DOCTYPE html>
<html>


<head></head>

<body>
    <div class="gridster">
        <ul>


<!-- Zeile 1-4; Reihe 1-4; links - Wetter -->

            <li data-row="1" data-col="1" data-sizex="4" data-sizey="4" data-template="wetter.html" class="">
                
            </li>  


<!-- Zeile 1-4; Reihe 5-6 rechts - Automatiken -->            

            <li data-row="1" data-col="5" data-sizex="2" data-sizey="4">
                    
                <div class="sheet">
                    <div class="row">
                    <div class="display-topcenter top-space bigger bold">Automatik</div>
                    </div>          
                            <div class="row">

                            <div data-size="150%" data-type="switch" data-device="EG_Z_AU_schalt" data-set-on="on" data-set-off="off" data-icon="fa-power-off" class="top-narrow-2x"></div>
                            <div data-type="label" class="big">Urlaub</div>
                            </div>              

                            <div class="row">

                            <div data-size="150%" data-type="switch" data-device="EG_Z_AS_schalt" data-set-on="on" data-set-off="off" data-icon="fa-power-off" class="top-narrow-2x"></div>
                            <div data-type="label" class="big">Sonne</div>
                            </div>

                            <div class="row">

                            <div data-size="150%" data-type="switch" data-device="EG_Z_AA_schalt" data-set-on="on" data-set-off="off" data-icon="fa-power-off" class="top-narrow-2x"></div>
                            <div data-type="label" class="big">Abend</div>
                            </div>  

                            <div class="row">

                            <div data-size="150%" data-type="switch" data-device="EG_Z_MA_schalt" data-set-on="on" data-set-off="off" data-icon="fa-power-off" class="top-narrow-2x"></div>
                            <div data-type="label" class="big">Morgen</div>
                            </div>                       
                   
                </div>
            </li>

<!-- Zeile 5-6; Reihe 1-2; links - Rollos Zentral -->


             <li data-row="5" data-col="1" data-sizex="2" data-sizey="2" >
                
            <div class="sheet">
                <div class="row">
                <div class="class display-topcenter top-space bigger bold">Rollo</div>
                </div>
                    
                        <div class="row">

                            <div class="cell">

                            <div 
                            data-size="150%" 
                            data-type="push" 
                            data-device="EG_Z_R_auf" 
                            data-set-on="on" 
                            data-set-off="off" 
                            data-icon="fa-arrow-up" 
                            class="top-narrow-2x"
                            ></div>
                            <div data-type="label" class="big">AUF</div>
                            </div>   

                            <div class="cell">

                            <div data-size="150%" 
                            data-type="push" 
                            data-device="EG_Z_R_ab" 
                            data-set-on="on" 
                            data-set-off="off" 
                            data-icon="fa-arrow-down" 
                            class="top-narrow-2x"
                            ></div>
                            <div data-type="label" class="big">AB</div> 

                            </div>
                        </div>

                </div>
            </li>

<!-- Zeile 5-6; Reihe 3-6; rechts - Licht Keller - Hausgang -->
         
            <li data-row="5" data-col="3" data-sizex="4" data-sizey="2">

                 <div class="sheet">

                        <div class="row">
                        <div class="cell display-topcenter top-space bigger bold">Licht und Tor</div>
                        </div>
                    
                        <div class="row">


                            <div class="cell">
                            <div 
                            data-size="150%"
                            data-type="symbol"
                            data-device="KG_L_status"
                            data-states='["on", "off"]'
                            data-icon='["fa-lightbulb","fa-lightbulb"]'
                            data-colors='["#aa6900","#505050"]'
                            class="top-narrow-2x"
                            onclick="ftui.setFhemStatus('set KG_L_zentral_AUS_tast trigger')"
                            ></div>
                            <div data-type="label" class="big">Kellerlicht            
                            </div>
                            </div> 
                            
                            <div class="cell">
                            <div 
                            data-size="150%" 
                            data-type="switch" 
                            data-device="KG_HG_L_schalt" 
                            data-set-on="on" 
                            data-set-off="off" 
                            data-icon=""
                            data-colors='["#aa6900","#505050"]'
                            data-background-icon="fa-lightbulb"
                            class="top-narrow-2x small"
                            ></div>
                            <div data-type="label" class="top-space big">Dauerlicht HG</div>
                            </div> 


                            <div class="cell">
                            <div 
                            data-size="150%" 
                            data-type="push" 
                            data-device="KG_G_T_schalt_ZU" 
                            data-set-on="on" 
                            data-set-off="off" 
                            data-size="150%" 
                            class=""
                            ></div>
                            <div data-type="label" class="">Tor Einfahrt</div> 
                            </div> 

                        </div>                       
                </div>
            </li>


        </ul>
    </div>
</body>

</html>

wetter.html

Code Auswählen

<!DOCTYPE html>
<html>
<head>
</head>
<body>

 <div class="gridster">
    <!--
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
 -->
    <div class="container top-space"></div> 



    <div class="sheet">

            <div data-type="label" class="cell bigger  bold">Wetter Heute</div> 
        <div class="row">     
            <div class="col-1-3">
                <div data-type="label" class="cell bigger">Vormittag</div>
                <div data-type="weather" data-device="WetterNuernberg" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="cell"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc0_weatherMorning" class="cell top-narrow bigger"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc0_temp06" data-unit="%B0C%0A" class="cell bigger bold" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
            </div>
            <div class="col-1-3">
                <div data-type="label" class="cell bigger">Mittag</div>
                <div data-type="weather" data-device="WetterNuernberg" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc0_weatherDay" class="cell top-narrow bigger"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc0_temp12" data-unit="%B0C%0A" class="cell bigger bold" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
            </div>
            <div class="col-1-3">
                <div data-type="label" class="cell bigger">Abend</div>
                <div data-type="weather" data-device="WetterNuernberg" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="cell"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc0_weatherEvening" class="cell top-narrow bigger"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc0_temp18" data-unit="%B0C%0A" class="cell bigger bold" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
            </div>
        </div>

    <div data-type="label" class="cell bigger  bold">Wettervorhersage</div>

        <div class="row">       
            <div class="col-1-3">
                <div data-type="label" data-device="WetterNuernberg" data-get="fc1_date" class="cell top-narrow bigger"></div>
                <div data-type="weather" data-device="WetterNuernberg" data-get="fc1_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc1_weatherDay" class="cell top-narrow bigger"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc1_tempMax" data-unit="%B0C%0A" class="cell bigger bold" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
            </div>
            <div class="col-1-3">
                <div data-type="label" data-device="WetterNuernberg" data-get="fc2_date" class="cell top-narrow bigger"></div>
                <div data-type="weather" data-device="WetterNuernberg" data-get="fc2_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc2_weatherDay" class="cell top-narrow bigger"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc2_tempMax" data-unit="%B0C%0A" class="cell bigger bold" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
            </div>
            <div class="col-1-3">
                <div data-type="label" data-device="WetterNuernberg" data-get="fc3_date" class="cell top-narrow bigger"></div>
                <div data-type="weather" data-device="WetterNuernberg" data-get="fc3_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc3_weatherDay" class="cell top-narrow bigger"></div>
                <div data-type="label" data-device="WetterNuernberg" data-get="fc3_tempMax" data-unit="%B0C%0A" class="cell bigger bold" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
            </div>
        </div>
    </div>





    <!-- <div class="container top-space-3x"> </div> -->
    
<!--

        <div data-type="label" class="cell bigger darker">Bamberg</div>
    

 <div class="sheet">
        <div class="row">       
            <div class="col-1-3">
                <div data-type="label" class="cell top-space narrow">morgens</div>
                <div data-type="weather" data-device="WetterBamberg" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="cell"></div>
                <div data-type="label" data-device="WetterBamberg" data-get="fc0_weatherMorning" class="cell top-narrow"></div>
                <div data-type="label" data-device="WetterBamberg" data-get="fc0_temp06" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
            </div>
            <div class="col-1-3">
                <div data-type="label" class="cell top-space narrow">mittags</div>
                <div data-type="weather" data-device="WetterBamberg" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
                <div data-type="label" data-device="WetterBamberg" data-get="fc0_weatherDay" class="cell top-narrow"></div>
                <div data-type="label" data-device="WetterBamberg" data-get="fc0_temp12" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
            </div>
            <div class="col-1-3">
                <div data-type="label" class="cell top-space narrow">abends</div>
                <div data-type="weather" data-device="WetterBamberg" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="cell"></div>
                <div data-type="label" data-device="WetterBamberg" data-get="fc0_weatherEvening" class="cell top-narrow"></div>
                <div data-type="label" data-device="WetterBamberg" data-get="fc0_temp18" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
            </div>
        </div>
    </div>

-->

 </div>

 <!--
</li>
-->

</body>
</html>

Fehler ist, dass das Feld für die Wetter.html leer bleibt, sprich das template nicht eingebunden wird. Kopiere ich den Inhalt der eg.html in die Index html wird alles anstandslos angezeigt.
Alle Dateien liegen im selben Ordner.

Da ich leider was html angeht nicht besonders fit bin die Frage, wo ich hier einen Fehler gemacht habe? Oder kann man die Templates generell nicht verschachteln?

Danke euch und VG
Florian

FHEM Forum

?Problem beim Einbinden von Template

FlorianSenne