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();
}
&#13;
<!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>
&#13;
我是firebase的新手。在我的HTML程序中,我可以在表格显示中添加,编辑,删除和显示数据。我想计算值状态"STANDBY","RUN","REPAIR","ON-HLD","WFA"
并将其显示在状态表中。我如何计算和显示状态数?
答案 0 :(得分: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;
}
答案 1 :(得分: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);
}
&#13;
所以完整的脚本看起来像这样:
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);
}
&#13;