Toggle showing read items

This commit is contained in:
Marcus Noble 2020-11-08 19:38:55 +00:00
parent 0a97bef247
commit 614264ebea
4 changed files with 37 additions and 4 deletions

View File

@ -55,6 +55,17 @@ func (fs *FeedStore) GetUnread() *[]ItemWithFeed {
return items return items
} }
func (fs *FeedStore) GetAll() *[]ItemWithFeed {
items := &[]ItemWithFeed{}
fs.getDB().Table("items").
Select("items.*, feeds.title as feed_title, feeds.homepage_url as feed_homepage_url").
Order("items.created desc, items.title").
Joins("left join feeds on feeds.id = items.feed_id").
Find(items)
return items
}
func (fs *FeedStore) SaveFeed(feed Feed) { func (fs *FeedStore) SaveFeed(feed Feed) {
fs.getDB().Omit("Items").Clauses(clause.OnConflict{ fs.getDB().Omit("Items").Clauses(clause.OnConflict{
Columns: []clause.Column{{Name: "id"}}, Columns: []clause.Column{{Name: "id"}},

View File

@ -33,6 +33,10 @@ func (a *API) GetUnread(c *fiber.Ctx) error {
return c.JSON(a.FeedStore.GetUnread()) return c.JSON(a.FeedStore.GetUnread())
} }
func (a *API) GetAll(c *fiber.Ctx) error {
return c.JSON(a.FeedStore.GetAll())
}
func (a *API) PostRead(c *fiber.Ctx) error { func (a *API) PostRead(c *fiber.Ctx) error {
a.FeedStore.MarkAsRead(c.Params("id")) a.FeedStore.MarkAsRead(c.Params("id"))
return nil return nil

View File

@ -52,6 +52,7 @@ func Start(port string) error {
app.Get("/api/feed/:id", api.GetFeed) app.Get("/api/feed/:id", api.GetFeed)
app.Get("/api/item/:id", api.GetItem) app.Get("/api/item/:id", api.GetItem)
app.Get("/api/unread", api.GetUnread) app.Get("/api/unread", api.GetUnread)
app.Get("/api/all", api.GetAll)
app.Post("/api/read/:id", api.PostRead) app.Post("/api/read/:id", api.PostRead)
app.Post("/api/read", api.PostReadAll) app.Post("/api/read", api.PostReadAll)
app.Get("/api/refresh", api.RefreshAll) app.Get("/api/refresh", api.RefreshAll)

View File

@ -37,6 +37,9 @@
<div id="app"> <div id="app">
<div class="menu"> <div class="menu">
<button title="Show Read" v-on:click="toggleShowRead()">
<svg width="30" height="30" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 9a4 4 0 110 8 4 4 0 010-8zm0-3.5a10 10 0 019.7 7.6.8.8 0 01-1.5.3 8.5 8.5 0 00-16.4 0 .8.8 0 01-1.5-.3A10 10 0 0112 5.5z" fill="#212121" fill-rule="nonzero"/></svg>
</button>
<button title="Toggle dark mode" v-on:click="toggleDarkMode()"> <button title="Toggle dark mode" v-on:click="toggleDarkMode()">
<svg width="30" height="30" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 22a10 10 0 100-20 10 10 0 000 20zm0-2V4a8 8 0 110 16z" fill="#212121" fill-rule="nonzero"/></svg> <svg width="30" height="30" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 22a10 10 0 100-20 10 10 0 000 20zm0-2V4a8 8 0 110 16z" fill="#212121" fill-rule="nonzero"/></svg>
</button> </button>
@ -124,13 +127,14 @@
opml: '', opml: '',
isBusy: false, isBusy: false,
isDark: false, isDark: false,
showRead: false,
}, },
computed: { computed: {
shownItems() { shownItems() {
if (this.selectedFeed === '') { if (this.selectedFeed === '') {
return this.items; return this.items.filter(item => !item.Read || item.Read === this.showRead);
} else { } else {
return this.items.filter(item => item.FeedID === this.selectedFeed); return this.items.filter(item => item.FeedID === this.selectedFeed && (!item.Read || item.Read === this.showRead));
} }
}, },
unread() { unread() {
@ -163,8 +167,6 @@
this.selectedItem = undefined; this.selectedItem = undefined;
} else { } else {
this.selectedItem = item.ID; this.selectedItem = item.ID;
// document.querySelector(`feed-item[data-id='${item.ID}']`).content = item.Content || item.Description;
document.getElementById(this.selectedItem).scrollIntoView(); document.getElementById(this.selectedItem).scrollIntoView();
item.Read = true; item.Read = true;
fetch(`/api/read/${item.ID}`, {method: "POST"}) fetch(`/api/read/${item.ID}`, {method: "POST"})
@ -272,6 +274,21 @@
console.error(err); console.error(err);
this.setBusy(false); this.setBusy(false);
}); });
},
toggleShowRead() {
this.showRead = !this.showRead;
if (this.showRead && !this.items.some(item => item.Read)) {
this.setBusy(true);
fetch('/api/all').then(res => res.json()).then(items => this.items = items)
.then(() => {
this.setBusy(false);
})
.catch(err => {
console.error(err);
this.setBusy(false);
});
}
} }
}, },
created() { created() {