1. дома
  2. Вопрос и ответ
  3. Как считать данные, которые имеют одинаковое значение с firebase и показать номер в таблице

Как считать данные, которые имеют одинаковое значение с firebase и показать номер в таблице

2017-02-21 23 views
0

Как считать данные, которые имеют одинаковое значение с firebase и показать номер в таблице

window.onload = initializer; 
 
var formjgrrb7; 
 
var refValidation; 
 
var tbodyModelJgrrb7; 
 
var CREATE = "Temporary Validation"; 
 
var UPDATE = "Update"; 
 
var modo = CREATE; 
 
var refValidationEditor 
 

 
function initializer() { 
 
    formjgrrb7 = document.getElementById("form-model-jgrrb7"); 
 
    formjgrrb7.addEventListener("submit",sendToValidationFirebase,false); 
 

 
    refValidation = firebase.database().ref().child("Jaguarrb7"); 
 

 
    tbodyModelJgrrb7 =document.getElementById("tbody-model-jgrrb7"); 
 

 
    showDataValidationOnFirebase(); 
 
} 
 

 
function showDataValidationOnFirebase(){ 
 
    refValidation.on("value",function(snap){ 
 
    var data = snap.val(); 
 
    var fileToShow = "" 
 
    for(var key in data){ 
 
     if(data[key].status=="STANDBY"){ 
 
     fileToShow += "<tr>" + 
 
         "<td>" + data[key].cavity +"</td>" + 
 
         '<td style="background-color:#AED6F1">' + data[key].status +'</td>' + 
 
         "<td>" + data[key].machine +"</td>" + 
 
         "<td>" + data[key].rack +"</td>" + 
 
         "<td>" + 
 
         '<button class="btn btn-default editor" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-pencil"></span>' + 
 
         '</button>' + 
 
         "</td>" + 
 
         '<td>'+ 
 
         '<button class="btn btn-danger delete" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-trash"></span>' + 
 
         '</button>' + 
 
         '</td>' + 
 
         "</tr>"; 
 
     } 
 
     if(data[key].status=="RUN") 
 
     { 
 
     fileToShow += "<tr>" + 
 
         "<td>" + data[key].cavity +"</td>" + 
 
         '<td style="background-color:#58D68D">' + data[key].status +'</td>' + 
 
         "<td>" + data[key].machine +"</td>" + 
 
         "<td>" + data[key].rack +"</td>" + 
 
         "<td>" + 
 
         '<button class="btn btn-default editor" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-pencil"></span>' + 
 
         '</button>' + 
 
         "</td>" + 
 
         '<td>'+ 
 
         '<button class="btn btn-danger delete" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-trash"></span>' + 
 
         '</button>' + 
 
         '</td>' + 
 
         "</tr>"; 
 
     } 
 
     if(data[key].status=="REPAIR") 
 
     { 
 
     fileToShow += "<tr>" + 
 
         "<td>" + data[key].cavity +"</td>" + 
 
         '<td style="background-color:#E74C3C">' + data[key].status +'</td>' + 
 
         "<td>" + data[key].machine +"</td>" + 
 
         "<td>" + data[key].rack +"</td>" + 
 
         "<td>" + 
 
         '<button class="btn btn-default editor" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-pencil"></span>' + 
 
         '</button>' + 
 
         "</td>" + 
 
         '<td>'+ 
 
         '<button class="btn btn-danger delete" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-trash"></span>' + 
 
         '</button>' + 
 
         '</td>' + 
 
         "</tr>"; 
 
     } 
 
     if(data[key].status=="ON-HOLD") 
 
     { 
 
     fileToShow += "<tr>" + 
 
         "<td>" + data[key].cavity +"</td>" + 
 
         '<td style="background-color:#F1C40F">' + data[key].status +'</td>' + 
 
         "<td>" + data[key].machine +"</td>" + 
 
         "<td>" + data[key].rack +"</td>" + 
 
         "<td>" + 
 
         '<button class="btn btn-default editor" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-pencil"></span>' + 
 
         '</button>' + 
 
         "</td>" + 
 
         '<td>'+ 
 
         '<button class="btn btn-danger delete" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-trash"></span>' + 
 
         '</button>' + 
 
         '</td>' + 
 
         "</tr>"; 
 
     } 
 
     if(data[key].status=="WFA") 
 
     { 
 
     fileToShow += "<tr>" + 
 
         "<td>" + data[key].cavity +"</td>" + 
 
         '<td style="background-color:#E5E7E9">' + data[key].status +'</td>' + 
 
         "<td>" + data[key].machine +"</td>" + 
 
         "<td>" + data[key].rack +"</td>" + 
 
         "<td>" + 
 
         '<button class="btn btn-default editor" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-pencil"></span>' + 
 
         '</button>' + 
 
         "</td>" + 
 
         '<td>'+ 
 
         '<button class="btn btn-danger delete" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-trash"></span>' + 
 
         '</button>' + 
 
         '</td>' + 
 
         "</tr>"; 
 
     } 
 

 
    } 
 
    tbodyModelJgrrb7.innerHTML = fileToShow; 
 
    if(fileToShow!=""){ 
 
     var elementsEditables = document.getElementsByClassName("editor"); 
 
     for(var i = 0; i < elementsEditables.length; i++){ 
 
     elementsEditables[i].addEventListener("click",editorValidDataFirebase,false); 
 
     } 
 
     var elementsDelete = document.getElementsByClassName("delete"); 
 
     for(var i = 0; i < elementsDelete.length; i++){ 
 
     elementsDelete[i].addEventListener("click",deleteValidDataFirebase,false); 
 
     } 
 
    } 
 
    }); 
 

 
} 
 

 
function editorValidDataFirebase(){ 
 
    var keyValidationEditor = this.getAttribute("data-validation"); 
 
    refValidationEditor = refValidation.child(keyValidationEditor); 
 
    refValidationEditor.once("value",function(snap){ 
 
    var data = snap.val(); 
 
    document.getElementById("cavity").value= data.cavity; 
 
    document.getElementById("status").value = data.status; 
 
    document.getElementById("machine").value= data.machine; 
 
    document.getElementById("rack").value= data.rack; 
 
    }); 
 
    document.getElementById("button-tosend-validation").value = UPDATE; 
 
    modo = UPDATE; 
 
} 
 

 
function deleteValidDataFirebase(){ 
 
    var keyValidationDelete = this.getAttribute("data-validation"); 
 
    var refValidationDelete = refValidation.child(keyValidationDelete); 
 
    refValidationDelete.remove(); 
 
} 
 

 
function sendToValidationFirebase(event) { 
 
    event.preventDefault(); 
 
    switch(modo){ 
 
    case CREATE: 
 
    refValidation.push({ 
 
     cavity:event.target.cavity.value, 
 
     status:event.target.status.value, 
 
     machine:event.target.machine.value, 
 
     rack:event.target.rack.value 
 
    }); 
 
    break; 
 
    case UPDATE: 
 
    refValidationEditor.update({ 
 
     cavity:event.target.cavity.value, 
 
     status:event.target.status.value, 
 
     machine:event.target.machine.value, 
 
     rack:event.target.rack.value 
 
    }); 
 
    break; 
 
    } 
 

 
    formjgrrb7.reset(); 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Mould Status</title> 
 
<style> 
 
#container{ 
 
    width: 100%; 
 
} 
 
    header,footer{ 
 
    padding:5px; 
 
    text-align: center; 
 
    color: white; 
 
    font-family: sans-serif; 
 
    background-color: #5D645F; 
 
    } 
 
    nav{ 
 
    background-color: #5D645F; 
 

 
    } 
 
    #button1{ 
 
    background-color:#5D645F; 
 
    border: none; 
 
    color: white; 
 
    padding:15px 32px; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
    } 
 
    #button1:hover{background-color: #06C53C;} 
 
    #button-tosend-validation{ 
 
    background-color: #5D645F; 
 
    color: white; 
 
    width:150px; 
 
    height:40px 
 
    } 
 
    #button-tosend-validation:hover{background-color: #06C53C;} 
 

 
    #trdisplay{ 
 
    background-color: teal; 
 
    color: white; 
 
    } 
 
    #tbdisplay{ 
 
    text-align: center; 
 
    } 
 
    #thdisplay{ 
 
    text-align: center; 
 
    } 
 
