Merge branch 'main' into feature/birthday-calendar

crates/frontend/public/assets/js/create-calendar-form.mjs

@@ -27,6 +27,11 @@ let CreateCalendarForm = class extends i {
     this.components = /* @__PURE__ */ new Set();
     this.dialog = e();
     this.form = e();
+    this.timezones = [];
+    this.fetchTimezones();
+  }
+  async fetchTimezones() {
+    this.timezones = await getTimezones();
   }
   createRenderRoot() {
     return this;
@@ -59,7 +64,12 @@ let CreateCalendarForm = class extends i {
           <br>
           <label>
             Timezone (optional)
-            <input type="text" name="timezone" .value=${this.timezone_id} @change=${(e2) => this.timezone_id = e2.target.value} />
+            <select name="timezone" .value=${this.timezone_id} @change=${(e2) => this.timezone_id = e2.target.value}>
+              <option value="">No timezone</option>
+              ${this.timezones.map((timezone) => x`
+                <option value=${timezone} ?selected=${timezone === this.timezone_id}>${timezone}</option>
+              `)}
+            </select>
           </label>
           <br>
           <label>
@@ -179,6 +189,9 @@ __decorateClass([
 __decorateClass([
   n$1()
 ], CreateCalendarForm.prototype, "components", 2);
+__decorateClass([
+  n$1()
+], CreateCalendarForm.prototype, "timezones", 2);
 CreateCalendarForm = __decorateClass([
   t("create-calendar-form")
 ], CreateCalendarForm);

crates/frontend/public/assets/js/edit-calendar-form.mjs

@@ -2,6 +2,18 @@ import { i, x } from "./lit-DkXrt_Iv.mjs";
 import { n as n$1, t } from "./property-B8WoKf1Y.mjs";
 import { e, n } from "./ref-BwbQvJBB.mjs";
 import { e as escapeXml } from "./index-_IB1wMbZ.mjs";
+let timezonesPromise = null;
+async function getTimezones() {
+  timezonesPromise ||= new Promise(async (resolve, reject) => {
+    try {
+      let response = await fetch("/frontend/_timezones.json");
+      resolve(await response.json());
+    } catch (e2) {
+      reject(e2);
+    }
+  });
+  return await timezonesPromise;
+}
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -22,6 +34,11 @@ let EditCalendarForm = class extends i {
     this.components = /* @__PURE__ */ new Set();
     this.dialog = e();
     this.form = e();
+    this.timezones = [];
+    this.fetchTimezones();
+  }
+  async fetchTimezones() {
+    this.timezones = await getTimezones();
   }
   createRenderRoot() {
     return this;
@@ -39,7 +56,12 @@ let EditCalendarForm = class extends i {
           <br>
           <label>
             Timezone (optional)
-            <input type="text" name="timezone" .value=${this.timezone_id} @change=${(e2) => this.timezone_id = e2.target.value} />
+            <select name="timezone" .value=${this.timezone_id} @change=${(e2) => this.timezone_id = e2.target.value}>
+              <option value="">No timezone</option>
+              ${this.timezones.map((timezone) => x`
+                <option value=${timezone} ?selected=${timezone === this.timezone_id}>${timezone}</option>
+              `)}
+            </select>
           </label>
           <br>
           <label>
@@ -150,6 +172,9 @@ __decorateClass([
     }
   })
 ], EditCalendarForm.prototype, "components", 2);
+__decorateClass([
+  n$1()
+], EditCalendarForm.prototype, "timezones", 2);
 EditCalendarForm = __decorateClass([
   t("edit-calendar-form")
 ], EditCalendarForm);

crates/frontend/public/assets/style.css

@@ -79,9 +79,6 @@ header {
   nav {
     display: flex;
 
-    border-radius: 12px;
-    background: color-mix(in srgb, var(--background-darker), var(--dilute-color) 5%);
-
     a {
       text-decoration: none;
       margin: 4px 8px;
@@ -259,19 +256,6 @@ ul.collection-list {
         margin: 8px initial;
       }
 
-      .comps {
-        display: inline;
-
-        span {
-          margin: 0 2px;
-          background: var(--primary-color);
-          color: var(--text-on-primary-color);
-          font-size: .8em;
-          padding: 3px 8px;
-          border-radius: 12px;
-        }
-      }
-
       .description {
         grid-area: description;
         white-space: nowrap;
@@ -363,3 +347,16 @@ svg.icon {
   color: var(--text-on-background-color);
   stroke: var(--text-on-background-color);
 }
+
+.component-chips {
+  display: inline;
+
+  span.chip {
+    margin: 0 2px;
+    background: var(--primary-color);
+    color: var(--text-on-primary-color);
+    font-size: .8em;
+    padding: 3px 8px;
+    border-radius: 12px;
+  }
+}

crates/frontend/public/templates/components/sections/calendars_section.html

@@ -8,9 +8,9 @@
       <span class="title">
         {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
         {{ calendar.meta.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
-        <div class="comps">
+        <div class="component-chips">
           {% for comp in calendar.components %}
-          <span>{{ comp }}</span>
+          <span class="chip">{{ comp }}</span>
           {% endfor %}
         </div>
       </span>
@@ -56,9 +56,9 @@
       <span class="title">
         {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
         {{ calendar.meta.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
-        <div class="comps">
+        <div class="component-chips">
           {% for comp in calendar.components %}
-          <span>{{ comp }}</span>
+          <span class="chip">{{ comp }}</span>
           {% endfor %}
         </div>
       </span>
@@ -83,4 +83,3 @@
 {% endif %}
 <create-calendar-form user="{{ user.id }}"></create-calendar-form>
 <import-calendar-form user="{{ user.id }}"></import-calendar-form>
-

crates/frontend/public/templates/layouts/default.html

@@ -14,9 +14,11 @@
   <header>
       <a class="logo" href="/frontend/user">RustiCal</a>
       {% block header_center %}{% endblock %}
-      <form method="POST" action="/frontend/logout" class="logout_form">
-        <button type="submit">Log out</button>
-      </form>
+      {% if self.get_user().is_some() %}
+        <form method="POST" action="/frontend/logout" class="logout_form">
+          <button type="submit">Log out</button>
+        </form>
+      {% endif %}
   </header>
   {% endblock %}
   <div id="app">

crates/frontend/public/templates/pages/addressbook.html

@@ -8,6 +8,7 @@
 <h1>{{ name }}</h1>
 {% if let Some(description) = addressbook.description %}<p>{{ description }}</p>{% endif%}
 
-<pre>{{ addressbook|json }}</pre>
+<h2>Debug information</h2>
+<pre>{{ addressbook|json(2) }}</pre>
 
 {% endblock %}

crates/frontend/public/templates/pages/calendar.html

@@ -5,7 +5,15 @@
 
 {% block content %}
 {% let name = calendar.meta.displayname.to_owned().unwrap_or(calendar.id.to_owned()) %}
-<h1>{{ calendar.principal }}/{{ name }}</h1>
+<h1>
+  {{ calendar.principal }}/{{ name }}
+  <div class="component-chips">
+    {% for comp in calendar.components %}
+    <span class="chip">{{ comp }}</span>
+    {% endfor %}
+  </div>
+
+</h1>
 {% if let Some(description) = calendar.meta.description %}<p>{{ description }}</p>{% endif%}
 
 {% if let Some(subscription_url) = calendar.subscription_url %}
@@ -13,19 +21,7 @@
 <a href="{{ subscription_url }}">{{ subscription_url }}</a>
 {% endif %}
 
-<h2>Components</h2>
-<ul>
-  {% for comp in calendar.components %}
-  <li>{{ comp.as_str() }}</li>
-  {% endfor %}
-</ul>
-
-<h2>Timezone</h2>
-
-{% if let Some(timezone_id) = calendar.timezone_id %}
-<p>{{ timezone_id }}</p>
-{% endif %}
-
-<pre>{{ calendar|json }}</pre>
+<h2>Debug information</h2>
+<pre>{{ calendar|json(2) }}</pre>
 
 {%endblock %}