Skip to content

Commit

Permalink
style(client): split "view" button into "info" and "gallery"
Browse files Browse the repository at this point in the history
  • Loading branch information
@NotExpectedYet
NotExpectedYet committed Oct 1, 2022
1 parent 61d4653 commit b3a1b0f
Show file tree
Hide file tree
Showing 3 changed files with 346 additions and 288 deletions.
302 changes: 166 additions & 136 deletions client/entry/history.runner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ document.getElementById('historyTable').addEventListener('click', (e) => {
e.preventDefault();
History.edit(e);
});

document.getElementById('historyTable').addEventListener('click', (e) => {
// Remove from UI
e.preventDefault();
History.gallery(e);
});
$('#historyModal').on('hidden.bs.modal', function (e) {
document.getElementById('historySaveBtn').remove();
document.getElementById('historyUpdateCostBtn').remove();
Expand Down Expand Up @@ -1099,27 +1103,163 @@ class History {
}
}

startDate.innerHTML = `<b>Started</b><hr>${new Date(
current.startDate
).toLocaleDateString()} - ${new Date(current.startDate).toLocaleTimeString()}`;
printTime.innerHTML = `<b>Duration</b><hr>${Calc.generateTime(current.printTime)}`;
endDate.innerHTML = `<b>Finished</b><hr>${new Date(
current.endDate
).toLocaleDateString()} - ${new Date(current.endDate).toLocaleTimeString()}`;
printerCost.value = current.printerCost;
jobHourlyCost.value = current.costPerHour;
notes.value = current.notes;
actualPrintTime.value = Calc.generateTime(current.printTime);
status.innerHTML = `${current.state}`;
if (typeof current.job !== 'undefined' && current.job !== null) {
estimatedPrintTime.value = Calc.generateTime(current.job.estimatedPrintTime);
printTimeAccuracy.value = `${current.job.printTimeAccuracy.toFixed(0) / 100}%`;
}
jobCosting.value = current.totalCost;
let upDate = new Date(current.file.uploadDate * 1000);
upDate = `${upDate.toLocaleDateString()} ${upDate.toLocaleTimeString()}`;
uploadDate.value = upDate;
path.value = current.file.path;
size.value = Calc.bytes(current.file.size).replace('<i class="fas fa-hdd"></i> ', '');

averagePrintTime.value = Calc.generateTime(current.file.averagePrintTime);
lastPrintTime.value = Calc.generateTime(current.file.lastPrintTime);
// const toolsArray = [];
// if (!!current?.spools) {
// for (const [i, spool] of current.spools.entries()) {
// const sp = Object.keys(spool)[0];
// const spoolSelector = returnBigFilamentSelectorTemplate(i);
// toolsArray.push(sp);
// viewTable.insertAdjacentHTML(
// 'beforeend',
// `
// <tr>
// <td>
// ${spoolSelector}
// </td>
// <td>
// ${spool[sp]?.volume ? spool[sp]?.volume : 0}m3
// </td>
// <td>
// ${spool[sp]?.length ? spool[sp]?.length : 0}m
// </td>
// <td>
// ${spool[sp]?.weight ? spool[sp]?.weight : 0}g
// </td>
// <td>
// ${spool[sp]?.cost ? spool[sp]?.cost.toFixed(2) : 0}
// </td>
// </tr>
// </tr>
// `
// );
// await drawHistoryDropDown(
// document.getElementById(`tool-${i}-bigFilamentSelect`),
// spool[sp]?.spoolId
// );
// }
// } else {
// const spoolSelector = returnBigFilamentSelectorTemplate(0);
// toolsArray.push(0);
// viewTable.insertAdjacentHTML(
// 'beforeend',
// `
// <tr>
// <td>
// ${spoolSelector}
// </td>
// <td>
// 0m3
// </td>
// <td>
// 0m
// </td>
// <td>
// 0g
// </td>
// <td>
// 0
// </td>
// </tr>
// </tr>
// `
// );
// await drawHistoryDropDown(document.getElementById(`tool-0-bigFilamentSelect`), 0);
// }

viewTable.insertAdjacentHTML(
'beforeend',
`
<tr style="background-color:#303030;">
<td>
Totals
</td>
<td>
${current.totalVolume.toFixed(2)}m3
</td>
<td>
${(current.totalLength / 1000).toFixed(2)}m
</td>
<td>
${current.totalWeight.toFixed(2)}g
</td>
<td>
${current.spoolCost.toFixed(2)}
</td>
</tr>
`
);
}
}