</style> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script> 
 
<script> 
 
    // Initialize Firebase 
 
    var config = { 
 
    apiKey: "AIzaSyADGLd5Uv9MNdu0b7eemTfyJhAsAG0hbNA", 
 
    authDomain: "mould-ae9c8.firebaseapp.com", 
 
    databaseURL: "https://mould-ae9c8.firebaseio.com", 
 
    storageBucket: "mould-ae9c8.appspot.com", 
 
    messagingSenderId: "309171185250" 
 
    }; 
 
    firebase.initializeApp(config); 
 
</script> 
 
<script src="js/jaguarrb7.js"></script> 
 
</head> 
 
<body> 
 
    <table style="width:100%;text-align:center"> 
 
    <thead> 
 
     <header> 
 
     <h2>JAGUAR RB7</h2> 
 
     </header> 
 
    </thead> 
 
    <tbody style="text-align:center;width:100%"> 
 
     <nav> 
 
     <a href="index.html" id="button1">HOME</a> 
 
     <a href="jaguarrb7.html" id="button1" style="float:right">JAGUAR-RB7</a> 
 
     <a href="jaguar2b.html" id="button1" style="float:right">JAGUAR-2B</a> 
 
     <a href="firebolt6.html" id="button1" style="float:right">FIREBOLT-6</a> 
 
     <a href="palmar.html" id="button1" style="float:right">PALMAR</a> 
 
     <a href="cobraf3d.html" id="button1" style="float:right">COBRA-F-3D</a> 
 
     <a href="cobraf2d.html" id="button1" style="float:right">COBRA-F-2D</a> 
 
     <a href="kingcobra.html" id="button1" style="float:right">KINGCOBRA</a> 
 
     <a href="14se.html" id="button1" style="float:right">14SE</a> 
 
    </nav> 
 
    </tbody> 
 
    </table> 
 

 
