257 lines
11 KiB
JavaScript
257 lines
11 KiB
JavaScript
import "../../components/BackButton.js"
|
|
import "../CalendarForm.js"
|
|
|
|
class CalendarOptions extends Shadow {
|
|
baseUrl = `${config.UI}/apps/calendar/icons`
|
|
|
|
getImageURL(iconName) {
|
|
let imgUrl = `${this.baseUrl}/${iconName}`
|
|
if (util.darkMode()) imgUrl += "light"
|
|
imgUrl += ".svg"
|
|
return imgUrl.toLowerCase()
|
|
}
|
|
|
|
constructor(calendars = [], selectedCalendars = [], actions) {
|
|
super()
|
|
this.calendars = calendars;
|
|
this.selectedCalendars = selectedCalendars;
|
|
this.onSelection = actions.onSelection;
|
|
this.onCalendarAdded = actions.onCalendarAdded;
|
|
this.onCalendarUpdated = actions.onCalendarUpdated;
|
|
this.onCalendarDeleted = actions.onCalendarDeleted;
|
|
}
|
|
|
|
isSelected(calendar) {
|
|
return this.selectedCalendars.some(c => c.id === calendar.id);
|
|
}
|
|
|
|
toggleCalendar(calendar) {
|
|
const isSelected = this.isSelected(calendar);
|
|
|
|
if (isSelected && this.selectedCalendars.length === 1) return;
|
|
|
|
let newSelectedIds;
|
|
if (isSelected) {
|
|
newSelectedIds = this.selectedCalendars
|
|
.filter(c => c.id !== calendar.id)
|
|
.map(c => c.id);
|
|
} else {
|
|
newSelectedIds = [...this.selectedCalendars.map(c => c.id), calendar.id];
|
|
}
|
|
|
|
this.selectedCalendars = this.calendars.filter(c => newSelectedIds.includes(c.id));
|
|
this.rerender();
|
|
}
|
|
|
|
render() {
|
|
this.calFormSheet = BottomSheet(200)
|
|
|
|
const doClose = () => {
|
|
$("bottomsheet-")._closeOverride = null
|
|
$("bottomsheet-").setSheet(false)
|
|
setTimeout(() => this.onSelection(this.selectedCalendars), 300)
|
|
}
|
|
$("bottomsheet-")._closeOverride = doClose
|
|
|
|
VStack(() => {
|
|
HStack(() => {
|
|
BackButton(false, true, doClose)
|
|
.zIndex(3)
|
|
|
|
h2("Calendars")
|
|
.position("absolute")
|
|
.zIndex(2)
|
|
.color("var(--headertext)")
|
|
.paddingVertical(0.5, em)
|
|
.margin(0)
|
|
.top(0)
|
|
.left(0)
|
|
.width(100, pct)
|
|
})
|
|
.position("relative")
|
|
.background(util.darkMode() ? "var(--darkred)" : "var(--sidebottombars)")
|
|
.borderTopLeftRadius("10px").borderTopRightRadius("10px")
|
|
.border("1px solid var(--divider)")
|
|
.textAlign("center")
|
|
|
|
if (this.calendars.length > 0) {
|
|
h3("Visibility")
|
|
.marginBottom(0)
|
|
.marginLeft(1.25, em)
|
|
|
|
VStack(() => {
|
|
this.calendars.forEach(cal => {
|
|
const selected = this.isSelected(cal);
|
|
|
|
HStack(() => {
|
|
HStack(() => {
|
|
p("")
|
|
.width(2, em)
|
|
.height(2, em)
|
|
.background(selected ? cal.color : "transparent")
|
|
.borderRadius(100, pct)
|
|
.border(`3.5px solid ${cal.color}`)
|
|
.boxSizing("border-box")
|
|
p(cal.name)
|
|
.fontSize(1.1, em)
|
|
.opacity(selected ? 1 : 0.5)
|
|
})
|
|
.gap(1, em)
|
|
.alignItems("center")
|
|
.flex(1)
|
|
.cursor("pointer")
|
|
.onTap(async () => {
|
|
await capacitor.Haptics.impact({ style: capacitor.ImpactStyle.Light });
|
|
this.toggleCalendar(cal)
|
|
})
|
|
|
|
p("i")
|
|
.width(1.5, em)
|
|
.height(1.5, em)
|
|
.borderRadius(100, pct)
|
|
.border("2px solid var(--text)")
|
|
.boxSizing("border-box")
|
|
.display(cal.owner_id === global.profile.id ? "" : "none")
|
|
.textAlign("center")
|
|
.lineHeight("1.4em")
|
|
.fontSize(1.3, em)
|
|
.fontWeight("bold")
|
|
.color("var(--text)")
|
|
.opacity(0.5)
|
|
.flexShrink(0)
|
|
.cursor("pointer")
|
|
.onTap(async () => {
|
|
await capacitor.Haptics.impact({ style: capacitor.ImpactStyle.Light });
|
|
let calFormEl
|
|
const closeCalForm = () => {
|
|
this.calFormSheet._closeOverride = null
|
|
this.calFormSheet.setSheet(false)
|
|
}
|
|
const onSaveErrorEdit = () => {
|
|
this.calFormSheet._closeOverride = () => this.calFormSheet.forceClose()
|
|
}
|
|
this.calFormSheet.show(() => {
|
|
calFormEl = CalendarForm(
|
|
closeCalForm,
|
|
(updated) => {
|
|
closeCalForm()
|
|
setTimeout(() => {
|
|
this.calendars = this.calendars.map(c => c.id === updated.id ? updated : c);
|
|
this.selectedCalendars = this.selectedCalendars.map(c => c.id === updated.id ? updated : c);
|
|
this.onCalendarUpdated(updated);
|
|
this.rerender();
|
|
}, 300);
|
|
},
|
|
cal,
|
|
(deletedId) => {
|
|
closeCalForm()
|
|
setTimeout(() => {
|
|
this.calendars = this.calendars.filter(c => c.id !== deletedId);
|
|
this.selectedCalendars = this.selectedCalendars.filter(c => c.id !== deletedId);
|
|
this.onCalendarDeleted(deletedId);
|
|
this.rerender();
|
|
}, 300);
|
|
},
|
|
onSaveErrorEdit
|
|
).height(100, pct)
|
|
})
|
|
this.calFormSheet._closeOverride = async () => {
|
|
const saved = await calFormEl?.trySave()
|
|
if (saved === null) {
|
|
this.calFormSheet.setSheet(true)
|
|
this.calFormSheet._closeOverride = () => this.calFormSheet.forceClose()
|
|
return
|
|
}
|
|
closeCalForm()
|
|
if (saved !== cal) {
|
|
setTimeout(() => {
|
|
this.calendars = this.calendars.map(c => c.id === saved.id ? saved : c)
|
|
this.selectedCalendars = this.selectedCalendars.map(c => c.id === saved.id ? saved : c)
|
|
this.onCalendarUpdated(saved)
|
|
this.rerender()
|
|
}, 300)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
.padding(0.75, em)
|
|
.gap(0.75, em)
|
|
.alignItems("center")
|
|
})
|
|
})
|
|
.background("var(--darkaccent)")
|
|
.margin(1, em)
|
|
.marginTop(0.5, em)
|
|
.border("1px solid var(--divider)")
|
|
.borderRadius(12, px)
|
|
}
|
|
|
|
HStack(() => {
|
|
img(this.getImageURL("calendar"), "1.5em", "1.5em")
|
|
p("Add Calendar")
|
|
.fontSize(1.1, em)
|
|
.paddingLeft(0.5, em)
|
|
})
|
|
.background("var(--darkaccent)")
|
|
.color("var(--text)")
|
|
.gap(0.75, em)
|
|
.alignItems("center")
|
|
.padding(1, em)
|
|
.paddingVertical(0.75, em)
|
|
.marginHorizontal(1, em)
|
|
.border("1px solid var(--divider)")
|
|
.borderRadius(12, px)
|
|
.cursor("pointer")
|
|
.onTap(async () => {
|
|
await capacitor.Haptics.impact({ style: capacitor.ImpactStyle.Light });
|
|
let calFormEl
|
|
const closeDirect = () => {
|
|
this.calFormSheet._closeOverride = null
|
|
this.calFormSheet.setSheet(false)
|
|
}
|
|
const onSaveErrorAdd = () => {
|
|
this.calFormSheet._closeOverride = () => this.calFormSheet.forceClose()
|
|
}
|
|
this.calFormSheet.show(() => {
|
|
calFormEl = CalendarForm(
|
|
closeDirect,
|
|
(calendar) => {
|
|
closeDirect()
|
|
setTimeout(() => {
|
|
this.calendars = [...this.calendars, calendar]
|
|
this.selectedCalendars = [...this.selectedCalendars, calendar]
|
|
this.onCalendarAdded(calendar)
|
|
this.rerender()
|
|
}, 300)
|
|
},
|
|
null,
|
|
null,
|
|
onSaveErrorAdd
|
|
).height(100, pct)
|
|
})
|
|
this.calFormSheet._closeOverride = async () => {
|
|
const saved = await calFormEl?.trySave()
|
|
if (saved === null) {
|
|
this.calFormSheet.setSheet(true)
|
|
this.calFormSheet._closeOverride = () => this.calFormSheet.forceClose()
|
|
return
|
|
}
|
|
closeDirect()
|
|
if (saved) {
|
|
setTimeout(() => {
|
|
this.calendars = [...this.calendars, saved]
|
|
this.selectedCalendars = [...this.selectedCalendars, saved]
|
|
this.onCalendarAdded(saved)
|
|
this.rerender()
|
|
}, 300)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
.width(100, pct)
|
|
.boxSizing("border-box")
|
|
}
|
|
}
|
|
|
|
register(CalendarOptions)
|