james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-24 00:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: create new feed

Browse Source
This commit is contained in:
Nazar Kanaev 2020-07-01 17:22:06 +01:00
parent 14781476e0
commit 866d59fe86
3 changed files with 63 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
template/index.html
View File

@ -92,26 +92,28 @@
</div>
</div>
<b-modal id="settings-modal" hide-header hide-footer lazy>
<ul class="nav nav-tabs mx-n3 px-3 mb-3 mt-n3 pt-2 bg-light rounded-top">
<li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">New Feed</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a>
</li>
</ul>
<ul class="nav nav-tabs mx-n3 px-3 mb-3 mt-n3 pt-2 bg-light rounded-top">
<li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">New Feed</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a>
</li>
</ul>
<div v-if="settings=='create'">
<label for="feed-url">URL</label>
<input id="feed-url" type="text" class="form-control">
<label for="feed-folder" class="mt-3">Folder</label>
<select class="form-control" id="feed-folder">
<option value=""></option>
<option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
</select>
<button class="btn btn-block btn-outline-secondary mt-3 loading" type="button">Add</button>
<form action="" @submit.prevent="createFeed(event)">
<label for="feed-url">URL</label>
<input id="feed-url" name="url" type="url" class="form-control" required>
<label for="feed-folder" class="mt-3">Folder</label>
<select class="form-control" id="feed-folder" name="folder_id">
<option value=""></option>
<option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
</select>
<button class="btn btn-block btn-outline-secondary mt-3" :class="{loading: loading.newfeed}" type="submit">Add</button>
</form>
</div>
<div v-else-if="settings=='manage'">
<div v-for="folder in foldersWithFeeds" class="mb-4">
@ -167,6 +169,7 @@
<script src="./static/javascripts/popper.min.js"></script>
<!-- <script src="./static/javascripts/bootstrap.min.js"></script> -->
<script src="./static/javascripts/bootstrap-vue.min.js"></script>
<script src="./static/javascripts/api.js"></script>
<script src="./static/javascripts/app.js"></script>
</body>
</html>

25
template/static/javascripts/api.js Normal file
View File

@ -0,0 +1,25 @@
"use strict";
(function() {
var api = function(method, endpoint, data) {
var promise = fetch(endpoint, {
method: method,
headers: {'content-type': 'application/json'},
body: JSON.stringify(data),
})
return promise.then(function(res) {
if (res.ok) return res.json()
})
}
window.api = {
feeds: {
list: function() {
return api('get', '/api/feeds')
},
create: function(data) {
return api('post', '/api/feeds', data)
},
}
}
})()

16
template/static/javascripts/app.js
View File

@ -32,6 +32,7 @@ var vm = new Vue({
'itemSelected': null,
'settings': 'manage',
'newFolderTitle': null,
'loading': {newfeed: 0},
}
},
computed: {
@ -95,5 +96,20 @@ var vm = new Vue({
this.feeds = this.feeds.filter(function(f) { f.id != feed.id })
}
},
createFeed: function(event) {
var form = event.target
var data = {
url: form.querySelector('input[name=url]').value,
folder_id: parseInt(form.querySelector('select[name=folder_id]').value) || null,
}
this.loading.newfeed = true
var vm = this
api.feeds.create(data).then(function(result) {
if (result.status === 'success') {
vm.$bvModal.hide('settings-modal')
}
vm.loading.newfeed = false
})
},
}
})