#1 A page to display all the news items

Created NewsList page and listing

server/euronews.js

@@ -42,9 +42,11 @@ function doGetEuroNews() {
   return new Promise((resolve, reject) => {
     logger.info('Retrieving Euronews Headlines..');
 
+    // http://feeds.feedburner.com/euronews/en/home/
+    //  http://feeds.feedburner.com/euronews/en/news/
     const options = {
       'hostname': 'feeds.feedburner.com',
-      'path': '/euronews/en/news/',
+      'path': '/euronews/en/home/',
       'method': 'GET',
       'headers': headers
     };

src/css/custom.scss

@@ -299,10 +299,10 @@ li {
 }
 
 #newsShell {
-  height:225px;
+ /* height:225px;*/
 }
 #news{
-  height: 275px;
+  height: 200px;
   margin-top:15px;
 }
 

src/service-worker.js

@@ -11,7 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-const CACHE_VERSION = { 'version': '0.0.401' };
+const CACHE_VERSION = { 'version': '0.0.464' };
 const dataCacheName = 'jubileeData-v1';
 const cacheName = 'jubilee-final-1';
 const filesToCache = [

src/v1/index.html

@@ -63,6 +63,9 @@
         <div id="newsShell" class="mui-panel" style="display: none;">
             <div class="mui--text-title cardTitle">Latest news</div>
             <div id="news" class="scrolling-wrapper-flexbox"></div>
+            <div id='newsMore' class="cardLink">
+                <i class="seemore material-icons mui--align-middle " >arrow_forward</i> <span class="seemore mui--align-middle">More news</span>
+            </div>
         </div>
 
         <div id="weatherShell" class="mui-panel" style="display: none;">

src/v1/js/News.js

@@ -104,6 +104,14 @@ const NewsModel = Backbone.Model.extend({
 
 const NewsView = Backbone.View.extend({
   'className': '',
+  'template': _.template(`
+    <div class="mui--text-title cardTitle">Latest news</div>
+                <div id="news" class="scrolling-wrapper-flexbox"></div>
+                <div id='newsMore' class="cardLink">
+                    <i class="seemore material-icons mui--align-middle " >arrow_forward</i> <span class="seemore mui--align-middle">More news</span>
+                </div>
+    `),
+
   'initialize': function(options) {
     this.eventBus = options.eventBus;
     this.newsCollection = newsCollection;
@@ -127,15 +135,21 @@ const NewsView = Backbone.View.extend({
 
     this.$el.empty();
 
+    this.$el.append(this.template());
+
+    this.$news = this.$el.find('#news');
+
     this.newsCollection.each(function(item) {
       const niView = new newsItemView({ 'model': item });
-      this.$el.append(niView.el);
+
+      this.$news.append(niView.el);
     }, this);
 
-    this.$el.parent().show();
-    // console.log(this.$el.parent());
+    this.$el.show();
   }, 'events': {
+    'click #newsMore': 'doMoreNews',
     'click .scrollCard': 'doClick'
+
   }, 'doClick': function(d) {
     console.log('Do click', d);
     const id = get(d, 'currentTarget.dataset.guid', '');
@@ -150,6 +164,11 @@ const NewsView = Backbone.View.extend({
 
     if (since > (60 * 1000 * 60) )
       this.model.set('update', now);
+  },
+  'doMoreNews': function() {
+    console.log('doMoreNews', this);
+
+    this.eventBus.trigger('showNewsList');
   }
 });
 

src/v1/js/NewsList.js

@@ -0,0 +1,159 @@
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+const request = require('request');
+const { get } = require('lodash');
+const { reduceEuronews } = require('./libs/reducers');
+const TimeFormat = require('hh-mm-ss');
+const { createPanel, addPanel } = require('./libs/panel');
+
+const NewsItem = Backbone.Model.extend({
+
+});
+
+const NewsCollection = Backbone.Collection.extend({
+  'model': NewsItem
+});
+
+const newsCollection = new NewsCollection();
+
+const NewsItemView = Backbone.View.extend({
+  'tagName': 'div',
+  'className' : 'newsItem',
+  'template': _.template(`
+    
+    <div class="mui--text-subhead mui--text-accent"><%=title%></div>
+    <div class="published mui--text-dark-secondary mui--text-caption"><%=pubdate%></div>
+   
+    <p class="mui--text-body1"><%=description%></p>
+
+          `),
+  'initialize': function() {
+    this.render();
+  },
+  'attributes': function() {
+    return {
+      'data-guid': this.model.get('guid')
+    };
+  },
+
+  'render': function() {
+    this.$el.html(this.template(this.model.toJSON()));
+  }, 'events': {
+    'click': 'doClick'
+
+  }, 'doclick':function(d) {
+    console.log('>>> HERE');
+    console.lg(d);
+  }
+
+});
+
+const NewsListModel = Backbone.Model.extend({
+  'defaults' : function (obj) {
+    // return a new object
+    return {
+      'update' : new Date().getTime()
+    };
+  }, 'initialize': function() {
+    this.newsCollection = newsCollection;
+    this.listenTo(this, 'change:update', this.onChange);
+    this.getNews();
+  },
+  'onChange': function() {
+    this.getNews();
+  },
+  'getNews': function() {
+    // const ll = this.get('llShort');
+    console.info('>> News:request');
+    request({
+      'url': `${window.loc}/news`,
+      'method': 'GET', 'qs': {
+
+      }
+    }, function(err, res, body) {
+      if (err)
+        console.error(err);
+      else {
+        console.log('statusCode', res.statusCode);
+        const fsJSON = JSON.parse(body);
+        // console.log(body);
+        const newItems = [];
+
+        for (const item of fsJSON.items)
+          newItems.push(reduceEuronews(item));
+
+        this.newsCollection.reset(newItems);
+
+        this.logUpdate();
+      }
+    }.bind(this));
+  }, 'logUpdate': function() {
+    console.log('News logging:');
+
+    const time = new Date().getTime() ;
+
+    this.set('time', time);
+
+    this.timerID = setTimeout(
+      () => this.tick(),
+      3.6e+6 + 1000
+    );
+
+    // console.log(this);
+  },
+  'tick': function() {
+    console.log('Set update');
+    this.set('update', new Date().getTime());
+  }
+
+});
+
+const NewsListView = Backbone.View.extend({
+  'initialize': function(options) {
+    this.eventBus = options.eventBus;
+
+    /* this.model.on('all', function(eventName) {
+          console.log(`${eventName } was triggered!`);
+        });*/
+
+    // this.model.bind('change:article', this.doRender, this);
+    this.model.newsCollection.bind('reset', this.render, this);
+    this.eventBus.on('showNewsList', this.showNewsListPanel, this);
+  },
+  'showNewsListPanel': function() {
+    console.log('Showing news list');
+
+    this.model.set('update', new Date().getTime());
+    this.$newPanel = createPanel({ 'title':'More news', 'divId':'newsListP' });
+
+    this.$el = addPanel(this.$newPanel);
+
+    this.$el.empty();
+    this.$newPanel.show();
+  }, 'events': {
+    'click': 'doClick'
+
+  }, 'doClick': function(d) {
+    console.log('Do click', d);
+    const id = get(d, 'currentTarget.dataset.guid', '');
+    console.log(id);
+    this.eventBus.trigger('showNews', id);
+  },
+  'render' : function() {
+    console.log('>> Do render');
+
+    console.log(this.model.newsCollection);
+    this.model.newsCollection.each(function(item) {
+      const niView = new NewsItemView({ 'model': item });
+
+      this.$el.append(niView.el);
+    }, this);
+
+    console.log(this.$el);
+      console.log(this.el);
+  }
+
+});
+
+module.exports = { NewsListModel, NewsListView };

src/v1/js/app.js

@@ -12,12 +12,13 @@ const { WeatherAlertModel, WeatherAlertView } = require('./WeatherAlert');
 const { ForecastModel, ForecastView } = require('./Forecast');
 const { NewsModel, NewsView } = require('./News');
 const { NewsCardModel, NewsCardView } = require('./NewsViewer');
+const { NewsListModel, NewsListView } = require('./NewsList');
 const { ByMeModel, ByMeView } = require('./RightByMe');
 const { AgendaModel, AgendaView } = require('./Agenda');
 const { TrafficModel, TrafficView } = require('./Traffic');
 var app = app || {};
 
-const live = true;
+const live = false;
 
 if (live) {
   window.loc = 'https://jubilee.silvrtree.co.uk';
@@ -59,7 +60,9 @@ else
 
   app.newsCard = new NewsCardView({ 'model': new NewsCardModel(), 'eventBus': app.eventBus });
 
-  app.news = new NewsView({ 'model': new NewsModel(), 'eventBus': app.eventBus, 'el':'#news' });
+  app.newsList = new NewsListView({'model': new NewsListModel(), 'eventBus' : app.eventBus});
+
+  app.news = new NewsView({ 'model': new NewsModel(), 'eventBus': app.eventBus, 'el':'#newsShell' });
 
   app.byMe = new ByMeView({ 'model': new ByMeModel(), 'eventBus': app.eventBus, 'location': app.locationModel, 'el':'#byme' });