<div class = "container"> 
 
    <div class = "row"> 
 
    <div class = "col-sm-2"> 
 
      <form id="form-model-jgrrb7"> 
 
      <div class="form-group"> 
 
       <br><br> 
 
       <label for="cavity">Cavity</label><br> 
 
       <select name="Acavity" id="cavity" class ="form-control" style="width:150px"> 
 
       <option value=""></option> 
 
       <option value="#1">#1</option> 
 
       <option value="#2">#2</option> 
 
       <option value="#3">#3</option> 
 
       <option value="#4">#4</option> 
 
       <option value="#5">#5</option> 
 
       <option value="#6">#6</option> 
 
       <option value="#7">#7</option> 
 
       <option value="#8">#8</option> 
 
       <option value="#9">#9</option> 
 
       <option value="#10">#10</option> 
 
       <option value="#11">#11</option> 
 
       <option value="#12">#12</option> 
 
       <option value="#13">#13</option> 
 
       <option value="#14">#14</option> 
 
       <option value="#15">#15</option> 
 
       <option value="#16">#16</option> 
 
       <option value="#17">#17</option> 
 
       <option value="#18">#18</option> 
 
       <option value="#19">#19</option> 
 
       <option value="#20">#20</option> 
 
       <option value="#21">#21</option> 
 
       <option value="#22">#22</option> 
 
       <option value="#23">#23</option> 
 
       <option value="#24">#24</option> 
 
       <option value="#25">#25</option> 
 
       <option value="#26">#26</option> 
 
       <option value="#27">#27</option> 
 
       <option value="#28">#28</option> 
 
       <option value="#29">#29</option> 
 
       <option value="#30">#30</option> 
 
       <option value="#31">#31</option> 
 
       <option value="#32">#32</option> 
 
       <option value="#33">#33</option> 
 
       <option value="#34">#34</option> 
 
       <option value="#35">#35</option> 
 
       <option value="#36">#36</option> 
 
       <option value="#37">#37</option> 
 
       <option value="#38">#38</option> 
 
       <option value="#39">#39</option> 
 
       <option value="#40">#40</option> 
 
       <option value="#41">#41</option> 
 
       <option value="#42">#42</option> 
 
       <option value="#43">#43</option> 
 
       <option value="#44">#44</option> 
 
       <option value="#45">#45</option> 
 
       <option value="#46">#46</option> 
 
       <option value="#47">#47</option> 
 
       <option value="#48">#48</option> 
 
       <option value="#49">#49</option> 
 
       <option value="#50">#50</option> 
 
       <option value="#51">#51</option> 
 
       <option value="#52">#52</option> 
 
       <option value="#53">#53</option> 
 
       <option value="#54">#54</option> 
 
       <option value="#55">#55</option> 
 
       <option value="#56">#56</option> 
 
       <option value="#57">#57</option> 
 
       <option value="#58">#58</option> 
 
       <option value="#59">#59</option> 
 
       <option value="#60">#60</option> 
 
       <option value="#61">#61</option> 
 
       <option value="#62">#62</option> 
 
       <option value="#63">#63</option> 
 
       <option value="#64">#64</option> 
 
       <option value="#65">#65</option> 
 
       <option value="#66">#66</option> 
 
       <option value="#67">#67</option> 
 
       <option value="#68">#68</option> 
 
       <option value="#69">#69</option> 
 
       <option value="#70">#70</option> 
 
       </select> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label for="status">Status</label><br> 
 
       <select style="width:150px" class ="form-control" name="Astatus" id="status"> 
 
        <option value=""></option> 
 
        <option value="STANDBY">STANDBY</option> 
 
        <option value="WFA">WFA</option> 
 
        <option value="RUN">RUN</option> 
 
        <option value="REPAIR">REPAIR</option> 
 
        <option value="ON-HOLD">ON-HOLD</option> 
 
       </select> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label for="machine">Machine</label><br> 
 
       <select style="width:150px" class ="form-control" name="Amachine" id="machine"> 
 
       <option value=""></option> 
 
       <option value="M1">M1</option> 
 
       <option value="M2">M2</option> 
 
       <option value="M3">M3</option> 
 
       <option value="M4">M4</option> 
 
       <option value="M5">M5</option> 
 
       <option value="M6">M6</option> 
 
       <option value="M7">M7</option> 
 
       <option value="M8">M8</option> 
 
       <option value="M9">M9</option> 
 
       <option value="M10">M10</option> 
 
       </select> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label for="rack">Rack</label><br> 
 
       <select style="width:150px" class ="form-control" name="Arack" id="rack" > 
 
       <option value=""></option> 
 
       <option value="A">A</option> 
 
       <option value="B">B</option> 
 
       <option value="C">C</option> 
 
       <option value="D">D</option> 
 
       <option value="E">E</option> 
 
       <option value="F">F</option> 
 
       <option value="G">G</option> 
 
       <option value="H">H</option> 
 
       <option value="I">I</option> 
 
       <option value="J">J</option> 
 
       <option value="K">K</option> 
 
       <option value="L">L</option> 
 
       <option value="M">M</option> 
 
       <option value="N">N</option> 
 
       <option value="O">O</option> 
 
       <option value="P">P</option> 
 
       <option value="Q">Q</option> 
 
       <option value="R">R</option> 
 
       <option value="S">S</option> 
 
       <option value="T">T</option> 
 
       <option value="U">U</option> 
 
       <option value="V">V</option> 
 
       <option value="W">W</option> 
 
       <option value="X">X</option> 
 
       <option value="Y">Y</option> 
 
       <option value="Z">Z</option> 
 
       </select> 
 
      </div> 
 
      <br> 
 
      <input style="" type="submit" name="" value="OK" id="button-tosend-validation"> 
 
      </form> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
     <br><br> 
 
     <table> 
 
     <tr> 
 
      <td style="background-color:#AED6F1;width:100px;text-align:center">STANDBY</td> 
 
      <td id="status-jgrrrb7-standby"><td> 
 
     </tr> 
 
     <tr> 
 
      <td style="background-color:#58D68D;100px;text-align:center">RUN</td> 
 
      <td id="status-jgrrb7-run"></td> 
 
     </tr> 
 
     <tr> 
 
      <td style="background-color:#E74C3C;100px;text-align:center">REPAIR</td> 
 
      <td id="status-jgrrb7-repair"></td> 
 
     </tr> 
 
     <tr> 
 
      <td style="background-color:#F1C40F;100px;text-align:center">ON-HOLD</td> 
 
      <td id="status-jgrrb7-onhold"></td> 
 
     </tr> 
 
     <tr> 
 
      <td style="background-color:#E5E7E9;100px;text-align:center">WFA</td> 
 
      <td id="status-jgrrb7-wfa"></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    <div class="col-sm-7"> 
 
     <br><br> 
 
     <table class="table table-hover" id="tbdisplay"> 
 
     <thead> 
 
      <tr id="trdisplay"> 
 
      <th id="thdisplay">Cavity</th> 
 
      <th id="thdisplay">Status</th> 
 
      <th id="thdisplay">Machine</th> 
 
      <th id="thdisplay">Rack</th> 
 
      <th id="thdisplay">Edit</th> 
 
      <th id="thdisplay">Delete</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody id="tbody-model-jgrrb7"> 
 

 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

