frontend: create-calendar-form put subscription url behind checkbox

This commit is contained in:
Lennart
2025-07-05 09:10:26 +02:00
parent b5bff08b08
commit d8803a38a2
2 changed files with 30 additions and 6 deletions

View File

@@ -28,6 +28,8 @@ export class CreateCalendarForm extends LitElement {
@property() @property()
color: String = '' color: String = ''
@property() @property()
isSubscription: boolean = false
@property()
subscriptionUrl: String = '' subscriptionUrl: String = ''
@property() @property()
components: Set<"VEVENT" | "VTODO" | "VJOURNAL"> = new Set() components: Set<"VEVENT" | "VTODO" | "VJOURNAL"> = new Set()
@@ -67,11 +69,20 @@ export class CreateCalendarForm extends LitElement {
<input type="color" name="color" @change=${e => this.color = e.target.value} /> <input type="color" name="color" @change=${e => this.color = e.target.value} />
</label> </label>
<br> <br>
<br>
<label>
Calendar is subscription to external calendar
<input type="checkbox" name="is_subscription" @change=${e => this.isSubscription = e.target.checked} />
</label>
<br>
${this.isSubscription ? html`
<label> <label>
Subscription URL Subscription URL
<input type="text" name="subscription_url" @change=${e => this.subscriptionUrl = e.target.value} /> <input type="text" name="subscription_url" @change=${e => this.subscriptionUrl = e.target.value} />
</label> </label>
<br> <br>
`: html``}
<br>
${["VEVENT", "VTODO", "VJOURNAL"].map(comp => html` ${["VEVENT", "VTODO", "VJOURNAL"].map(comp => html`
<label> <label>
Support ${comp} Support ${comp}
@@ -110,7 +121,7 @@ export class CreateCalendarForm extends LitElement {
<displayname>${this.displayname}</displayname> <displayname>${this.displayname}</displayname>
${this.description ? `<CAL:calendar-description>${this.description}</CAL:calendar-description>` : ''} ${this.description ? `<CAL:calendar-description>${this.description}</CAL:calendar-description>` : ''}
${this.color ? `<ICAL:calendar-color>${this.color}</ICAL:calendar-color>` : ''} ${this.color ? `<ICAL:calendar-color>${this.color}</ICAL:calendar-color>` : ''}
${this.subscriptionUrl ? `<CS:source><href>${this.subscriptionUrl}</href></CS:source>` : ''} ${(this.isSubscription && this.subscriptionUrl) ? `<CS:source><href>${this.subscriptionUrl}</href></CS:source>` : ''}
<CAL:supported-calendar-component-set> <CAL:supported-calendar-component-set>
${Array.from(this.components.keys()).map(comp => `<CAL:comp name="${comp}" />`).join('\n')} ${Array.from(this.components.keys()).map(comp => `<CAL:comp name="${comp}" />`).join('\n')}
</CAL:supported-calendar-component-set> </CAL:supported-calendar-component-set>

View File

@@ -22,6 +22,7 @@ let CreateCalendarForm = class extends i {
this.displayname = ""; this.displayname = "";
this.description = ""; this.description = "";
this.color = ""; this.color = "";
this.isSubscription = false;
this.subscriptionUrl = ""; this.subscriptionUrl = "";
this.components = /* @__PURE__ */ new Set(); this.components = /* @__PURE__ */ new Set();
this.dialog = e(); this.dialog = e();
@@ -61,11 +62,20 @@ let CreateCalendarForm = class extends i {
<input type="color" name="color" @change=${(e2) => this.color = e2.target.value} /> <input type="color" name="color" @change=${(e2) => this.color = e2.target.value} />
</label> </label>
<br> <br>
<br>
<label>
Calendar is subscription to external calendar
<input type="checkbox" name="is_subscription" @change=${(e2) => this.isSubscription = e2.target.checked} />
</label>
<br>
${this.isSubscription ? x`
<label> <label>
Subscription URL Subscription URL
<input type="text" name="subscription_url" @change=${(e2) => this.subscriptionUrl = e2.target.value} /> <input type="text" name="subscription_url" @change=${(e2) => this.subscriptionUrl = e2.target.value} />
</label> </label>
<br> <br>
` : x``}
<br>
${["VEVENT", "VTODO", "VJOURNAL"].map((comp) => x` ${["VEVENT", "VTODO", "VJOURNAL"].map((comp) => x`
<label> <label>
Support ${comp} Support ${comp}
@@ -107,7 +117,7 @@ let CreateCalendarForm = class extends i {
<displayname>${this.displayname}</displayname> <displayname>${this.displayname}</displayname>
${this.description ? `<CAL:calendar-description>${this.description}</CAL:calendar-description>` : ""} ${this.description ? `<CAL:calendar-description>${this.description}</CAL:calendar-description>` : ""}
${this.color ? `<ICAL:calendar-color>${this.color}</ICAL:calendar-color>` : ""} ${this.color ? `<ICAL:calendar-color>${this.color}</ICAL:calendar-color>` : ""}
${this.subscriptionUrl ? `<CS:source><href>${this.subscriptionUrl}</href></CS:source>` : ""} ${this.isSubscription && this.subscriptionUrl ? `<CS:source><href>${this.subscriptionUrl}</href></CS:source>` : ""}
<CAL:supported-calendar-component-set> <CAL:supported-calendar-component-set>
${Array.from(this.components.keys()).map((comp) => `<CAL:comp name="${comp}" />`).join("\n")} ${Array.from(this.components.keys()).map((comp) => `<CAL:comp name="${comp}" />`).join("\n")}
</CAL:supported-calendar-component-set> </CAL:supported-calendar-component-set>
@@ -138,6 +148,9 @@ __decorateClass([
__decorateClass([ __decorateClass([
n$1() n$1()
], CreateCalendarForm.prototype, "color", 2); ], CreateCalendarForm.prototype, "color", 2);
__decorateClass([
n$1()
], CreateCalendarForm.prototype, "isSubscription", 2);
__decorateClass([ __decorateClass([
n$1() n$1()
], CreateCalendarForm.prototype, "subscriptionUrl", 2); ], CreateCalendarForm.prototype, "subscriptionUrl", 2);