I have solved my issue.
In index.html I changed the previous button to display:none
<!-- Previous Button -->
<button id="prev-btn" style="display:none;">
<i class="fas fa-arrow-circle-left"></i>
</button>
And then in main.js I added
if(currentState == 1){
prevBtn.style.display = "none";
}
underneath the Business Logic section. I also add the display inline or none in 2 places in each of the goNextPage function and the goPrevPage function so they now look like this:
function goNextPage() {
if(currentLocation < maxLocation) {
switch(currentLocation) {
case 1:
openBook();
prevBtn.style.display = "inline";
paper1.classList.add("flipped");
paper1.style.zIndex = 1;
break;
case 2:
paper2.classList.add("flipped");
paper2.style.zIndex = 2;
break;
case 3:
nextBtn.style.display = "none";
paper3.classList.add("flipped");
paper3.style.zIndex = 3;
closeBook(false);
break;
default:
throw new Error("unkown state");
}
currentLocation++;
}
}
function goPrevPage() {
if(currentLocation > 1) {
switch(currentLocation) {
case 2:
closeBook(true);
prevBtn.style.display = "none";
paper1.classList.remove("flipped");
paper1.style.zIndex = 3;
break;
case 3:
paper2.classList.remove("flipped");
paper2.style.zIndex = 2;
break;
case 4:
openBook();
nextBtn.style.display = "inline";
paper3.classList.remove("flipped");
paper3.style.zIndex = 1;
break;
default:
throw new Error("unkown state");
}
currentLocation--;
}
}
var labelsdb = <?php echo json_encode($labelsdb); ?>; //array from database for dates and times
var datadb = <?php echo json_encode($datadb); ?>; // array from database for number of players
var datadon = <?php echo json_encode($datadon); ?>; // array from database for number of players
var datadoff = <?php echo json_encode($datadoff); ?>; // array from database for number of players
var ctx = document.getElementById("myChart"); // points to canvas
ctx.style.backgroundColor = "#2F3136"; //canvas background color
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labelsdb,
datasets: [{
label: 'Players',
yAxisID: 'A',
backgroundColor: '#593A45', // color for active players bars in graph
borderWidth: 1, // border for active players bars in graph
borderColor: '#F45E7F',
steppedLine: true, //true keeps even line horizontal until change, false displays curved line
data: datadb
}, {
label: 'Online',
yAxisID: 'B',
backgroundColor: '#808080', // color for active players bars in graph
borderWidth: 1, // border for active players bars in graph
borderColor: '#CECECE',
steppedLine: true, //true keeps even line horizontal until change, false displays curved line
data: datadon
}]
},
options: {
responsive: true, //whether graph is responsive when zoom in or out
maintainAspectRatio: false,
scales: {
xAxes: [{
scaleLabel: {
display: true,
fontColor: '#FFFFFF',
fontStyle: 'bold',
fontSize: 14
},
ticks: {
autoSkip: false,
maxTicksLimit: 24,
maxRotation: 45, //rotate text for hours at bottom of graph
minRotation: 45, //rotate text for hours at bottom of graph
fontColor: '#FFFFFF', // color of hours at bottom of graph
major: {
enabled: true, // <-- This is the key line
fontStyle: 'bold', //You can also style these values differently
fontSize: 14 //You can also style these values differently
}
},
type: 'time', //to show time at bottom of graph
time: {
unit: 'hour',
displayFormats: {
hour: 'hA', //example displays 9AM or 6PM
stepSize: 1 //1 for each hour to display at bottom of graph, 2 to show every 2 hrs.
}
},
display: true,
gridLines: {
display: true, // display vertical gridline
color: '#686868', //color of vertical gridlines
zeroLineColor: '#686868' //colors first vertical grid line
}
}],
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
ticks: {
fontColor: '#FFFFFF', // color of numbers at left side of graph for number of players
stepSize: 1
},
gridLines: {
display: true, //display horizontal gridlines
color: "#686868" //color of horizontal gridlines
},
scaleLabel: {
display: true, //display label at left vertical side of graph
labelString: 'Players', //text to be displayed at left vertical side of graph
fontColor: '#FFFFFF',
fontStyle: 'bold',
fontSize: 14,
}
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0,
stepSize: 1,
fontColor: '#808080',
fontStyle: 'bold',
fontSize: 14
},
gridLines: {
display: true, //display horizontal gridlines
color: "#686868" //color of horizontal gridlines
},
scaleLabel: {
display: true,
labelString: 'Online',
fontColor: '#808080',
fontStyle: 'bold',
fontSize: 14
}
}]
}
}
});
Solved!!
We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.