static async gallery(e){
if (e.target.classList.contains('historyGallery')) {
// Grab elements
const printerName = document.getElementById('printerGalleryName');
const fileName = document.getElementById('fileGalleryName');
const status = document.getElementById('printGalleryStatus');

printerName.innerHTML = ' - ';
fileName.innerHTML = ' - ';
status.innerHTML = ' - ';

const thumbnail = document.getElementById('thumbnails');
const thumbnailIndicators = document.getElementById('thumbnails-indicators');
thumbnail.innerHTML = '';
thumbnailIndicators.innerHTML = '';
const split = e.target.id.split('-');
const index = _.findIndex(this.historyList, function (o) {
return o._id == split[1];
});
const current = this.historyList[index];
printerName.innerHTML = current.printer;
fileName.innerHTML = current.file.name;
status.innerHTML = `${current.state}`;
let thbs = false;
let counter = 0;
let active = 'active';

if (
typeof current.snapshot !== 'undefined' &&
current.snapshot !== '' &&
current.snapshot !== null
typeof current.snapshot !== 'undefined' &&
current.snapshot !== '' &&
current.snapshot !== null
) {
thumbnailIndicators.insertAdjacentHTML(
'beforeend',
`
'beforeend',
`
<li data-target="#carouselExampleIndicators" data-slide-to="${counter}" class="${active}"></li>
`
);
thumbnail.insertAdjacentHTML(
'beforeend',
`
'beforeend',
`
<div class="carousel-item ${active} text-center" style="height:200px; background-image: url('${encodeURI(
current.snapshot
)}')">
current.snapshot
)}')">
<div class="carousel-caption d-none d-md-block">
<h6>Camera Snapshot</h6>
</div>
Expand All @@ -1132,22 +1272,22 @@ class History {
}

if (
typeof current.thumbnail !== 'undefined' &&
current.thumbnail != null &&
current.thumbnail !== ''
typeof current.thumbnail !== 'undefined' &&
current.thumbnail != null &&
current.thumbnail !== ''
) {
thumbnailIndicators.insertAdjacentHTML(
'beforeend',
`
'beforeend',
`
<li data-target="#carouselExampleIndicators" data-slide-to="${counter}" class="${active}"></li>
`
);
thumbnail.insertAdjacentHTML(
'beforeend',
`
'beforeend',
`
<div class="carousel-item ${active} text-center" style="height:200px; background-image: url('${encodeURI(
current.thumbnail
)}')">
current.thumbnail
)}')">
<div class="carousel-caption d-none d-md-block">
<h6>Slicer Thumbnail</h6>
</div>
Expand All @@ -1159,19 +1299,19 @@ class History {
counter = counter + 1;
}
if (
typeof current.timelapse !== 'undefined' &&
current.timelapse !== '' &&
current.timelapse !== null
typeof current.timelapse !== 'undefined' &&
current.timelapse !== '' &&
current.timelapse !== null
) {
thumbnailIndicators.insertAdjacentHTML(
'beforeend',
`
'beforeend',
`
<li data-target="#carouselExampleIndicators" data-slide-to="${counter}" class="${active}"></li>
`
);
thumbnail.insertAdjacentHTML(
'beforeend',
`
'beforeend',
`
<div class="carousel-item ${active} text-center" style="height:200px;">
<video autobuffer="autobuffer" autoplay="autoplay" loop="loop" controls="controls" style="height:350px;">
<source src='${encodeURI(current.timelapse)}'>
Expand All @@ -1190,116 +1330,6 @@ class History {
document.getElementById('galleryElements').style.display = 'none';
}

startDate.innerHTML = `<b>Started</b><hr>${new Date(
current.startDate
).toLocaleDateString()} - ${new Date(current.startDate).toLocaleTimeString()}`;
printTime.innerHTML = `<b>Duration</b><hr>${Calc.generateTime(current.printTime)}`;
endDate.innerHTML = `<b>Finished</b><hr>${new Date(
current.endDate
).toLocaleDateString()} - ${new Date(current.endDate).toLocaleTimeString()}`;
printerCost.value = current.printerCost;
jobHourlyCost.value = current.costPerHour;
notes.value = current.notes;
actualPrintTime.value = Calc.generateTime(current.printTime);
status.innerHTML = `${current.state}`;
if (typeof current.job !== 'undefined' && current.job !== null) {
estimatedPrintTime.value = Calc.generateTime(current.job.estimatedPrintTime);
printTimeAccuracy.value = `${current.job.printTimeAccuracy.toFixed(0) / 100}%`;
}
jobCosting.value = current.totalCost;
let upDate = new Date(current.file.uploadDate * 1000);
upDate = `${upDate.toLocaleDateString()} ${upDate.toLocaleTimeString()}`;
uploadDate.value = upDate;
path.value = current.file.path;
size.value = Calc.bytes(current.file.size).replace('<i class="fas fa-hdd"></i> ', '');

averagePrintTime.value = Calc.generateTime(current.file.averagePrintTime);
lastPrintTime.value = Calc.generateTime(current.file.lastPrintTime);
const toolsArray = [];
if (!!current?.spools) {
for (const [i, spool] of current.spools.entries()) {
const sp = Object.keys(spool)[0];
const spoolSelector = returnBigFilamentSelectorTemplate(i);
toolsArray.push(sp);
viewTable.insertAdjacentHTML(
'beforeend',
`
<tr>
<td>
${spoolSelector}
</td>
<td>
${spool[sp]?.volume ? spool[sp]?.volume : 0}m3
</td>
<td>
${spool[sp]?.length ? spool[sp]?.length : 0}m
</td>
<td>
${spool[sp]?.weight ? spool[sp]?.weight : 0}g
</td>
<td>
${spool[sp]?.cost ? spool[sp]?.cost.toFixed(2) : 0}
</td>
</tr>
</tr>
`
);
await drawHistoryDropDown(
document.getElementById(`tool-${i}-bigFilamentSelect`),
spool[sp]?.spoolId
);
}
} else {
const spoolSelector = returnBigFilamentSelectorTemplate(0);
toolsArray.push(0);
viewTable.insertAdjacentHTML(
'beforeend',
`
<tr>
<td>
${spoolSelector}
</td>
<td>
0m3
</td>
<td>
0m
</td>
<td>
0g
</td>
<td>
0
</td>
</tr>
</tr>
`
);
await drawHistoryDropDown(document.getElementById(`tool-0-bigFilamentSelect`), 0);
}

viewTable.insertAdjacentHTML(
'beforeend',
`
<tr style="background-color:#303030;">
<td>
Totals
</td>
<td>
${current.totalVolume.toFixed(2)}m3
</td>
<td>
${(current.totalLength / 1000).toFixed(2)}m
</td>
<td>
${current.totalWeight.toFixed(2)}g
</td>
<td>
${current.spoolCost.toFixed(2)}
</td>
</tr>
`
);
}
}

Expand Down

0 comments on commit b3a1b0f

Please sign in to comment.