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

basic entry list functionality

Browse Source
This commit is contained in:
Nazar Kanaev 2020-06-15 21:13:46 +01:00 committed by nkanaev
parent d4e015c89e
commit d7a7e5747c
2 changed files with 40 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
template/index.html
View File

@ -23,7 +23,7 @@
<div> <div>
<div v-for="folder in foldersWithFeeds"> <div v-for="folder in foldersWithFeeds">
<label class="nav-select d-block mb-1"> <label class="nav-select d-block mb-1">
<input type="radio" name="feed" :value="'folder-'+folder.id" v-model="feedSelected"> <input type="radio" name="feed" :value="'folder:'+folder.id" v-model="feedSelected">
<div class="nav-item d-flex align-items-center w-100" v-if="folder.id"> <div class="nav-item d-flex align-items-center w-100" v-if="folder.id">
<img src="./static/images/chevron-right.svg" <img src="./static/images/chevron-right.svg"
class="nav-icon" class="nav-icon"
@ -36,7 +36,7 @@
<div v-show="!folder.id || folder.is_expanded" :class="{'pl-3': folder.id}"> <div v-show="!folder.id || folder.is_expanded" :class="{'pl-3': folder.id}">
<label class="nav-select d-block mb-1" <label class="nav-select d-block mb-1"
v-for="feed in folder.feeds"> v-for="feed in folder.feeds">
<input type="radio" name="feed" :value="'feed-'+feed.id" v-model="feedSelected"> <input type="radio" name="feed" :value="'feed:'+feed.id" v-model="feedSelected">
<div class="nav-item d-flex align-items-center w-100"> <div class="nav-item d-flex align-items-center w-100">
<img src="./static/images/rss.svg" alt="" class="nav-icon"> <img src="./static/images/rss.svg" alt="" class="nav-icon">
<span class="flex-fill text-left text-truncate">{{ feed.title }}</span> <span class="flex-fill text-left text-truncate">{{ feed.title }}</span>
@ -49,19 +49,24 @@
</div> </div>
</div> </div>
<div class="vh-100 overflow-auto border-right" style="width: 300px;"> <div class="vh-100 overflow-auto border-right" style="width: 300px;">
<div class="mt-2 mb-3 mx-2"> <div class="my-2 mx-2">
<div class="p-2 feed-item"> <label class="nav-select mb-1" v-for="entry in entries" :class="{'text-muted': entry.status === 'read'}">
<input type="radio" name="entry" :value="entry.id" v-model="entrySelected">
<div class="nav-item p-2">
<div class="d-flex flex-column ml-4"> <div class="d-flex flex-column ml-4">
<div style="line-height: 1" class="d-flex"> <div style="line-height: 1" class="d-flex">
<img src="./static/images/circle.svg" alt="" class="nav-icon ml-n4 mr-2"> <img src="./static/images/circle-full.svg" class="nav-icon ml-n4 mr-2" v-if="entry.status === 'unread'">
<small class="flex-fill text-truncate">NY Times</small> <img src="./static/images/circle.svg" class="nav-icon ml-n4 mr-2" v-if="entry.status === 'read'">
<small class="">12 Jun 2020</small> <img src="./static/images/star.svg" class="nav-icon ml-n4 mr-2" v-if="entry.status === 'starred'">
<small class="flex-fill text-truncate">{{feedsById[entry.feed_id].title}}</small>
<small class="">{{formatDate(entry.date)}}</small>
</div> </div>
<span class="font-weight-bold"> <span class="font-weight-bold">
Police confiscates illegal Antimatter from scientists Police confiscates illegal Antimatter from scientists
</span> </span>
</div> </div>
</div> </div>
</label>
</div> </div>
</div> </div>
<div class="m-3">three</div> <div class="m-3">three</div>

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

@ -19,15 +19,24 @@ new Vue({
], ],
'feeds': [ 'feeds': [
{'id': '1', 'title': 'news.ycombinator.com', 'folder_id': 1}, {'id': '1', 'title': 'news.ycombinator.com', 'folder_id': 1},
{'id': '2', 'title': '/r/programming', 'folder_id': 1}, {'id': '2', 'title': 'daringfireball', 'folder_id': 1},
{'id': '3', 'title': 'BBC', 'folder_id': 2}, {'id': '3', 'title': 'BBC', 'folder_id': 2},
{'id': '4', 'title': 'The Guardian', 'folder_id': 2}, {'id': '4', 'title': 'The Guardian', 'folder_id': 2},
{'id': '5', 'title': 'Random Stuff', 'folder_id': null}, {'id': '5', 'title': 'Random Stuff', 'folder_id': null},
], ],
'feedSelected': null, 'feedSelected': null,
'entries': [
{'id': '123', 'title': 'Apple Pulls Pocket Casts and Castro From Chinese App Store', 'status': 'unread', 'feed_id': 2, 'date': 1592250298},
{'id': '456', 'title': 'On Apple Announcing the ARM Mac Transition at WWDC This Month', 'status': 'starred', 'feed_id': 2, 'date': 1592250298},
{'id': '789', 'title': 'Marques Brownlee: ‘Reflecting on the Color of My Skin’', 'status': 'read', 'feed_id': 2, 'date': 1592250298},
],
'entrySelected': null,
} }
}, },
computed: { computed: {
feedsById: function() {
return this.feeds.reduce(function(acc, feed) { acc[feed.id] = feed; return acc }, {})
},
foldersWithFeeds: function() { foldersWithFeeds: function() {
var feedsByFolders = this.feeds.reduce(function(folders, feed) { var feedsByFolders = this.feeds.reduce(function(folders, feed) {
if (!folders[feed.folder_id]) if (!folders[feed.folder_id])
@ -44,9 +53,20 @@ new Vue({
return folders return folders
}, },
}, },
watch: {
'feedSelected': function(newVal, oldVal) {
var parts = newVal.split(':', 2)
var type = parts[0]
var guid = parts[1]
},
},
methods: { methods: {
toggleFolderExpanded: function(folder) { toggleFolderExpanded: function(folder) {
folder.is_expanded = !folder.is_expanded folder.is_expanded = !folder.is_expanded
} },
formatDate: function(timestamp_s) {
var d = new Date(timestamp_s * 1000)
return d.getDate() + '/' + d.getMonth() + '/' + d.getFullYear()
},
} }
}) })