62 lines
1.8 KiB
HTML
62 lines
1.8 KiB
HTML
---
|
|
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>
|