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

refactoring

Browse Source
This commit is contained in:
Nazar Kanaev 2020-06-21 21:57:20 +01:00 committed by nkanaev
parent 20ea9a849b
commit 7a76027961
2 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
template/index.html
View File

@ -58,29 +58,29 @@
</div> </div>
<div class="vh-100 overflow-auto border-right flex-shrink-0" style="width: 300px"> <div class="vh-100 overflow-auto border-right flex-shrink-0" style="width: 300px">
<div class="my-2 mx-2"> <div class="my-2 mx-2">
<label class="nav-select mb-1" v-for="entry in entries" :class="{'text-muted': entry.status === 'read'}"> <label class="nav-select mb-1" v-for="item in items" :class="{'text-muted': item.status === 'read'}">
<input type="radio" name="entry" :value="entry.id" v-model="entrySelected"> <input type="radio" name="item" :value="item.id" v-model="itemSelected">
<div class="nav-item p-2"> <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-full.svg" class="nav-icon ml-n4 mr-2" v-if="entry.status === 'unread'"> <img src="./static/images/circle-full.svg" class="nav-icon ml-n4 mr-2" v-if="item.status === 'unread'">
<img src="./static/images/circle.svg" class="nav-icon ml-n4 mr-2" v-if="entry.status === 'read'"> <img src="./static/images/circle.svg" class="nav-icon ml-n4 mr-2" v-if="item.status === 'read'">
<img src="./static/images/star.svg" class="nav-icon ml-n4 mr-2" v-if="entry.status === 'starred'"> <img src="./static/images/star.svg" class="nav-icon ml-n4 mr-2" v-if="item.status === 'starred'">
<small class="flex-fill text-truncate">{{feedsById[entry.feed_id].title}}</small> <small class="flex-fill text-truncate">{{feedsById[item.feed_id].title}}</small>
<small class="">{{formatDate(entry.date)}}</small> <small class="">{{formatDate(item.date)}}</small>
</div> </div>
<span>{{entry.title}}</span> <span>{{item.title}}</span>
</div> </div>
</div> </div>
</label> </label>
</div> </div>
</div> </div>
<div class="vh-100 overflow-auto w-100"> <div class="vh-100 overflow-auto w-100">
<div v-if="entrySelected" class="mx-3 my-2"> <div v-if="itemSelected" class="mx-3 my-2">
<h3>{{entrySelectedDetails.title}}</h3> <h3>{{itemSelectedDetails.title}}</h3>
<div class="text-muted"> <div class="text-muted">
<div>{{ feedsById[entrySelectedDetails.feed_id].title }}</div> <div>{{ feedsById[itemSelectedDetails.feed_id].title }}</div>
<time>{{ formatDate(entrySelectedDetails.date) }}</time> <time>{{ formatDate(itemSelectedDetails.date) }}</time>
</div> </div>
<hr> <hr>
<div> <div>

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

@ -25,13 +25,12 @@ new Vue({
{'id': '5', 'title': 'Random Stuff', 'folder_id': null}, {'id': '5', 'title': 'Random Stuff', 'folder_id': null},
], ],
'feedSelected': null, 'feedSelected': null,
'entries': [ 'items': [
{'id': '123', 'title': 'Apple Pulls Pocket Casts and Castro From Chinese App Store', 'status': 'unread', 'feed_id': 2, 'date': 1592250298}, {'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': '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}, {'id': '789', 'title': 'Marques Brownlee: ‘Reflecting on the Color of My Skin’', 'status': 'read', 'feed_id': 2, 'date': 1592250298},
], ],
'entrySelected': null, 'itemSelected': null,
'entrySelectedDetails': {},
} }
}, },
computed: { computed: {
@ -53,8 +52,8 @@ new Vue({
feedsById: function() { feedsById: function() {
return this.feeds.reduce(function(acc, feed) { acc[feed.id] = feed; return acc }, {}) return this.feeds.reduce(function(acc, feed) { acc[feed.id] = feed; return acc }, {})
}, },
entriesById: function() { itemsById: function() {
return this.entries.reduce(function(acc, entry) { acc[entry.id] = entry; return acc }, {}) return this.items.reduce(function(acc, item) { acc[item.id] = item; return acc }, {})
}, },
}, },
watch: { watch: {
@ -64,8 +63,8 @@ new Vue({
var type = parts[0] var type = parts[0]
var guid = parts[1] var guid = parts[1]
}, },
'entrySelected': function(newVal, oldVal) { 'itemSelected': function(newVal, oldVal) {
this.entrySelectedDetails = this.entriesById[newVal] this.itemSelectedDetails = this.itemsById[newVal]
}, },
}, },
methods: { methods: {