refactor(static): add base component types

gallery/easel/route/view/common/templates/base.html

@@ -23,7 +23,6 @@
   <div class="app col-lg-8 mx-auto p-3 py-md-5">
     {% if not is_widget %}
     <header class="app-header pb-3 mb-5 border-bottom">
-      <div>{{request.query_params.widget}}</div>
       <div class="link-list">
         <app-link href="/"
                   icon="gear">API Gallery</app-link>

gallery/easel/route/view/schedule/route.py

@@ -45,7 +45,7 @@ async def get_schedule_index(request: AppRequest, provider: str | None = None, q
     return templates.TemplateResponse(
         request=request,
         name="index.html",
-        context={"channels": channels, "groups": GROUP_MAP.keys()},
+        context={"channels": [item.model_dump() for item in channels], "groups": GROUP_MAP.keys()},
     )
 
 

gallery/easel/route/view/schedule/templates/index.html

@@ -35,23 +35,26 @@
   </div>
 </form>
 {% if channels %}
-<ul id="channels"
-    class="list-group mb-5">
-  {% for channel in channels %}
-  <schedule-channel channel="{{channel.model_dump() | tojson | forceescape}}"
-                    addeable></schedule-channel>
-  {% endfor %}
-</ul>
-<hr>
+<div class="mb-4">
+  <schedule-channel-list value="{{channels | tojson | forceescape}}"
+                         onclick="scheduleChannelManager.store(element)"
+                         onadd="scheduleChannelManager.add(element)"></schedule-channel-list>
+  <hr>
+</div>
 {% endif %}
-<ul id="storedChannels"
-    class="list-group mb-4">
-</ul>
-<ul class="list-group">
-  {% for group in groups %}
-  <schedule-channel-group group="{{group}}"></schedule-channel-group>
-  {% endfor %}
-</ul>
+<div class="mb-4">
+  <h3>{{_("Stored channels")}}</h3>
+  <schedule-channel-list id="storedChannels"
+                         onremove="scheduleChannelManager.remove(element)"></schedule-channel-list>
+</div>
+<div class="mb-4">
+  <h3>{{_("Channel groups")}}</h3>
+  <ul class="list-group">
+    {% for group in groups %}
+    <schedule-channel-group value="{{group | tojson | forceescape}}"></schedule-channel-group>
+    {% endfor %}
+  </ul>
+</div>
 <script>
   (function () {
     const params = new URLSearchParams(window.location.search);
@@ -59,9 +62,8 @@
     if (searchQuery) {
       document.querySelector('#query').value = searchQuery;
     }
-
     document.addEventListener("DOMContentLoaded", (event) => {
-      scheduleChannelManager.loadChannels('#storedChannels');
+      scheduleChannelManager.load();
     });
   })();
 </script>

gallery/easel/route/view/weather/route.py

@@ -53,7 +53,7 @@ async def get_weather_index(request: AppRequest, provider: str | None = None, qu
     return templates.TemplateResponse(
         request=request,
         name="index.html",
-        context={"locations": locations},
+        context={"locations": [item.model_dump() for item in locations]},
     )
 
 

gallery/easel/route/view/weather/templates/index.html

@@ -35,17 +35,18 @@
   </div>
 </form>
 {% if locations %}
-<ul id="locations"
-    class="list-group mb-5">
-  {% for location in locations %}
-  <weather-location location="{{location.model_dump() | tojson | forceescape}}"></weather-location>
-  {% endfor %}
-</ul>
-<hr>
+<div class="mb-4">
+  <weather-location-list value="{{locations | tojson | forceescape}}"
+                         onclick="weatherLocationManager.store(element)"
+                         onadd="weatherLocationManager.add(element)"></weather-location-list>
+  <hr>
+</div>
 {% endif %}
-<ul id="storedLocations"
-    class="list-group mb-5">
-</ul>
+<div class="mb-4">
+  <h3>{{_("Stored locations")}}</h3>
+  <weather-location-list id="storedLocations"
+                         onremove="weatherLocationManager.remove(element)"></weather-location-list>
+</div>
 <script>
   (function () {
     const params = new URLSearchParams(window.location.search);
@@ -55,7 +56,7 @@
     }
 
     document.addEventListener("DOMContentLoaded", (event) => {
-      weatherLocationManager.loadLocations('#storedLocations');
+      weatherLocationManager.load();
     });
   })();
 </script>