fsb_backbone/dev/app.js

const $ = require('jquery');
const _ = require('underscore');
const Backbone = require('backbone');
const io = require('socket.io-client');

const socket = io('http://localhost:3001');

socket.on('selectionPriceUpdate', data => console.log('selectionPriceUpdate', data));
socket.on('SelectionStateUpdate', data => console.log('selectionStateUpdate', data));
socket.on('eventStateUpdate', data => console.log('eventStateUpdate', data));

(function() {
  console.log('Go!');

  const templates = {
    'empty': _.template('<div></div>'),
    'topItem': _.template('<div class="offset-1-col"><%=id%> <%=name%></div>'),
    'subItem': _.template('<div class="offset-2-col"><%=id%> <%=name%></div>'),
    'eventItem': _.template('<div class="offset-3-col <%=visibleClass%>"><%=id%> <%=name%></div>'),
    'selItem': _.template('<div class="offset-4-col <%=visibleClass%>"><%=id%> <%=name%> <span class="text-danger">Price:<%=price%></span></div>')
  };

  console.log(templates);

  const EventItem = Backbone.Model.extend({

  });

  const EventCollection = Backbone.Collection.extend({
    'model': EventItem
  });

  const eventCollection = new EventCollection();

  const EventListModel = Backbone.Model.extend({
    'initialize': function() {
      this.eventCollection = eventCollection;
      this.listenTo(this, 'change', this.onChange);
      this.listenTo(this.eventCollection, 'change', this.onCollectionChange);
      this.getEvents();
    },
    'onChange': function() {
      // console.log('EventListModel Changed');
    },
    'onCollectionChange': function() {
      // console.log('eventCollection Changed');
    },
    'getEvents': async function () {
      const data = await fetch('http://localhost:3001/api/selections/')
        .then((response) => {
          if (response.ok)
            return response.json();

          throw response;
        })
        .then((data) => {
          return data.hasOwnProperty('category') ? data.category : [];
        })
        .catch((error) => {
          console.error('Error fetching');
        });

      if (data && data.length > 0)
        this.store(data);
    },
    'store' : function(data) {
      const newItems = [];
      data.forEach((topItem) => {
        newItems.push({ ...this.getItem(topItem), 'type':'topItem' });

        if (topItem.hasOwnProperty('subcat'))
          topItem.subcat.forEach((subItem) => {
            newItems.push({ ...this.getItem(subItem), 'type':'subItem' });

            if (subItem.hasOwnProperty('event'))
              subItem.event.forEach((eventItem) => {
                newItems.push({ ...this.getItem(eventItem), 'type':'eventItem' });

                if(eventItem.hasOwnProperty('selection'))
                  eventItem.selection.forEach((selItem) => {
                    newItems.push({ ...this.getItem(selItem), 'pid':eventItem.id, 'type':'selItem' });
                  });
              });
          });
      });

      this.eventCollection.reset(newItems);
    },
    'getItem': function({ id, name, active = null, price = null }) {
      return { id, name, active, price };
    },
    'updatedItem': function(newItem) {
      const foundData = this.eventCollection.findWhere({ 'id':newItem.id });

      if (foundData)
        foundData.set('price', newItem.newPrice);
    },
    'updatedState': function(newItem) {
      const foundData = this.eventCollection.findWhere({ 'id':newItem.id });

      if (foundData)
        foundData.set({ 'active': newItem.active, 'visibleClass':(newItem.active === true) ? 'active' : 'notActive' });
    }

  });

  const EventItemView = Backbone.View.extend({
    'tagName': 'div',
    'className': 'itemRow mui-row',
    'template': _.template('<div>Not set</div>'),
    'initialize': function() {
      if (templates.hasOwnProperty(this.model.get('type')))
        this.template = templates[this.model.get('type')];
      this.listenTo(this.model, 'change', this.onChange);

      this.render();
    },
    'onChange': function() {
      this.render();
    },
    'render': function() {
      this.$el.html(this.template(this.model.toJSON()));
    },
    'updateVisibility': function() {
      let visibleClass = '';
      if (active !== null)
        visibleClass = (active === true) ? 'active' : 'notActive' ;

      this.model.set('visibleClass', visibleClass) ;
    }
  });

  const EventListView = Backbone.View.extend({
    'tagName': 'div',
    'className' : 'newsItem',
    'template': _.template('<div><%=name%></div>'),
    'initialize': function() {
      console.log('EventListView::Init');
      this.listenTo(this.model.eventCollection, 'change', this.onChange);
      this.model.eventCollection.bind('reset', this.render, this);
    },
    'render': function() {
      this.$el.html(this.template(this.model.toJSON()));

      this.model.eventCollection.each(item => {
        const active = item.get('active');
        let visibleClass = '';
        if (active !== null)
          visibleClass = (active === true) ? 'active' : 'notActive' ;

        item.set('visibleClass', visibleClass) ;

        const eView = new EventItemView({ 'model': item });
        this.$el.append(eView.el);
      });
    }
  });

  const eventList = new EventListModel;

  const newsListView = new EventListView({ 'model': eventList, 'el':'#eventList' });

  socket.on('selectionPriceUpdate', data => eventList.updatedItem( data));
  socket.on('SelectionStateUpdate', data => eventList.updatedState( data));
  socket.on('eventStateUpdate', data => eventList.updatedState( data));
})();