78 lines
2.5 KiB
HTML
78 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js" lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Add Bookmark :: alphabreed</title>
|
|
<meta name="author" content="Stefan Mühlinghaus">
|
|
<meta name="viewport" content="initial-scale=1, user-scalable=no">
|
|
<link rel="icon" type="image/vnd.microsoft.icon" href="/img/favicon.ico">
|
|
<link rel="preload" href="/css/bookmarks.css" as="style">
|
|
<link rel="stylesheet" href="/css/bookmarks.css">
|
|
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
|
<script defer src="/js/alpine-alphabreed.js"></script>
|
|
<script defer src="/js/alpine-3.15.3.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
|
|
</body>
|
|
</html>
|