Erstes Commit

hugo/content/bookmarks/add.html

@@ -0,0 +1,61 @@
+---
+title: "Add Bookmark"
+---
+<main x-data="{
+	store: null,
+	categories: [],
+	name: '',
+	url: '',
+	categoryId: '',
+	newcategory: '',
+	async saveBookmark() {
+		if (!this.categoryId)
+			this.categoryId = this.categories[0].id;
+		if (!this.name || !this.url || (!this.categoryId && !this.newcategory))
+			return;
+		if (this.newcategory)
+			this.categoryId = await this.store.createBookmarkCategory(this.newcategory);
+		const result = await this.store.createBookmark(
+			this.categoryId, this.name, this.url
+		);
+		if (result)
+			window.close();
+	},
+	async init() {
+		this.store = Alpine.store('alphabreed');
+		this.store.backUrl = '/bookmarks/add/';
+		const params = new URLSearchParams(window.location.search);
+		this.name = params.get('name') || '';
+		this.url = params.get('url') || '';
+
+		const tokenOK = await this.store.checkToken();
+		if (tokenOK)
+			this.categories = await this.store.getBookmarkCategories();
+	}
+}">
+	<div id="addcontent">
+		<div class="field textfield">
+			<label for="bookmarkname">Bookmark name</label>
+			<input id="bookmarkname" type="text" x-model="name">
+		</div>
+		<div class="field textfield">
+			<label for="bookmarkurl">URL</label>
+			<input id="bookmarkurl" type="text" x-model="url">
+		</div>
+		<div class="field selectfield">
+			<label for="bookmarkcategory">Category</label>
+			<select id="bookmarkcategory" x-model="categoryId">
+				<template x-for="category in categories" :key="category.id">
+					<option :value="category.id" x-text="category.name" :selected="category.id == categoryId">
+				</template>
+			</select>
+		</div>
+		<div class="field textfield">
+			<label for="bookmarknewcategory">New category</label>
+			<input id="bookmarknewcategory" type="text" x-model="newcategory">
+		</div>
+		<div class="field buttons">
+			<button @click="saveBookmark()">Save</button>
+		</div>
+	</div>
+</main>