init
This commit is contained in:
metacryst
256
calendar/Toolbar/CalendarOptions.js
Normal file
256
calendar/Toolbar/CalendarOptions.js
Normal file
@@ -0,0 +1,256 @@
|
||||
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)
|
||||
Reference in New Issue
Block a user