Skip to content
This repository has been archived by the owner on Sep 26, 2022. It is now read-only.

#102 gui improvement #103

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

#102 gui improvement #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a38c37
#102 add navbar nad simple abaout page
piotr-placzek Mar 9, 2022
d3dc44b
#102 hack table name to manufacturer column
piotr-placzek Mar 9, 2022
536f893
#102 fix linter issues
piotr-placzek Mar 9, 2022
37c20b4
#102 update about page
piotr-placzek Mar 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 111 additions & 0 deletions src/gui/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="tabulator.min.js"></script>
<link href="tabulator_bulma.min.css" rel="stylesheet" />
<link href="bulma.min.css" rel="stylesheet" />
<title>hobby paints catalog</title>
</head>
<body>
<nav class="navbar has-background-primary" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<p class="navbar-item">Hobby Paints Catalog</p>

<a
role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>

<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start"></div>
<div class="navbar-end">
<a class="navbar-item" href="index.html">Table</a>
<a class="navbar-item" href="about.html"> About </a>
</div>
</div>
</nav>

<div class="container">
<h1 class="title mt-4">About</h1>
<h2 class="subtitle">Hobby Paints Catalog (HPC)</h2>
<div class="content">
<p class="mb-4">
This is a simple application to finding paints and their replacements for painters of figures and
models.<br />
App is totally free and open source.<br />
Feel free to contribute, and DON'T USE IT for commercial purposes.
</p>
<p>
Making this app takes me few hours of coding ;)<br />
<a href="https://wakatime.com/badge/github/piotr-placzek/hobby-paints-catalog"
><img
src="https://wakatime.com/badge/github/piotr-placzek/hobby-paints-catalog.svg"
alt="wakatime"
/></a>
</p>

<p>
If you are enjoying with this app and you find it useful, you can always
<a href="https://buycoffee.to/poohpatine" target="_blank">buy me a coffee</a>.<br />
</p>
</div>
</div>

<div class="container">
<h2 class="title mt-4">Sources</h2>
<div class="content">
<p class="mb-4">
Product inventory such us catalog numbers, names and other information are obtained from paint
manufacturers' online stores or catalogs.
</p>

<p class="mb-4">
The list of replacements comes from various open sources, a list of which can be found below.
</p>

<ul>
<li><a href="https://miniemporium.pl/zamienniki" target="_blank">Mini Emporium Samiego</a></li>
<li>
<a
href="https://issuu.com/thearmypainter/docs/the_army_painter_colour_conversion_chart"
target="_blank"
>The Army Painter Colour Conversion Chart</a
>
</li>
</ul>

<p class="mb-4">
You can also find other conversion sources on the internet.<br />
I'm working on ensuring that my app also includes conversions from the sources below.
</p>

<ul>
<li><a href="https://redgrimm.github.io/paint-conversion/index.html" target="_blank">redgrimm</a></li>
<li><a href="https://www.dakkadakka.com/wiki/en/paint_range_compatibility_chart" target="_blank">dakka dakka</a></li>
<li><a href="https://spikeybits.com/2016/09/vallejo-to-gw-paint-conversion-chart-pdf.html" target="_blank">spikey bits</a></li>
</ul>

</div>
</div>

<footer class="footer">
<div class="content has-text-centered">
<p>
Hobby Paints Catalog is licensed
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
</div>
</footer>
</body>
</html>
36 changes: 32 additions & 4 deletions src/gui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,48 @@
<title>hobby paints catalog</title>
</head>
<body>
<nav class="navbar has-background-primary" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<p class="navbar-item">Hobby Paints Catalog</p>
<a
role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>

<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<a class="navbar-item" href="index.html">Table</a>
<a class="navbar-item" href="about.html"> About </a>
</div>
</div>
</nav>

<div id="loading">
<p id="loading-info"></p>
</div>

<div id="main-table-controls" class="block mx-2 mt-4" style="display: none;">
<div id="main-table-controls" class="block mx-2 mt-4" style="display: none">
<div class="field is-grouped">
<div class="control">
<input class="input" id="search-input" type="text" placeholder="Search by name or index" />
</div>
<p class="control" style="padding: 0.5em;">Click row to show replacements</p>
<p class="control" style="padding: 0.5em">Click row to show replacements</p>
</div>
</div>

<div id="main-table"></div>
<script type="text/javascript" src="index.js"></script>
<div class="container is-fluid">
<div id="main-table"></div>
<script type="text/javascript" src="index.js"></script>
</div>
</body>
</html>
6 changes: 3 additions & 3 deletions src/gui/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function insertData(data) {
function createTable() {
table = new Tabulator('#main-table', { //eslint-disable-line no-undef
data: tableData,
height: '90vh',
height: '82vh',
layout: 'fitColumns',
pagination: 'local',
paginationCounter: 'rows',
Expand All @@ -48,8 +48,8 @@ function createTable() {
sorterParams: { locale: true, alignEmptyValues: 'down' }
},
{
title: 'Series',
field: 'series',
title: 'Manufacturer',
field: 'manufacturer',
width: '150px'
}
]
Expand Down
24 changes: 23 additions & 1 deletion src/service/guiService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,34 @@ async function getAllProducts(event) {
logger.info(`Received ${records.length} ${db.models[i]}.`);
event.reply(
'getAllProducts',
records.map(r => r.dataValues)
records.map(r => Object.assign(r.dataValues, { manufacturer: setupManufacturer(db.models[i]) }))
);
}
event.reply('allProductsSent');
}

/**
* @param {string} tableName
* @returns {string}
*/
function setupManufacturer(tableName) {
const splitCamelCaseToString = s => {
return s
.split(/(?=[A-Z])/)
.map(p => {
return p[0].toUpperCase() + p.slice(1);
})
.join(' ');
};

let tmp = new String(tableName); // eslint-disable-line no-new-wrappers
tmp = tmp.slice(0, -5);
if (tmp === 'GameWorkshop') {
tmp = 'GamesWorkshop';
}
return splitCamelCaseToString(tmp);
}

module.exports = {
getAllProducts
};