From d7a7e5747cf00cef48ceb536d147f7bf7d1928ed Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Mon, 15 Jun 2020 21:13:46 +0100
Subject: [PATCH] basic entry list functionality

---
 template/index.html                | 31 +++++++++++++++++-------------
 template/static/javascripts/app.js | 24 +++++++++++++++++++++--
 2 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/template/index.html b/template/index.html
index 43f4c82..fad519e 100644
--- a/template/index.html
+++ b/template/index.html
@@ -23,7 +23,7 @@
                 <div>
                     <div v-for="folder in foldersWithFeeds">
                         <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">
                                 <img src="./static/images/chevron-right.svg"
                                      class="nav-icon"
@@ -36,7 +36,7 @@
                         <div v-show="!folder.id || folder.is_expanded" :class="{'pl-3': folder.id}">
                             <label class="nav-select d-block mb-1"
                                    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">
                                     <img src="./static/images/rss.svg" alt="" class="nav-icon">
                                     <span class="flex-fill text-left text-truncate">{{ feed.title }}</span>
@@ -49,19 +49,24 @@
             </div>
         </div>
         <div class="vh-100 overflow-auto border-right" style="width: 300px;">
-            <div class="mt-2 mb-3 mx-2">
-                <div class="p-2 feed-item">
-                    <div class="d-flex flex-column ml-4">
-                        <div style="line-height: 1" class="d-flex">
-                            <img src="./static/images/circle.svg" alt="" class="nav-icon ml-n4 mr-2">
-                            <small class="flex-fill text-truncate">NY Times</small>
-                            <small class="">12 Jun 2020</small>
+            <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">
+                    <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>
+                            </div>
+                            <span class="font-weight-bold">
+                                Police confiscates illegal Antimatter from scientists
+                            </span>
                         </div>
-                        <span class="font-weight-bold">
-                            Police confiscates illegal Antimatter from scientists
-                        </span>
                     </div>
-                </div>
+                </label>
             </div>
         </div>
         <div class="m-3">three</div>
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index 20e39c2..1d0e144 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -19,15 +19,24 @@ new Vue({
       ],
       'feeds': [
         {'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': '4', 'title': 'The Guardian', 'folder_id': 2},
         {'id': '5', 'title': 'Random Stuff', 'folder_id': 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: {
+    feedsById: function() {
+      return this.feeds.reduce(function(acc, feed) { acc[feed.id] = feed; return acc }, {})
+    },
     foldersWithFeeds: function() {
       var feedsByFolders = this.feeds.reduce(function(folders, feed) {
         if (!folders[feed.folder_id])
@@ -44,9 +53,20 @@ new Vue({
       return folders
     },
   },
+  watch: {
+    'feedSelected': function(newVal, oldVal) {
+      var parts = newVal.split(':', 2)
+      var type = parts[0]
+      var guid = parts[1]
+    },
+  },
   methods: {
     toggleFolderExpanded: function(folder) {
       folder.is_expanded = !folder.is_expanded
-    }
+    },
+    formatDate: function(timestamp_s) {
+      var d = new Date(timestamp_s * 1000)
+      return d.getDate() + '/' + d.getMonth() + '/' + d.getFullYear()
+    },
   }
 })