LightX Max

a list rendering demo with firebase

by Jay Angelo Valmocina

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
 
     <div class="ui text container"> <br>
          <div id="app">
            <div class="ui segment">
                  <div class="ui form">
                    <div class="ui field">
                      <input type="text" 
                          id="message" placeholder="message" />
                    </div>
                    <div class="ui field">
                        <input type="text" 
                            id="photoUrl" placeholder="photoUrl" />
                    </div>
                    <div class="ui field">
                      <button class="ui grey button" 
                          id="enter">Enter</button>                      
                    </div>
                  </div>
              </div>
               
              <div id="display" class="ui four cards"></div> 
          </div>
    </div>
      <script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>
      <script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-database.js"></script>

JavaScript

var config = {
  apiKey: "AIzaSyBL6m7Jnjf-XdEuXAvDdfqWqZZGsxGC-5A",
  authDomain: "lightx-85bed.firebaseapp.com",
  databaseURL: "https://lightx-85bed.firebaseio.com",
  projectId: "lightx-85bed",
  storageBucket: "lightx-85bed.appspot.com",
  messagingSenderId: "969177184522"
};

firebase.initializeApp(config);



db = firebase.database();

/* $('#enter').click(function () {

  let message = $("#message").val()
  let photoUrl = $("#photoUrl").val()

  if (message != "" && photoUrl != "") {
    db.ref('/message').push({
        message: message,
        photo: photoUrl
    })

    $("#message").val("")
    $("#photoUrl").val("")
  }
  else {
    alert("Hey put something!")
  }
})


let messageCardTPL = '<% _.each(snap, (x) => { %>\
                            <div class="ui card">\
                               <img src="<%- x.photo %>" class="ui image">\
                              <div class="ui content"><%- x.message %></div>\
                                <div class="extra">\
                                  <button class="ui blue button">Remove</button>\
                                  <p>\
                                </div> \
                            </div>\
                            <% }) %>'

$(this).ready(function () {

  db.ref('/message').on('value', snap => {
    let messageCard = _.template(messageCardTPL)({
      "snap": snap.val(),
    });

  

    $("#display").html(messageCard)

    // $(".remove").click(function(){
    //    alert("Hey, removing this though!")
    // })

    $("#removeTest").click(function(){
      // let remove_id = $("#removeMessage").val()
        // db.ref('/message/-LJTgJZgOmlbe7hU9Nt2').remove()

        // db.ref('/message/'.concat(remove_id)).remove()

       
          let storeX = _.map(snap.val(), (x) => x )

           let messageCard = _.template(messageCardTPL)({
            "snap": storeX.splice(1,1),
          });

            $("#display").html(messageCard)
    })


  })
   
}) */

class LightX...