Я новичок с firebase. В моей программе HTML я могу добавлять, редактировать, удалять и показывать данные на дисплее таблицы. Я хочу подсчитать значение "STANDBY","RUN","REPAIR","ON-HLD","WFA" и отобразить его в таблице состояния. Как подсчитать и отобразить количество статусов?

screenshot of the program

источник

2017-02-21 Izz

+0

Если я правильно помню, нет простой функции подсчета. Вы должны вручную подсчитать детей. –

+0

Как вручную подсчитать детей? пожалуйста, помогите мне с подробным кодированием – Izz

+0

, как выглядит ваш код до сих пор –

ответ

0

Я решить мою проблему, используя этот код:

function showStatus(){ 
 
    var index = $("table thead th:contains('Status')").index()+1; 
 
    var cells = $("table tbody td:nth-child("+index+")"); 
 

 
    var standbyCount = cells.filter(":contains('STANDBY')").length; 
 
    var runCount = cells.filter(":contains('RUN')").length; 
 
    var repairCount = cells.filter(":contains('REPAIR')").length; 
 
    var onholdCount = cells.filter(":contains('ON-HOLD')").length; 
 
    var wfaCount = cells.filter(":contains('WFA')").length; 
 

 
    $('#statusjgrrb7standby').html(standbyCount); 
 
    $('#statusjgrrb7run').html(runCount); 
 
    $('#statusjgrrb7repair').html(repairCount); 
 
    $('#statusjgrrb7onhold').html(onholdCount); 
 
    $('#statusjgrrb7wfa').html(wfaCount); 
 
}

