Reorganize the code in multiple new files
This commit is contained in:
dario-cfpt
@ -88,6 +88,9 @@
|
||||
|
||||
<!-- Your custom app scripts -->
|
||||
<script src="js/app.js"></script>
|
||||
<script src="js/database.js"></script>
|
||||
<script src="js/graph.js"></script>
|
||||
<script src="js/stats.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
57
mobile/www/js/database.js
Normal file
57
mobile/www/js/database.js
Normal file
@ -0,0 +1,57 @@
|
||||
/*
|
||||
File name : database.js
|
||||
Description : Communicates with the server to ensure that the data is up to date.
|
||||
*/
|
||||
|
||||
const BASE_URL = "http://localhost:3000/";
|
||||
let feData = JSON.parse(localStorage.getItem("feData"));
|
||||
|
||||
if (feData != null) {
|
||||
fetch(BASE_URL + "update", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({version: feData.version}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.ok) {
|
||||
return res.json();
|
||||
} else {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
updateData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
} else {
|
||||
// Import the data if none was found
|
||||
fetch(BASE_URL + "all")
|
||||
.then(res => {
|
||||
if (res.ok) {
|
||||
return res.json();
|
||||
} else {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
updateData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
function updateData(data) {
|
||||
// If the data received from the server are not empty then we can save them in the local storage
|
||||
if (Object.keys(data).length > 0) {
|
||||
localStorage.setItem("feData", JSON.stringify(data));
|
||||
feData = data;
|
||||
}
|
||||
|
||||
// End of the update process, we can now display the data
|
||||
displayCharacters();
|
||||
}
|
||||
118
mobile/www/js/graph.js
Normal file
118
mobile/www/js/graph.js
Normal file
@ -0,0 +1,118 @@
|
||||
/*
|
||||
File name : graph.js
|
||||
Description : Display some graphs according to their settings
|
||||
*/
|
||||
|
||||
function displayColumnChart(categories, data) {
|
||||
Highcharts.chart('container-char-gr', {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: 'Growth Rates: <b>{point.y}%</b>'
|
||||
},
|
||||
xAxis: {
|
||||
categories: categories,
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
stacking: 'normal',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '{point.y}%'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: data,
|
||||
});
|
||||
}
|
||||
|
||||
function displayPolarSpider(categories, data) {
|
||||
Highcharts.chart('container-char-gr', {
|
||||
chart: {
|
||||
polar: true,
|
||||
type: 'line'
|
||||
},
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
pane: {
|
||||
size: '100%'
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
xAxis: {
|
||||
categories: categories,
|
||||
tickmarkPlacement: 'on',
|
||||
lineWidth: 0,
|
||||
},
|
||||
yAxis: {
|
||||
gridLineInterpolation: 'polygon',
|
||||
lineWidth: 0,
|
||||
min: 0,
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
pointFormat: '<span style="color:{series.color}"><b>{point.y}%</b><br/>'
|
||||
},
|
||||
series: [{
|
||||
name: 'Growth Rates',
|
||||
data: data,
|
||||
pointPlacement: 'on'
|
||||
}],
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 800
|
||||
},
|
||||
chartOptions: {
|
||||
pane: {
|
||||
size: '50%'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function displayPieChart(data) {
|
||||
Highcharts.chart('container-char-gr', {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.y}%</b>'
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<b>{point.name}</b>: {point.y}%'
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Growth Rates',
|
||||
colorByPoint: true,
|
||||
data: data,
|
||||
}]
|
||||
});
|
||||
}
|
||||
@ -1,57 +1,9 @@
|
||||
const BASE_URL = "http://localhost:3000/";
|
||||
/*
|
||||
File name : index.js
|
||||
Description : Display the content of the home page
|
||||
*/
|
||||
|
||||
const PRIMARY_NODE_NAME = "Fire Emblem Three House";
|
||||
const GRAPH_PIE_CHART_VALUE = "pie-chart";
|
||||
const GRAPH_SPIDER_WEB_VALUE = "spider-web";
|
||||
const GRAPH_COLUMN_CHART_VALUE = "column-chart";
|
||||
let actualCharId;
|
||||
|
||||
let feData = JSON.parse(localStorage.getItem("feData"));
|
||||
|
||||
function updateData(data) {
|
||||
if (Object.keys(data).length > 0) {
|
||||
localStorage.setItem("feData", JSON.stringify(data));
|
||||
feData = data;
|
||||
}
|
||||
displayCharacters();
|
||||
}
|
||||
|
||||
if (feData != null) {
|
||||
fetch(BASE_URL + "update", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({version: feData.version}),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.ok) {
|
||||
return res.json();
|
||||
} else {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
updateData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
} else {
|
||||
fetch(BASE_URL + "all")
|
||||
.then(res => {
|
||||
if (res.ok) {
|
||||
return res.json();
|
||||
} else {
|
||||
console.log(res);
|
||||
}
|
||||
})
|
||||
.then(data => {
|
||||
updateData(data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
function displayCharacters() {
|
||||
const housesWithCharacters = [];
|
||||
@ -139,189 +91,4 @@ function displayCharacters() {
|
||||
}
|
||||
}]
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function createTableOfStats() {
|
||||
const stats = feData.stats;
|
||||
stats.forEach(stat => {
|
||||
const th = $$(`<th>${stat.shortName}</th>`);
|
||||
const td = $$(`<td id="stat-${stat.id}"></td>`);
|
||||
$$("#table-gr-header").append(th);
|
||||
$$("#table-gr-content").append(td);
|
||||
});
|
||||
}
|
||||
|
||||
function displayTableOfGrowthRates() {
|
||||
const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == actualCharId) ? x : null).filter((x) => x != null);
|
||||
|
||||
charGrowthRates.forEach(gr => {
|
||||
$$("#stat-" + gr.idStat).text(gr.value);
|
||||
});
|
||||
|
||||
displayGraphOfGrowthRates();
|
||||
}
|
||||
|
||||
function displayGraphOfGrowthRates() {
|
||||
const selectedGraph = $$("#select-graph").val();
|
||||
|
||||
switch (selectedGraph) {
|
||||
case GRAPH_SPIDER_WEB_VALUE:
|
||||
displayPolarSpiderOfGrowthRates(actualCharId);
|
||||
break;
|
||||
case GRAPH_PIE_CHART_VALUE:
|
||||
displayPieChartOfGrowthRates(actualCharId);
|
||||
break;
|
||||
case GRAPH_COLUMN_CHART_VALUE:
|
||||
default:
|
||||
displayColumnChartOfGrowthRates(actualCharId);
|
||||
// Column chart graph by default
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function displayPolarSpiderOfGrowthRates(charId) {
|
||||
const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
|
||||
const statsNames = feData.stats.map(x => x.name);
|
||||
const statsValues = charGrowthRates.map(x => x.value);
|
||||
|
||||
Highcharts.chart('container-char-gr', {
|
||||
chart: {
|
||||
polar: true,
|
||||
type: 'line'
|
||||
},
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
pane: {
|
||||
size: '100%'
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
xAxis: {
|
||||
categories: statsNames,
|
||||
tickmarkPlacement: 'on',
|
||||
lineWidth: 0,
|
||||
},
|
||||
yAxis: {
|
||||
gridLineInterpolation: 'polygon',
|
||||
lineWidth: 0,
|
||||
min: 0,
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
pointFormat: '<span style="color:{series.color}"><b>{point.y}%</b><br/>'
|
||||
},
|
||||
series: [{
|
||||
name: 'Growth Rates',
|
||||
data: statsValues,
|
||||
pointPlacement: 'on'
|
||||
}],
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 800
|
||||
},
|
||||
chartOptions: {
|
||||
pane: {
|
||||
size: '50%'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function displayPieChartOfGrowthRates(charId) {
|
||||
const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
|
||||
const statsValues = [];
|
||||
|
||||
charGrowthRates.forEach(gr => {
|
||||
const nameStat = feData.stats.find(x => x.id == gr.idStat).name;
|
||||
const statWithValue = {
|
||||
name: nameStat,
|
||||
y: gr.value,
|
||||
};
|
||||
statsValues.push(statWithValue);
|
||||
});
|
||||
|
||||
|
||||
Highcharts.chart('container-char-gr', {
|
||||
chart: {
|
||||
plotBackgroundColor: null,
|
||||
plotBorderWidth: null,
|
||||
plotShadow: false,
|
||||
type: 'pie'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.y}%</b>'
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<b>{point.name}</b>: {point.y}%'
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Growth Rates',
|
||||
colorByPoint: true,
|
||||
data: statsValues,
|
||||
}]
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function displayColumnChartOfGrowthRates(charId) {
|
||||
const charFirstName = feData.characters.find(x => x.id == charId).firstName;
|
||||
const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
|
||||
const statsNames = feData.stats.map(x => x.name);
|
||||
const statsValues = [];
|
||||
const charData = {
|
||||
name: charFirstName,
|
||||
};
|
||||
|
||||
charGrowthRates.forEach(gr => {
|
||||
statsValues.push(gr.value);
|
||||
});
|
||||
charData.data = statsValues;
|
||||
|
||||
Highcharts.chart('container-char-gr', {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: 'Growth Rates: <b>{point.y}%</b>'
|
||||
},
|
||||
xAxis: {
|
||||
categories: statsNames
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
stacking: 'normal',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '{point.y}%'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [charData],
|
||||
});
|
||||
}
|
||||
88
mobile/www/js/stats.js
Normal file
88
mobile/www/js/stats.js
Normal file
@ -0,0 +1,88 @@
|
||||
/*
|
||||
File name : stats.js
|
||||
Description : Display the stats of a character and/or class with various graphs
|
||||
*/
|
||||
|
||||
const GRAPH_PIE_CHART_VALUE = "pie-chart";
|
||||
const GRAPH_SPIDER_WEB_VALUE = "spider-web";
|
||||
const GRAPH_COLUMN_CHART_VALUE = "column-chart";
|
||||
let actualCharId;
|
||||
|
||||
function createTableOfStats() {
|
||||
const stats = feData.stats;
|
||||
stats.forEach(stat => {
|
||||
const th = $$(`<th>${stat.shortName}</th>`);
|
||||
const td = $$(`<td id="stat-${stat.id}"></td>`);
|
||||
$$("#table-gr-header").append(th);
|
||||
$$("#table-gr-content").append(td);
|
||||
});
|
||||
}
|
||||
|
||||
function displayTableOfGrowthRates() {
|
||||
const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == actualCharId) ? x : null).filter((x) => x != null);
|
||||
|
||||
charGrowthRates.forEach(gr => {
|
||||
$$("#stat-" + gr.idStat).text(gr.value);
|
||||
});
|
||||
|
||||
displayGraphOfGrowthRates();
|
||||
}
|
||||
|
||||
function displayGraphOfGrowthRates() {
|
||||
const selectedGraph = $$("#select-graph").val();
|
||||
|
||||
switch (selectedGraph) {
|
||||
case GRAPH_SPIDER_WEB_VALUE:
|
||||
displayPolarSpiderOfGrowthRates(actualCharId);
|
||||
break;
|
||||
case GRAPH_PIE_CHART_VALUE:
|
||||
displayPieChartOfGrowthRates(actualCharId);
|
||||
break;
|
||||
case GRAPH_COLUMN_CHART_VALUE:
|
||||
default:
|
||||
displayColumnChartOfGrowthRates(actualCharId);
|
||||
// Column chart graph by default
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function displayColumnChartOfGrowthRates(charId) {
|
||||
const charFirstName = feData.characters.find(x => x.id == charId).firstName;
|
||||
const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
|
||||
const statsNames = feData.stats.map(x => x.name);
|
||||
const statsValues = [];
|
||||
const charData = {
|
||||
name: charFirstName,
|
||||
};
|
||||
|
||||
charGrowthRates.forEach(gr => {
|
||||
statsValues.push(gr.value);
|
||||
});
|
||||
charData.data = statsValues;
|
||||
|
||||
displayColumnChart(statsNames, [charData]); // The data must be an array
|
||||
}
|
||||
|
||||
function displayPolarSpiderOfGrowthRates(charId) {
|
||||
const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
|
||||
const statsNames = feData.stats.map(x => x.name);
|
||||
const statsValues = charGrowthRates.map(x => x.value);
|
||||
|
||||
displayPolarSpider(statsNames, statsValues);
|
||||
}
|
||||
|
||||
function displayPieChartOfGrowthRates(charId) {
|
||||
const charGrowthRates = feData.charGrowthRates.map(x => (x.idCharacter == charId) ? x : null).filter((x) => x != null);
|
||||
const statsValues = [];
|
||||
|
||||
charGrowthRates.forEach(gr => {
|
||||
const nameStat = feData.stats.find(x => x.id == gr.idStat).name;
|
||||
const statWithValue = {
|
||||
name: nameStat,
|
||||
y: gr.value,
|
||||
};
|
||||
statsValues.push(statWithValue);
|
||||
});
|
||||
|
||||
displayPieChart(statsValues);
|
||||
}
|
||||
Reference in New Issue
Block a user