MSV FM

dot.antimicrobial@66.96.161.157: ~ $
Path : /hermes/sb_web/b1536/advancedfunctions.co/metrics/
File Upload :
Current < : //hermes/sb_web/b1536/advancedfunctions.co/metrics/index.html

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='googleSheetsPortal.js'></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
div.metricKeypad{width:100vw;height:50vh;position:absolute;bottom:15%;left:50%;transform:translate(-50%,0%);display:grid;grid-template-columns:50% 50%;}
div.metricClicker{background-color:lightgray;margin:10px;border-radius:10px;display:grid;grid-template-rows:auto;auto;}
div.metricClickerLabel{font:24px Calibri;text-align:center;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;padding:20px;}

div.roundSelectorNavigator{width:100vw;height:5vh;position:absolute;top:0%;left:50%;transform:translate(-50%,0%);display:grid;grid-template-columns:auto 50% auto;}
div.roundSelectorLeft{font:24px Calibri;text-align:center;background-color:lightgray;border-radius:10px;margin:10px;padding:5px;cursor:pointer;}
div.roundSelector{font:24px Calibri;text-align:center;border-radius:10px;}
div.roundSelectorRight{font:24px Calibri;text-align:center;background-color:lightgray;border-radius:10px;margin:10px;padding:5px;cursor:pointer;}
div.roundSelectorLabelClass{font:24px Calibri;text-align:center;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);}

div.playerSelectorNavigator{width:100vw;height:5vh;position:absolute;top:10vh;left:50%;transform:translate(-50%,0%);display:grid;grid-template-columns:auto 50% auto;}
div.playerSelectorLeft{font:24px Calibri;text-align:center;background-color:lightgray;border-radius:10px;margin:10px;padding:5px;cursor:pointer;}
div.playerSelector{font:24px Calibri;text-align:center;border-radius:10px;}
div.playerSelectorRight{font:24px Calibri;text-align:center;background-color:lightgray;border-radius:10px;margin:10px;padding:5px;cursor:pointer;}
div.playerSelectorLabelClass{font:24px Calibri;text-align:center;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);}

div.saveButton{font:24px Calibri;width:70vw;position:absolute;bottom:10px;left:50%;transform:translate(-50%,0%);text-align:center;background-color:lightgray;border-radius:10px;padding:15px;cursor:pointer;}

