From 9d5d8f4df2745850a730688e708d3632b69e30cb Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Fri, 3 Jul 2020 23:47:26 +0100
Subject: [PATCH] basic feed list view

---
 server/handlers.go                 | 11 +++++++++++
 server/server.go                   |  1 +
 storage/item.go                    | 23 +++++++++++------------
 template/index.html                | 10 +++++-----
 template/static/javascripts/api.js |  7 +++++--
 template/static/javascripts/app.js | 11 ++++++++---
 6 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/server/handlers.go b/server/handlers.go
index b33f400..45c2075 100644
--- a/server/handlers.go
+++ b/server/handlers.go
@@ -256,3 +256,14 @@ func FeedHandler(rw http.ResponseWriter, req *http.Request) {
 		rw.WriteHeader(http.StatusMethodNotAllowed)
 	}
 }
+
+func FeedItemsHandler(rw http.ResponseWriter, req *http.Request) {
+	id, err := strconv.ParseInt(Vars(req)["id"], 10, 64)
+	if err != nil {
+		rw.WriteHeader(http.StatusBadRequest)
+		return
+	}
+	rw.WriteHeader(http.StatusOK)
+	items := db(req).ListFeedItems(id)
+	writeJSON(rw, items)
+}
diff --git a/server/server.go b/server/server.go
index aaa0590..1ce7901 100644
--- a/server/server.go
+++ b/server/server.go
@@ -80,6 +80,7 @@ var routes []Route = []Route{
 	p("/api/folders/:id", FolderHandler),
 	p("/api/feeds", FeedListHandler),
 	p("/api/feeds/:id", FeedHandler),
+	p("/api/feeds/:id/items", FeedItemsHandler),
 	p("/api/feeds/find", FeedHandler),
 }
 
diff --git a/storage/item.go b/storage/item.go
index 6dc0705..dd00a02 100644
--- a/storage/item.go
+++ b/storage/item.go
@@ -14,17 +14,17 @@ const (
 )
 
 type Item struct {
-	Id string
-	FeedId int64
-	Title string
-	Link string
-	Description string
-	Content string
-	Author string
-	Date *time.Time
-	DateUpdated *time.Time
-	Status ItemStatus
-	Image string
+	Id string `json:"id"`
+	FeedId int64 `json:"feed_id"`
+	Title string `json:"title"`
+	Link string `json:"link"`
+	Description string `json:"description"`
+	Content string `json:"content"`
+	Author string `json:"author"`
+	Date *time.Time `json:"date"`
+	DateUpdated *time.Time `json:"date_updated"`
+	Status ItemStatus `json:"status"`
+	Image string `json:"image"`
 }
 
 func (s *Storage) CreateItems(items []Item) bool {
@@ -70,7 +70,6 @@ func itemQuery(s *Storage, cond string, v ...interface{}) []Item {
 			content, author, date, date_updated, status, image
 		from items
 		where %s`, cond)
-	s.log.Print(query)
 	rows, err := s.db.Query(query, v...)
 	if err != nil {
 		s.log.Print(err)
diff --git a/template/index.html b/template/index.html
index db23953..ce0887d 100644
--- a/template/index.html
+++ b/template/index.html
@@ -77,12 +77,12 @@
                     <input type="radio" name="item" :value="item.id" v-model="itemSelected">
                     <div class="menu-item p-2">
                         <div class="d-flex flex-column ml-4">
-                            <div style="line-height: 1" class="d-flex">
+                            <div style="line-height: 1" class="d-flex text-muted">
                                 <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>
+                                <small class="flex-fill text-truncate mr-1">{{feedsById[item.feed_id].title}}</small>
+                                <small class="flex-shrink-0">{{formatDate(item.date)}}</small>
                             </div>
                             <span>{{item.title}}</span>
                         </div>
@@ -97,7 +97,7 @@
                     <img src="./static/images/settings.svg" alt="" style="width: 20px; height: 20px;">
                 </button>
             </div>
-            <div v-if="itemSelected" class="mx-3 my-2 overflow-auto">
+            <div v-if="itemSelected" class="px-3 mt-2 overflow-auto">
                 <h3>{{itemSelectedDetails.title}}</h3>
                 <div class="text-muted">
                     <div>{{ feedsById[itemSelectedDetails.feed_id].title }}</div>
@@ -105,7 +105,7 @@
                 </div>
                 <hr>
                 <div>
-                    content goes here
+                    <div v-html="itemSelectedDetails.description" v-if="itemSelectedDetails.description"></div>
                 </div>
             </div>
         </div>
diff --git a/template/static/javascripts/api.js b/template/static/javascripts/api.js
index 5781ce7..2a05f09 100644
--- a/template/static/javascripts/api.js
+++ b/template/static/javascripts/api.js
@@ -26,7 +26,10 @@
       },
       delete: function(id) {
         return api('delete', '/api/feeds/' + id)
-      }
+      },
+      list_items: function(id) {
+        return api('get', '/api/feeds/' + id + '/items').then(json)
+      },
     },
     folders: {
       list: function() {
@@ -41,6 +44,6 @@
       delete: function(id) {
         return api('delete', '/api/folders/' + id)
       },
-    }
+    },
   }
 })()
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index bd829db..ee1e653 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -43,9 +43,15 @@ var vm = new Vue({
   watch: {
     'feedSelected': function(newVal, oldVal) {
       if (newVal === null) return
+      var vm = this
       var parts = newVal.split(':', 2)
       var type = parts[0]
       var guid = parts[1]
+      if (type === 'feed') {
+        api.feeds.list_items(guid).then(function(items) {
+          vm.items = items
+        })
+      }
     },
     'itemSelected': function(newVal, oldVal) {
       this.itemSelectedDetails = this.itemsById[newVal]
@@ -64,9 +70,8 @@ var vm = new Vue({
     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()
+    formatDate: function(datestr) {
+      return new Date(datestr).toLocaleDateString(undefined, {year: "numeric", month: "long", day: "numeric"})
     },
     moveFeed: function(feed, folder) {
       var folder_id = folder ? folder.id : null