AverageMarcus/gopherss
1
0
Fork 0
Code Pull Requests Releases Activity

Compare commits

base: AverageMarcus:ef79ee4997460d226246d8f7039ea8fb21168c2c
Branches Tags
AverageMarcus:master
..
compare: AverageMarcus:bc8649fac397842ce55176e89860460e6aae4b6e
Branches Tags
AverageMarcus:master

No commits in common. "ef79ee4997460d226246d8f7039ea8fb21168c2c" and "bc8649fac397842ce55176e89860460e6aae4b6e" have entirely different histories.
ef79ee4997 ... bc8649fac3

2 changed files with 21 additions and 34 deletions
Show Stats Expand all files Collapse all files

51
views/index.html
View File

@ -7,9 +7,6 @@
<script src="/static/feed-item.js" defer></script> <script src="/static/feed-item.js" defer></script>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script> <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs@1.9.5/plugin/relativeTime.js"></script>
<script>dayjs.extend(window.dayjs_plugin_relativeTime)</script>
<link rel="stylesheet" href="https://unpkg.com/hack@0.8.1/dist/hack.css"> <link rel="stylesheet" href="https://unpkg.com/hack@0.8.1/dist/hack.css">
<link rel="stylesheet" href="https://unpkg.com/hack@0.8.1/dist/dark.css"> <link rel="stylesheet" href="https://unpkg.com/hack@0.8.1/dist/dark.css">
@ -42,8 +39,8 @@
All ({{unread}}) All ({{unread}})
</div> </div>
<div v-for="feed in feeds" :class="{strong: unreadCounts[feed.ID], 'alert': true, 'alert-success': selectedFeed == feed.FeedURL }" :data-feed="feed.FeedURL" v-on:click="loadFeed(feed.ID)"> <div v-for="feed in feeds" :class="{strong: unreadCount(feed), 'alert': true, 'alert-success': selectedFeed == feed.FeedURL }" :data-feed="feed.FeedURL" v-on:click="loadFeed(feed.ID)">
{{feed.Title}} ({{unreadCounts[feed.ID]}}) {{feed.Title}} ({{unreadCount(feed)}})
</div> </div>
<div class="menu"> <div class="menu">
@ -81,8 +78,8 @@
<div v-for="item in shownItems" :id="item.ID"> <div v-for="item in shownItems" :id="item.ID">
<div :class="{'alert': true, 'alert-info': item.Read == false, 'item-heading': true}" :data-feed="item.FeedHomepageURL" v-on:click="loadItem(item)"> <div :class="{'alert': true, 'alert-info': item.Read == false, 'item-heading': true}" :data-feed="item.FeedHomepageURL" v-on:click="loadItem(item)">
<span class="feed-title">{{item.FeedTitle}}</span> <span class="feed-title">{{item.FeedTitle}}</span>
<span class="date" :title="item.Created">{{ dayjs(item.Created).fromNow() }}</span> <span class="date" :title="item.Created">{{item.Created}}</span>
<h3 class="item-title">{{item.Title}} <a :href="item.URL">↗</a></h3> <h3 class="item-title"><a :href="item.URL">{{item.Title}}</a></h3>
</div> </div>
<div class="card item-content" :data-id="item.ID" v-if="item.ID == selectedItem"> <div class="card item-content" :data-id="item.ID" v-if="item.ID == selectedItem">
<div class="card-content"> <div class="card-content">
@ -124,13 +121,6 @@
}, },
unread() { unread() {
return this.items.filter(item => !item.Read).length; return this.items.filter(item => !item.Read).length;
},
unreadCounts() {
return this.items.filter(item => !item.Read).reduce((acc, item) => {
if (!acc[item.FeedID]) acc[item.FeedID] = 0;
acc[item.FeedID]++;
return acc;
}, {})
} }
}, },
methods: { methods: {
@ -143,6 +133,9 @@
document.body.classList.toggle('dark'); document.body.classList.toggle('dark');
document.body.classList.toggle('dark-grey'); document.body.classList.toggle('dark-grey');
}, },
unreadCount(feed) {
return this.items.filter(item => item.FeedID == feed.ID).length;
},
loadFeed(feed) { loadFeed(feed) {
this.selectedItem = undefined; this.selectedItem = undefined;
this.selectedFeed = feed; this.selectedFeed = feed;
@ -189,23 +182,21 @@
}); });
}, },
markAllRead() { markAllRead() {
this.setBusy(true);
let ids = this.shownItems.filter(item => !item.Read).map(item => item.ID); let ids = this.shownItems.filter(item => !item.Read).map(item => item.ID);
if (confirm(`Are you sure you want to mark ${ids.length} items as read?`)) { fetch(
this.setBusy(true); `/api/read`,
fetch( {method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(ids)}
`/api/read`, )
{method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(ids)} .then(res => res.json())
) .then(items => this.items = items)
.then(res => res.json()) .then(() => {
.then(items => this.items = items) this.setBusy(false);
.then(() => { })
this.setBusy(false); .catch(err => {
}) console.error(err);
.catch(err => { this.setBusy(false);
console.error(err); });
this.setBusy(false);
});
}
}, },
addSite(url) { addSite(url) {
this.setBusy(true); this.setBusy(true);

4
views/static/feed-item.js
View File

@ -56,10 +56,6 @@ class FeedItem extends HTMLElement {
.then(item => { .then(item => {
template.innerHTML += item.Content || item.Description; template.innerHTML += item.Content || item.Description;
this.shadowRoot.appendChild(template.content.cloneNode(true)); this.shadowRoot.appendChild(template.content.cloneNode(true));
[...this.shadowRoot.querySelectorAll('a[href^=http]')].forEach(a => {
a.setAttribute("target", "_blank");
a.setAttribute("rel", "noopener");
})
}) })
} }