div.graphIcon{padding:10px;font:14px Calibri;text-align:center;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;}
div.graphWindowClass{width:100%;height:100%;position:fixed;top:0%;left:0%;background-color:rgba(255,255,255,0.9);display:none;}
div.closeButtonClass{font:36px Calibri;cursor:pointer;position:fixed;top:10px;right:10px;}
div.googleGraphClass{height:50%;width:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
</style>
<body onload='javascript:setSelection(1,-1)'>

<div class='roundSelectorNavigator'>
<div class='roundSelectorLeft' onclick='javascript:setSelection(1,-1)'><div class='roundSelectorLabel'><</div></div>
<div class='roundSelector'><div class='roundSelectorLabelClass' id='roundSelectorLabel'>0</div></div>
<div class='roundSelectorRight' onclick='javascript:setSelection(1,1)'><div class='roundSelectorLabel'>></div></div>
</div>

<div class='playerSelectorNavigator'>
<div class='playerSelectorLeft' onclick='javascript:setSelection(2,-1)'><div class='playerSelectorLabel'><</div></div>
<div class='playerSelector'><div class='playerSelectorLabelClass' id='playerSelectorLabel'>Player name</div></div>
<div class='playerSelectorRight' onclick='javascript:setSelection(2,1)'><div class='playerSelectorLabel'>></div></div>
</div>


<div class='metricKeypad'>
<div class='metricClicker' id='metricClickerLabel3'><div class='metricClickerLabel' onclick='javascript:toggle(3)' >Catch</div><div class='graphIcon' onclick='javascript:getPerformanceFor(arrayToSend[2],1)'>📊</div></div>
<div class='metricClicker' id='metricClickerLabel4'><div class='metricClickerLabel' onclick='javascript:toggle(4)'>Throw</div><div class='graphIcon' onclick='javascript:getPerformanceFor(arrayToSend[2],2)' >📊</div></div>
<div class='metricClicker' id='metricClickerLabel5'><div class='metricClickerLabel' onclick='javascript:toggle(5)' >Low motion</div><div class='graphIcon' onclick='javascript:getPerformanceFor(arrayToSend[2],3)'>📊</div></div>
<div class='metricClicker'  id='metricClickerLabel6'><div class='metricClickerLabel' onclick='javascript:toggle(6)'>Fast turn</div><div class='graphIcon' onclick='javascript:getPerformanceFor(arrayToSend[2],4)'>📊</div></div>
<div class='metricClicker' id='metricClickerLabel7'><div class='metricClickerLabel' onclick='javascript:toggle(7)' >Good follow through</div><div class='graphIcon' onclick='javascript:getPerformanceFor(arrayToSend[2],5)'>📊</div></div>
<div class='metricClicker' id='metricClickerLabel8'><div class='metricClickerLabel' onclick='javascript:toggle(8)' >Slow rise</div><div class='graphIcon' onclick='javascript:getPerformanceFor(arrayToSend[2],6)'>📊</div></div>
</div>

<div class='saveButton' onclick='sendData(&#39;saveData&#39;)'>S A V E</div>

<div id='graphWindow' class='graphWindowClass'>
<div id='closeButton' class='closeButtonClass' onclick='javascript:closeGraphWindow()'>&times;</div>
<div id='googleGraph' class='googleGraphClass'></div></div>
</body>

<script>
var arrayToSend=['load',1,1,0,0,0,0,0,0];
var googleSheetsPortalScript='https://script.google.com/macros/s/AKfycbwrgj3bvIs5rbXpFrfcRomBpzx-wagO6kTdxLleDemmJrj9E21927Ja6qVNHmWn_pZD/exec';
var metricNames=['Hard hit','Pitch out of range','Low motion','Fast turn','Good follow through','Slow rise'];
google.charts.load('current',{packages:['corechart']});
var metricName='';

function getPerformanceFor(nameOfPersonIndex,metricNumber){
//toggle(metricNumber+2);
sendDataToGoogleSheets(['getPerformanceFor',arrayToSend[1],arrayToSend[2],nameOfPersonIndex,metricNumber],googleSheetsPortalScript);


document.getElementById('graphWindow').style.display='block';
document.getElementById('googleGraph').innerHTML="<i class='fa fa-spinner fa-spin' style='font-size:72px;color:cyan;'></i>";
metricName=metricNames[metricNumber-1];

//console.log(nameOfPersonIndex,metricNumber);
}

function drawChart(dataForGraph) {

var points=[];
points[0]=['score','day'];
//console.log(dataForGraph);
for(var i=0;i<dataForGraph.length;i=i+2){
points[i/2+1]=[parseInt(dataForGraph[i]),parseInt(dataForGraph[i+1])];

}

var data = google.visualization.arrayToDataTable(points);
var options = {
  title: metricName,
  hAxis: {title: 'Day number'},
  vAxis: {title: 'Score out of 6',maxValue:'6'},
  legend: 'none'
};

var chart = new google.visualization.LineChart(document.getElementById('googleGraph'));
chart.draw(data, options);
}

function closeGraphWindow(){
document.getElementById('graphWindow').style.display='none';
}

//indexOfItemToUpdate refers to round number, '1' or player number, '2'
function setSelection(indexOfItemToUpdate,value){
if(indexOfItemToUpdate==2&&(arrayToSend[indexOfItemToUpdate]+value)>7){
arrayToSend[2]=1;
arrayToSend[1]=arrayToSend[1]+1;
}
if(indexOfItemToUpdate==2&&(arrayToSend[indexOfItemToUpdate]+value)<2){
if(arrayToSend[1]>1){
arrayToSend[2]=8;}
if(arrayToSend[1]>1){
arrayToSend[1]=arrayToSend[1]-1;}
}

arrayToSend[indexOfItemToUpdate]=arrayToSend[indexOfItemToUpdate]+value;
if(arrayToSend[indexOfItemToUpdate]<1){arrayToSend[indexOfItemToUpdate]=1;}
if(arrayToSend[2]<2){arrayToSend[2]=2;}
sendData('loadData');
}

function toggle(indexOfItemToUpdate){
if(arrayToSend[indexOfItemToUpdate]==0||arrayToSend[indexOfItemToUpdate]==1){
arrayToSend[indexOfItemToUpdate]=Math.abs(arrayToSend[indexOfItemToUpdate]-1);}else{
arrayToSend[indexOfItemToUpdate]=1;}

if(arrayToSend[indexOfItemToUpdate]==1){
document.getElementById('metricClickerLabel'+indexOfItemToUpdate).style.backgroundImage="linear-gradient(to bottom,cyan,lightgray)";}
if(arrayToSend[indexOfItemToUpdate]==0){
document.getElementById('metricClickerLabel'+indexOfItemToUpdate).style.backgroundImage="linear-gradient(to bottom,khaki,lightgray)";}

//sendData('saveData');
}

function sendData(mode){
arrayToSend[0]=mode;
sendDataToGoogleSheets(arrayToSend,googleSheetsPortalScript);}

function receiveDataFromGoogleSheets(){
if(getDataFromGoogleSheetsAsArray()[0]=='makeGraph'){
var dataForGraph=getDataFromGoogleSheetsAsArray()[1].split('@');
google.charts.setOnLoadCallback(drawChart(dataForGraph));
}

if(getDataFromGoogleSheetsAsArray()[0]=='setData'){

arrayToSend[3]=getDataFromGoogleSheetsAsArray()[3];
arrayToSend[4]=getDataFromGoogleSheetsAsArray()[4];
arrayToSend[5]=getDataFromGoogleSheetsAsArray()[5];
arrayToSend[6]=getDataFromGoogleSheetsAsArray()[6];
arrayToSend[7]=getDataFromGoogleSheetsAsArray()[7];
arrayToSend[8]=getDataFromGoogleSheetsAsArray()[8];

console.log(arrayToSend);
document.getElementById('roundSelectorLabel').innerHTML='Round: '+getDataFromGoogleSheetsAsArray()[1];
document.getElementById('playerSelectorLabel').innerHTML=getDataFromGoogleSheetsAsArray()[2];

for(var i=3;i<9;i++){
if(arrayToSend[i]==1){
document.getElementById('metricClickerLabel'+i).style.backgroundImage="linear-gradient(to bottom,tomato,lightgray)";}else{
document.getElementById('metricClickerLabel'+i).style.backgroundImage="linear-gradient(to bottom,lightgray,lightgray)";}
}


}//if(getDataFromGoogleSheetsAsArray()[0]=='setData'){
}

</script>
</html>