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

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

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

@ -25,13 +25,12 @@ new Vue({
{'id': '5', 'title': 'Random Stuff', 'folder_id': 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': '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,
'entrySelectedDetails': {},
'itemSelected': null,
}
},
computed: {
@ -53,8 +52,8 @@ new Vue({
feedsById: function() {
return this.feeds.reduce(function(acc, feed) { acc[feed.id] = feed; return acc }, {})
},
entriesById: function() {
return this.entries.reduce(function(acc, entry) { acc[entry.id] = entry; return acc }, {})
itemsById: function() {
return this.items.reduce(function(acc, item) { acc[item.id] = item; return acc }, {})
},
},
watch: {
@ -64,8 +63,8 @@ new Vue({
var type = parts[0]
var guid = parts[1]
},
'entrySelected': function(newVal, oldVal) {
this.entrySelectedDetails = this.entriesById[newVal]
'itemSelected': function(newVal, oldVal) {
this.itemSelectedDetails = this.itemsById[newVal]
},
},
methods: {