Create Interface

[alexwileyy]

Create interface and template through ejs:

• Home
• Tweets
• Workshops
• Admin Login
• Admin Panel
• Add Event
• Add Announcement
• Send Text

[alexwileyy]

@PandelisZ for simplicity, I have decided to template the whole UI through EJS for now and avoid vue.js.

I have several reasons for this:

• Components don't particularly need to keep state / manage state within themselves.
• Components do not have a great need for live changing data (currently)

I think VUE will have it's place as we expand and refine the system, but for the initial iteration we shall go with EJS

[PandelisZ]

alright something to look at for v1 if we want to launch it as a hackathon service i guess

However on point 2 you mention not a great need for live changing data. I think it would be awesome if there was live data as I initially envisioned having mesa hub open during the hackathon on the projector showing whats up next, whats playing on spotify etc

[alexwileyy]

@PandelisZ I agree, but that can easily be done with one or two AJAX requests. I agree to use VUE or a similar technology eventually, but just for a quick turnaround on this and proof on concept, templating seemed easier :)

Once it's stable, I promise we will convert to either vue/react, though I am favouring vue :)

[alexwileyy]

@PandelisZ Just had a play around, I think for the time being this small amount of code can basically handle all of the updates on the live interface. The tData is just dud data to represent the datatbase. But this will essentially check to see if there is a new item in the db, if there is, it will append the item to the list. Tested and it works perfectly and also doesn't re-generate the list each time :)

      var tData = [
        {
          title: 'Test 1'
        },{
          title: 'Test 2'
        },{
          title: 'Test 3'
        },{
          title: 'New title'
        },
      ]

      function updateList(list, data, format){
        var query = "#" + list;
        if($(query).children().length < tData.length){
          $(query).prepend(format);
        }
      }

      //Update lists
      setInterval(function(){
        updateList("announcement", tData, "<p>" + tData[tData.length - 1].title + "</p>");
        //More calls added here
      },2000);

EDIT: You can perform this on multiple items on one page by just calling the function in the setInterval with multiple times with different parameters.

[PandelisZ]

So on the ejs part that we're using why aren't we on Done.js? which definitely supports Pushstate routing and propper Real time updates. E.js is no longer supported and development has moved to done.js

[PandelisZ]

Ok so remember how we said like we can keep ejs and like worry about vue's server side rendering later. well like after 561c6f2 i discovered we're gonna need that because obviously we cant do db calls from the front end which is how its currently setup with a public index.js server from the public dir

[alexwileyy]

@PandelisZ we can do db calls from the front end, it's just not totally secure. However, it doesn't matter really as all the calls will do is return a list of events and workshops, information which is not privileged to any specific user. Does that make sense?

Ideally the calls would not be made from the front end, correct. However it doesn't really require us to implement server side rendering.

EDIT: To clarify, server side rendering is on the list to implement, but maybe after we've got a full working system up and running :)