SeeCodeRun Metags: sending Data

working with metags

by David Gonzalez

HTML

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.9/firebase.js"></script>
<div class="metag metagRank" >
  <div class="rankingContainer">
         <label class="rankingLabel"></label>
  </div>
  
  <div class="voteContainer">
    <div>
      <div>
       <span class="voteUpContainer">
         <button class="voteButton vote-button btn btn-info fa fa-arrow-up faup">
         </button>
       </span>
     </div>
    <div class="voteCountContainer" >
      <label class="voteCountLabel"> </label>
    </div>  
    <div>
      <span class="voteDownContainer">
        <button class="voteButton vote-button btn btn-info fa fa-arrow-down">
        </button>
      </span>
    </div>
  </div>
 </div>
 
 <div class="userChoicesContainer">    
   <div class="favoriteToggleIcon iconChosenFalse">
     <i class="fa fa-star" ></i>
   </div>
   <div class="pinnedToggleIcon iconChosenFalse">
     <i class="fa fa-thumb-tack"></i>
   </div> 
 </div>
  
</div>

CSS

.metagRank {
    margin: 0 auto;
    width: 120px;
    height: 75px;
    padding: 5px;
    position: absolute;
    left:0px;
}

.rankingLabel {
    display: block;
    text-align: center;
    line-height: 150%;
    font-size: 2em;
    top:20px;
    padding:0.2em;
}

.voteCountLabel{
   text-align: center;
   padding-left: 2px;  
}

.metagRank .rankingContainer {
    margin: 0 auto;
    float: left;
    width: 30px;
    height: 75px;
}

.metagRank .voteContainer {
    margin: 0 auto;
    float: left;
    width: 45px;
    height: 75px;
}

.metagRank .userChoicesContainer {
    margin: 0 auto;
    float: right;
    width: 45px;
    height: 75px;
}

.voteButton {
  background-color: Transparent;
  border:none;
}

.iconChosenFalse{
    color: gray;
}

.iconChosenTrue{
    color: DodgerBlue ;
}

.favoriteToggleIcon{ 
 padding-left:0px;
 padding-top:15px;
 cursor: pointer;
}

.pinnedToggleIcon{ 
 cursor: pointer;
}

JavaScript

$(function() {
	loadMetagRank();
});

function settingFirabaseMetags(){
  let search = {
  	query: "where is facebook?",
    results: 0
  };
  var metagsSearchFirebase = new Firebase(`https://seecoderun.firebaseio.com/test/-KhGIb91d_T3gIjfW5dq/metags/search`);

metagsSearchFirebase.push(search);

  let result1 = {
    ranking: 1,
      url: "http://facebook.com",
        title: "facebook",
          description: "welcome to Facebook"
  };
metagsSearchFirebase.orderByChild('query').equalTo('where is facebook?').on('child_added',
function child_added(snapshot) {
			let data = snapshot.val();
   
      if(!data.results){
       data.results = [];
      }
      data.results.push(result1);

     // metagsSearchFirebase.child("query").ref().update(data);
      
});
  //template for the a DB value of a metagRanking
  let ranking = 1; // ranking is determined by the page results.
  let votes= 5019;
  let userChoices = {favorited: true, pinned: false};
  let metagRanking = { votes: votes,  userChoices: userChoices};

  // "metagRanking/votes" , "metagRanking/userChoices/favorited" and "metagRanking/userChoices/pinned"
  
  let metagComments = {comment1: {
    metagRanking: metagRanking,
    text: "Hi Fardina!",
    properties: {
				blogSelected: true,
        wikiSelected: false,
        qaSelected: false,
        apiSelected: false,
        
    	}
    }
   };
  let pageURL = {url: "http://facebook.com", metagRanking: metagRanking};  
  var metagsURLFirebase = new Firebase(`https://seecoderun.firebaseio.com/test/-KhGIb91d_T3gIjfW5dq/metags/url`);
metagsURLFirebase.push(pageURL);
}
   
function loadMetagRank(){

	// case 1: search query 1 --> search results 2 --> result(URL1) --> metag 1
	// case 1: search query 2 --> search results 2--> result(URL1) --> metag 1
  // assumption: urls appear only if search queries are related. 

  let metagsURLFirebase = new Firebase(`https://seecoderun.firebaseio.com/test/-KhGIb91d_T3gIjfW5dq/metags/url`);
  let metagsURLFirebaseVote =...