так полный сценарий выглядит следующим образом:

window.onload = initializer; 
 
var formjgrrb7; 
 
var refValidation; 
 
var tbodyModelJgrrb7; 
 
var CREATE = "Temporary Validation"; 
 
var UPDATE = "Update"; 
 
var modo = CREATE; 
 
var refValidationEditor 
 

 
function initializer() { 
 
    formjgrrb7 = document.getElementById("form-model-jgrrb7"); 
 
    formjgrrb7.addEventListener("submit",sendToValidationFirebase,false); 
 
    refValidation = firebase.database().ref().child("Jaguarrb7"); 
 
    tbodyModelJgrrb7 =document.getElementById("tbody-model-jgrrb7"); 
 

 
    showDataValidationOnFirebase(); 
 
} 
 
function showDataValidationOnFirebase(){ 
 
    refValidation.on("value",function(snap){ 
 
    var data = snap.val(); 
 
    var fileToShow = "" 
 
    for(var key in data){ 
 
     if(data[key].status=="STANDBY"){ 
 
     fileToShow += "<tr>" + 
 
         "<td>" + data[key].cavity +"</td>" + 
 
         '<td style="background-color:#AED6F1">' + data[key].status +'</td>' + 
 
         "<td>" + data[key].machine +"</td>" + 
 
         "<td>" + data[key].rack +"</td>" + 
 
         "<td>" + 
 
         '<button class="btn btn-default editor" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-pencil"></span>' + 
 
         '</button>' + 
 
         "</td>" + 
 
         '<td>'+ 
 
         '<button class="btn btn-danger delete" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-trash"></span>' + 
 
         '</button>' + 
 
         '</td>' + 
 
         "</tr>"; 
 
     } 
 
     if(data[key].status=="RUN") 
 
     { 
 
     fileToShow += "<tr>" + 
 
         "<td>" + data[key].cavity +"</td>" + 
 
         '<td style="background-color:#58D68D">' + data[key].status +'</td>' + 
 
         "<td>" + data[key].machine +"</td>" + 
 
         "<td>" + data[key].rack +"</td>" + 
 
         "<td>" + 
 
         '<button class="btn btn-default editor" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-pencil"></span>' + 
 
         '</button>' + 
 
         "</td>" + 
 
         '<td>'+ 
 
         '<button class="btn btn-danger delete" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-trash"></span>' + 
 
         '</button>' + 
 
         '</td>' + 
 
         "</tr>"; 
 
     } 
 
     if(data[key].status=="REPAIR") 
 
     { 
 
     fileToShow += "<tr>" + 
 
         "<td>" + data[key].cavity +"</td>" + 
 
         '<td style="background-color:#E74C3C">' + data[key].status +'</td>' + 
 
         "<td>" + data[key].machine +"</td>" + 
 
         "<td>" + data[key].rack +"</td>" + 
 
         "<td>" + 
 
         '<button class="btn btn-default editor" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-pencil"></span>' + 
 
         '</button>' + 
 
         "</td>" + 
 
         '<td>'+ 
 
         '<button class="btn btn-danger delete" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-trash"></span>' + 
 
         '</button>' + 
 
         '</td>' + 
 
         "</tr>"; 
 
     } 
 
     if(data[key].status=="ON-HOLD") 
 
     { 
 
     fileToShow += "<tr>" + 
 
         "<td>" + data[key].cavity +"</td>" + 
 
         '<td style="background-color:#F1C40F">' + data[key].status +'</td>' + 
 
         "<td>" + data[key].machine +"</td>" + 
 
         "<td>" + data[key].rack +"</td>" + 
 
         "<td>" + 
 
         '<button class="btn btn-default editor" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-pencil"></span>' + 
 
         '</button>' + 
 
         "</td>" + 
 
         '<td>'+ 
 
         '<button class="btn btn-danger delete" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-trash"></span>' + 
 
         '</button>' + 
 
         '</td>' + 
 
         "</tr>"; 
 
     } 
 
     if(data[key].status=="WFA") 
 
     { 
 
     fileToShow += "<tr>" + 
 
         "<td>" + data[key].cavity +"</td>" + 
 
         '<td style="background-color:#E5E7E9">' + data[key].status +'</td>' + 
 
         "<td>" + data[key].machine +"</td>" + 
 
         "<td>" + data[key].rack +"</td>" + 
 
         "<td>" + 
 
         '<button class="btn btn-default editor" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-pencil"></span>' + 
 
         '</button>' + 
 
         "</td>" + 
 
         '<td>'+ 
 
         '<button class="btn btn-danger delete" data-validation = "'+ key +'">' + 
 
         '<span class = "glyphicon glyphicon-trash"></span>' + 
 
         '</button>' + 
 
         '</td>' + 
 
         "</tr>"; 
 
     } 
 
    } 
 
    tbodyModelJgrrb7.innerHTML = fileToShow; 
 
    showStatus(); 
 
    if(fileToShow!=""){ 
 
     var elementsEditables = document.getElementsByClassName("editor"); 
 
     for(var i = 0; i < elementsEditables.length; i++){ 
 
     elementsEditables[i].addEventListener("click",editorValidDataFirebase,false); 
 
     } 
 
     var elementsDelete = document.getElementsByClassName("delete"); 
 
     for(var i = 0; i < elementsDelete.length; i++){ 
 
     elementsDelete[i].addEventListener("click",deleteValidDataFirebase,false); 
 
     } 
 
    } 
 
    }); 
 
} 
 

 
function editorValidDataFirebase(){ 
 
    var keyValidationEditor = this.getAttribute("data-validation"); 
 
    refValidationEditor = refValidation.child(keyValidationEditor); 
 
    refValidationEditor.once("value",function(snap){ 
 
    var data = snap.val(); 
 
    document.getElementById("cavity").value= data.cavity; 
 
    document.getElementById("status").value = data.status; 
 
    document.getElementById("machine").value= data.machine; 
 
    document.getElementById("rack").value= data.rack; 
 
    }); 
 
    document.getElementById("button-tosend-validation").value = UPDATE; 
 
    modo = UPDATE; 
 
} 
 

 
function deleteValidDataFirebase(){ 
 
    var keyValidationDelete = this.getAttribute("data-validation"); 
 
    var refValidationDelete = refValidation.child(keyValidationDelete); 
 
    refValidationDelete.remove(); 
 
} 
 

 
function sendToValidationFirebase(event) { 
 
    event.preventDefault(); 
 
    switch(modo){ 
 
    case CREATE: 
 
    refValidation.push({ 
 
     cavity:event.target.cavity.value, 
 
     status:event.target.status.value, 
 
     machine:event.target.machine.value, 
 
     rack:event.target.rack.value 
 
    }); 
 
    break; 
 
    case UPDATE: 
 
    refValidationEditor.update({ 
 
     cavity:event.target.cavity.value, 
 
     status:event.target.status.value, 
 
     machine:event.target.machine.value, 
 
     rack:event.target.rack.value 
 
    }); 
 
    break; 
 
    } 
 
    formjgrrb7.reset(); 
 
} 
 

 
function showStatus(){ 
 
    var index = $("table thead th:contains('Status')").index()+1; 
 
    var cells = $("table tbody td:nth-child("+index+")"); 
 

 
    var standbyCount = cells.filter(":contains('STANDBY')").length; 
 
    var runCount = cells.filter(":contains('RUN')").length; 
 
    var repairCount = cells.filter(":contains('REPAIR')").length; 
 
    var onholdCount = cells.filter(":contains('ON-HOLD')").length; 
 
    var wfaCount = cells.filter(":contains('WFA')").length; 
 

 
    $('#statusjgrrb7standby').html(standbyCount); 
 
    $('#statusjgrrb7run').html(runCount); 
 
    $('#statusjgrrb7repair').html(repairCount); 
 
    $('#statusjgrrb7onhold').html(onholdCount); 
 
    $('#statusjgrrb7wfa').html(wfaCount); 
 
}

