My code is running well but I have repeated myself too much and the code will be too large considering that I have only handled a query for one collection.
I have tried using a function to handle some of the code but it doesn't work as some variables are not accessible globally.
Here is the code
var markers = [];
function addMarker(coords, content, animation){
var marker = new google.maps.Marker({
position: coords,
map: map,
icon: icon = {
url : isBouncing ? red_icon : green_icon,
scaledSize: new google.maps.Size(40, 40), // scaled size
},
// IF THERE'S AN ERROR, BOUNCE IT
animation: animation
});
var infoWindow = new google.maps.InfoWindow({
content: content
});
marker.addListener('spider_click', function() {
map.panTo(this.getPosition());
infoWindow.open(map,marker);
});
oms.addMarker(marker);
markers.push(marker);
}
function clearMarkers() {
setMapOnAll(null);
}
function deleteMarkers() {
clearMarkers();
markers = [];
}
db.collection('Nairobi').onSnapshot(function(snapshot) {
snapshot.forEach(function(child){
var name_loc = child.id;
var loc = child.data().marker;
var forward = child.data().ForwardPower;
var reflected = child.data().ReflectedPower;
var ups = child.data().UPSError;
var upsDesc = child.data().UPSDesc;
var trans = child.data().TransmitterError;
var transDesc = child.data().TransDesc;
var kplc = child.data().KPLC;
var kplcDesc = child.data().KPLCDesc;
var sat = child.data().SatelliteReceiver;
var satDesc = child.data().SatDesc;
if(ups === true && trans ===true && sat ===true && kplc ===true){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> UPSError: ${upsDesc} </p>`
+ `<p> SatelliteReceiver: ${satDesc} </p>`
+ `<p> KPLC: ${kplcDesc} </p>`
+ `<p> TransmitterError: ${transDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === false && trans ===true && sat ===true && kplc ===true){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> SatelliteReceiver: ${satDesc} </p>`
+ `<p> KPLC: ${kplcDesc} </p>`
+ `<p> TransmitterError: ${transDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === true && trans ===false && sat ===true && kplc ===true){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> UPSError: ${upsDesc} </p>`
+ `<p> SatelliteReceiver: ${satDesc} </p>`
+ `<p> KPLC: ${kplcDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === false && trans ===false && sat ===false && kplc ===false){
isBouncing = false;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<h2> Running well </h2>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
);
}
console.log(child.id, child.data());
});
snapshot.docChanges().forEach((change) => {
if (change.type === "modified") {
deleteMarkers();
snapshot.forEach(function(child){
/***************************REDUNDANT CODE****************************************/
var name_loc = child.id;
var loc = child.data().marker;
var forward = child.data().ForwardPower;
var reflected = child.data().ReflectedPower;
var ups = child.data().UPSError;
var upsDesc = child.data().UPSDesc;
var trans = child.data().TransmitterError;
var transDesc = child.data().TransDesc;
var kplc = child.data().KPLC;
var kplcDesc = child.data().KPLCDesc;
var sat = child.data().SatelliteReceiver;
var satDesc = child.data().SatDesc;
if(ups === true && trans ===true && sat ===true && kplc ===true){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> UPSError: ${upsDesc} </p>`
+ `<p> SatelliteReceiver: ${satDesc} </p>`
+ `<p> KPLC: ${kplcDesc} </p>`
+ `<p> TransmitterError: ${transDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === false && trans ===true && sat ===false && kplc ===true){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> KPLC: ${kplcDesc} </p>`
+ `<p> TransmitterError: ${transDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === true && trans ===false && sat ===true && kplc ===false){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> UPSError: ${upsDesc} </p>`
+ `<p> SatelliteReceiver: ${satDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === true && trans ===false&& sat ===false && kplc ===false){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> UPSError: ${upsDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
else if(ups === false && trans ===true && sat ===false && kplc ===false){
isBouncing = true;
addMarker(
{lat: loc.latitude, lng: loc.longitude },
'' +
'<div id="iw-container">' +
`<div class="iw-title"> ${name_loc}</div>` +
'<div class="iw-content">' +
"<br/>"
+ `<p> TransmitterError: ${transDesc} </p>`
+ '</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>'
,google.maps.Animation.BOUNCE
);
}
console.log(child.id, child.data());
});
}
});
})
And also is there a better way to handle those IF Statements to make my code more cleaner.
Aucun commentaire:
Enregistrer un commentaire