fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improvements when Product Cards are Loading

Browse Source
This commit is contained in:
Luis Fernando Molina committed 2018-03-03 02:27:15 +01:00
1 parent df50812204
commit 92bd7d1436
6 files changed
+136 -61
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.vs/AAWebPlatform/v15/.suo
BIN
View File
Binary file not shown.
Dashboard.js
+1
View File
@@ -107,6 +107,7 @@ var viewPort = newViewPort();
const PRODUCT_CARD_STATUS = {
ON: 'on',
LOADING: 'loading',
OFF: 'off'
};
Panels/ProductsPanel.js
+3 -3
View File
@@ -5,7 +5,7 @@ function newProductsPanel() {
var thisObject = {
container: undefined,
getOnProductCards: getOnProductCards,
getLoadingProductCards: getLoadingProductCards,
draw: draw,
getContainer: getContainer, // returns the inner most container that holds the point received by parameter.
initialize: initialize
@@ -116,7 +116,7 @@ function newProductsPanel() {
}
function getOnProductCards() {
function getLoadingProductCards() {
/* Returns all productCards which status is ON */
@@ -124,7 +124,7 @@ function newProductsPanel() {
for (let i = 0; i < productCards.length; i++) {
if (productCards[i].status === PRODUCT_CARD_STATUS.ON) {
if (productCards[i].status === PRODUCT_CARD_STATUS.LOADING) {
onProducts.push(productCards[i]);
}
ProductCard.js
+123 -51
View File
@@ -26,19 +26,22 @@
let UNLOADED_STROKE_STYLE = 'rgba(226, 226, 226, 0.5)';
let marketFileProgressBar = {
value: 100,
value: 0,
animatedValue: 0,
fillStyle: UNLOADED_FILL_STYLE,
strokeStyle: UNLOADED_STROKE_STYLE
};
let dailyFileProgressBar = {
value: 100,
value: 0,
animatedValue: 0,
fillStyle: UNLOADED_FILL_STYLE,
strokeStyle: UNLOADED_STROKE_STYLE
};
let singleFileProgressBar = {
value: 100,
value: 0,
animatedValue: 0,
fillStyle: UNLOADED_FILL_STYLE,
strokeStyle: UNLOADED_STROKE_STYLE
};
@@ -76,13 +79,15 @@
thisObject.status = storedValue;
if (thisObject.status === PRODUCT_CARD_STATUS.ON) {
changeStatusTo(PRODUCT_CARD_STATUS.LOADING);
}
} else {
thisObject.status = PRODUCT_CARD_STATUS.ON;
/* Save the value for future use */
window.localStorage.setItem(thisObject.code, thisObject.status);
changeStatusTo(PRODUCT_CARD_STATUS.LOADING); // This happens the first time the app is run on a new browser.
}
@@ -115,19 +120,13 @@
if (event.currentValue === event.totalValue) {
marketFileProgressBar = {
value: 100,
fillStyle: LOADED_FILL_STYLE,
strokeStyle: LOADED_STROKE_STYLE
};
marketFileProgressBar.value= 100;
} else {
marketFileProgressBar = {
value: Math.trunc(event.currentValue * 100 / event.totalValue),
fillStyle: LOADING_FILL_STYLE,
strokeStyle: LOADING_STROKE_STYLE
};
marketFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue);
marketFileProgressBar.fillStyle = LOADING_FILL_STYLE;
marketFileProgressBar.strokeStyle = LOADING_STROKE_STYLE;
}
@@ -142,19 +141,13 @@
if (event.currentValue === event.totalValue) {
dailyFileProgressBar = {
value: 100,
fillStyle: LOADED_FILL_STYLE,
strokeStyle: LOADED_STROKE_STYLE
};
dailyFileProgressBar.value = 100;
} else {
dailyFileProgressBar = {
value: Math.trunc(event.currentValue * 100 / event.totalValue),
fillStyle: LOADING_FILL_STYLE,
strokeStyle: LOADING_STROKE_STYLE
};
dailyFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue);
dailyFileProgressBar.fillStyle = LOADING_FILL_STYLE;
dailyFileProgressBar.strokeStyle = LOADING_STROKE_STYLE;
}
@@ -169,19 +162,13 @@
if (event.currentValue === event.totalValue) {
singleFileProgressBar = {
value: 100,
fillStyle: LOADED_FILL_STYLE,
strokeStyle: LOADED_STROKE_STYLE
};
singleFileProgressBar.value = 100;
} else {
singleFileProgressBar = {
value: Math.trunc(event.currentValue * 100 / event.totalValue),
fillStyle: LOADING_FILL_STYLE,
strokeStyle: LOADING_STROKE_STYLE
};
singleFileProgressBar.value = Math.trunc(event.currentValue * 100 / event.totalValue);
singleFileProgressBar.fillStyle = LOADING_FILL_STYLE;
singleFileProgressBar.strokeStyle = LOADING_STROKE_STYLE;
}
@@ -197,21 +184,48 @@
switch (thisObject.status) {
case PRODUCT_CARD_STATUS.ON:
thisObject.status = PRODUCT_CARD_STATUS.OFF;
changeStatusTo(PRODUCT_CARD_STATUS.OFF);
marketFileProgressBar.animatedValue = 0;
marketFileProgressBar.value = 0;
marketFileProgressBar.fillStyle = UNLOADED_FILL_STYLE;
marketFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE;
dailyFileProgressBar.animatedValue = 0;
dailyFileProgressBar.value = 0;
dailyFileProgressBar.fillStyle = UNLOADED_FILL_STYLE;
dailyFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE;
singleFileProgressBar.animatedValue = 0;
singleFileProgressBar.value = 0;
singleFileProgressBar.fillStyle = UNLOADED_FILL_STYLE;
singleFileProgressBar.strokeStyle = UNLOADED_STROKE_STYLE;
break;
case PRODUCT_CARD_STATUS.OFF:
thisObject.status = PRODUCT_CARD_STATUS.ON;
changeStatusTo(PRODUCT_CARD_STATUS.LOADING);
break;
}
}
let eventData = thisObject;
function changeStatusTo(pNewStatus) {
thisObject.container.eventHandler.raiseEvent('Status Changed', eventData);
if (thisObject.status !== pNewStatus) {
window.localStorage.setItem(thisObject.code, thisObject.status);
thisObject.status = pNewStatus;
let eventData = thisObject;
thisObject.container.eventHandler.raiseEvent('Status Changed', eventData);
window.localStorage.setItem(thisObject.code, thisObject.status);
}
}
function draw() {
@@ -237,8 +251,9 @@
browserCanvasContext.arc(centerPoint.x, centerPoint.y, 3, 0, 2 * Math.PI);
browserCanvasContext.closePath();
let offFillStyle = 'rgba(232, 28, 28, 1)';
let onFillStyle = 'rgba(45, 232, 28, 1)';
let offFillStyle = 'rgba(232, 28, 28, 0.75)';
let onFillStyle = 'rgba(45, 232, 28, 0.75)';
let loadingFillStyle = 'rgba(237, 227, 47, 0.75)';
switch (thisObject.status) {
@@ -250,6 +265,10 @@
browserCanvasContext.fillStyle = offFillStyle;
break;
case PRODUCT_CARD_STATUS.LOADING:
browserCanvasContext.fillStyle = loadingFillStyle;
break;
}
browserCanvasContext.fill();
@@ -317,6 +336,10 @@
browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
/* ------------------- Progress Bars -------------------------- */
const ANIMATED_INCREMENT = 3;
let point1;
let point2;
let point3;
@@ -324,18 +347,34 @@
/* We draw here the Market Progress Bar. */
/* Animate */
if (marketFileProgressBar.animatedValue < marketFileProgressBar.value) {
marketFileProgressBar.animatedValue = marketFileProgressBar.animatedValue + ANIMATED_INCREMENT;
}
if (marketFileProgressBar.animatedValue >= 100) {
marketFileProgressBar.fillStyle = LOADED_FILL_STYLE;
marketFileProgressBar.strokeStyle = LOADED_STROKE_STYLE;
changeStatusTo(PRODUCT_CARD_STATUS.ON);
}
point1 = {
x: 0,
y: thisObject.container.frame.height - 1
};
point2 = {
x: thisObject.container.frame.width * marketFileProgressBar.value / 100,
x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100,
y: thisObject.container.frame.height - 1
};
point3 = {
x: thisObject.container.frame.width * marketFileProgressBar.value / 100,
x: thisObject.container.frame.width * marketFileProgressBar.animatedValue / 100,
y: thisObject.container.frame.height - 3
};
@@ -367,18 +406,34 @@
/* We draw here the Daily Progress Bar. */
/* Animate */
if (dailyFileProgressBar.animatedValue < dailyFileProgressBar.value) {
dailyFileProgressBar.animatedValue = dailyFileProgressBar.animatedValue + ANIMATED_INCREMENT;
}
if (dailyFileProgressBar.animatedValue >= 100) {
dailyFileProgressBar.fillStyle = LOADED_FILL_STYLE;
dailyFileProgressBar.strokeStyle = LOADED_STROKE_STYLE;
changeStatusTo(PRODUCT_CARD_STATUS.ON);
}
point1 = {
x: 0,
y: thisObject.container.frame.height - 4
};
point2 = {
x: thisObject.container.frame.width * dailyFileProgressBar.value / 100,
x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100,
y: thisObject.container.frame.height - 4
};
point3 = {
x: thisObject.container.frame.width * dailyFileProgressBar.value / 100,
x: thisObject.container.frame.width * dailyFileProgressBar.animatedValue / 100,
y: thisObject.container.frame.height - 6
};
@@ -410,18 +465,35 @@
/* We draw here the Single File Progress Bar. */
/* Animate */
if (singleFileProgressBar.animatedValue < singleFileProgressBar.value) {
singleFileProgressBar.animatedValue = singleFileProgressBar.animatedValue + ANIMATED_INCREMENT;
}
if (singleFileProgressBar.animatedValue >= 100) {
singleFileProgressBar.fillStyle = LOADED_FILL_STYLE;
singleFileProgressBar.strokeStyle = LOADED_STROKE_STYLE;
changeStatusTo(PRODUCT_CARD_STATUS.ON);
}
point1 = {
x: 0,
y: thisObject.container.frame.height - 7
};
point2 = {
x: thisObject.container.frame.width * singleFileProgressBar.value / 100,
x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100,
y: thisObject.container.frame.height - 7
};
point3 = {
x: thisObject.container.frame.width * singleFileProgressBar.value / 100,
x: thisObject.container.frame.width * singleFileProgressBar.animatedValue / 100,
y: thisObject.container.frame.height - 9
};
TimelineChart.js
+8 -6
View File
@@ -101,15 +101,15 @@ function newTimelineChart() {
viewPort.displace(displaceVector);
/* Lets get all the cards that are turned on. */
/* Lets get all the cards that needs to be loaded. */
let onProductCards = productsPanel.getOnProductCards();
let loadingProductCards = productsPanel.getLoadingProductCards();
for (let i = 0; i < onProductCards.length; i++) {
for (let i = 0; i < loadingProductCards.length; i++) {
/* For each one, we will initialize the associated plotter. */
initializePlotter(onProductCards[i]);
initializePlotter(loadingProductCards[i]);
}
}
@@ -207,7 +207,7 @@ function newTimelineChart() {
function onProductCardStatusChanged(pProductCard) {
if (pProductCard.status === PRODUCT_CARD_STATUS.ON) {
if (pProductCard.status === PRODUCT_CARD_STATUS.LOADING) {
/* Lets see if we can find the Plotter of this card on our Active Plotters list, other wise we will initialize it */
@@ -229,7 +229,9 @@ function newTimelineChart() {
}
} else {
}
if (pProductCard.status === PRODUCT_CARD_STATUS.OFF) {
/* If the plotter of this card is on our Active Plotters list, then we remove it. */
server.js
+1 -1
View File
@@ -6,7 +6,7 @@ if (CONSOLE_LOG === true) {
}
let debugMode = false; // This forces the server to read Plotters from the local drive.
let debugMode = true; // This forces the server to read Plotters from the local drive.
if (CONSOLE_LOG === true && debugMode === true) {