источник

2017-02-22 04:54:06 Izz

0

подсчитать количество статуса, вы можете попробовать это, используйте функцию полезности, которая возвращает объект с данными, вам нужно будет, то вы можете получить доступ к подсчитывать каждый статус легко:

// returns an object with all possible values and how many times they occur in data 
function countStatus(data) { 
    // get all the keys 
    let keys = Object.keys(data); 
    // get all the values at the keys into an array 
    let statuses = keys.map(key => data[key]); 
    // utility function to count occurrences 
    let count = value => status.filter(status => status == value).length; 
    // remove all duplicates and count each occurrence 
    let distinctStatuses = [...new Set(statuses)]; 

    // create an object of {value: count} pairs 
    return distinctStatuses.reduce((acc, key) => Object.assign(acc, { 
    [key]: length(key) 
    }), {}); 
}

Использование будет выглядеть следующим образом:

let statusCounts = countStatus(data); 

let standByCount = statusCounts.STANDBY; 
let runCount = statusCounts.RUN; 
let repairCount = statusCounts.REPAIR; 
let onHoldCount = statusCounts["ON-HOLD"]; 
let wfaCount = statusCounts.WFA;

, если вы строго с использованием только STANDBY, RUN, REPAIR, ON-HOLD и WFA менее общая альтернатива:

// returns count of a status 
function searchStatusAndCount(status, data) { 
    return Object.keys(data).map(key => data[key]).filter(statuses => statuses == status).length; 
}

источник

2017-02-21 09:08:39

 Смежные вопросы

  • Нет связанных вопросов^_^