Reorganize the code in multiple new files
This commit is contained in:
dario-cfpt
@ -88,6 +88,9 @@
|
|||||||
|
|
||||||
<!-- Your custom app scripts -->
|
<!-- Your custom app scripts -->
|
||||||
<script src="js/app.js"></script>
|
<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>
|
<script src="js/index.js"></script>
|
||||||
|
|
||||||
</body>
|
</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 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() {
|
function displayCharacters() {
|
||||||
const housesWithCharacters = [];
|
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