Skip to content

Commit 77a25ee

Browse files
author
Bernhard Vollmer
committed
Händler App Struktur gefestigt
1 parent f2f40a6 commit 77a25ee

15 files changed

+252
-35
lines changed

‎src/main/server/client/client.js

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ require("./../../app/www/js/utils/queryDOMElements");
22
const LoginFrame = require("./webcomponents/login-frame");
33
const CustomerApp = require("./webcomponents/customer-app");
44
const Cookies = require("js-cookie");
5+
const nunjucks = require("nunjucks");
6+
nunjucks.configure({ autoescape: true });
57

68
document.addEventListener('DOMContentLoaded',()=> {
79
const login = new LoginFrame();

‎src/main/server/client/i18n.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const i18n = {
2+
parse:(language,paths)=>{
3+
let result = i18n[language];
4+
paths.split('.').forEach(path=>{
5+
result = result[path];
6+
})
7+
return result;
8+
},
9+
de:{
10+
sidebar:{
11+
overview:{
12+
value:'Übersicht'
13+
},
14+
settings:{
15+
value:'Einstellungen'
16+
},
17+
products:{
18+
value:'Produkte'
19+
}
20+
},
21+
customerData:{
22+
ansprechpartner: 'Ansprechpartner',
23+
name:{
24+
value:'Name'
25+
},
26+
telefon:{
27+
value:'Telefon'
28+
},
29+
mail:{
30+
value:'E-Mail'
31+
},
32+
oeffnungszeiten:{
33+
value:'Öffnungszeiten'
34+
},
35+
beginn:{
36+
value:'von'
37+
},
38+
ende:{
39+
value:'bis'
40+
},
41+
homepage:{
42+
value:'Webseite'
43+
},
44+
beschreibung:{
45+
value:'Beschreibung'
46+
},
47+
reservierbar:{
48+
value:'Reservierbar'
49+
},
50+
chat:{
51+
value:'Chat erreichbar'
52+
},
53+
adresse: {
54+
value: 'Adresse',
55+
title: 'Hier bitte die Anschrift eingeben'
56+
}
57+
}
58+
},
59+
en:{
60+
customerData:{
61+
ansprechpartner: 'Contact',
62+
adresse: {
63+
title: 'Adresse',
64+
tooltip: 'Hier bitte die Anschrift eingeben'
65+
}
66+
}
67+
}
68+
}
69+
module.exports = i18n;

‎src/main/server/client/webcomponents/customer-app.js

+24-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,31 @@
11
const dom = require("./../../../app/www/js/utils/dom");
22
const superagent = require("superagent");
3-
const CustomerDataPage = require("./customer-data-page");
3+
const CustomerOverviewPage = require("./customer-overview-page");
4+
require("./customer-data-page");
5+
require("./customer-products-page");
6+
const ServerBasePage = require("./server-base-page");
7+
8+
class CustomerApp extends ServerBasePage {
9+
templateSelector() {
10+
return "#customer-app";
11+
}
412

5-
class CustomerApp extends HTMLElement {
613
connectedCallback(){
7-
this.appendChild(new CustomerDataPage());
14+
const target = dom.div().create();
15+
this.appendChild(target);
16+
const domTree=this.render(target,{})
17+
const content =$('.content', target);
18+
content.appendChild(new CustomerOverviewPage());
19+
$$('[target-component]').forEach(button=>{
20+
button.addEventListener('click', ()=>{
21+
const attr=button.getAttribute('target-component');
22+
const Page = window.customElements.get(attr);
23+
console.log(attr)
24+
console.log(Page)
25+
content.innerHTML='';
26+
content.appendChild( new Page());
27+
})
28+
})
829
}
930
}
1031
window.customElements.define('customer-app', CustomerApp);

‎src/main/server/client/webcomponents/customer-data-page.js

+10-25
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,19 @@
11
const dom = require("./../../../app/www/js/utils/dom");
2-
const superagent = require("superagent");
3-
const Cookies = require("js-cookie");
4-
const nunjucks = require("nunjucks");
2+
const ServerBasePage = require("./server-base-page");
53

6-
class CustomerDataPage extends HTMLElement {
7-
connectedCallback() {
8-
nunjucks.configure({ autoescape: true });
9-
this.innerHTML = this.template('Ricci')
10-
this.get('/customer/data').then(d=>{
11-
const template = $('#customer-data').textContent;
12-
console.log(template)
13-
console.log(d)
14-
this.innerHTML = nunjucks.renderString(template, d);
15-
});
16-
}
4+
class CustomerDataPage extends ServerBasePage {
175

18-
template(name) {
19-
return `Hey ${name}`
6+
templateSelector() {
7+
return '#customer-data'
208
}
219

22-
async get(url) {
23-
try {
24-
const rsp = await superagent.get(url);
25-
return rsp.body;
26-
} catch (err) {
27-
Cookies.remove('token');
28-
location.reload();
29-
}
10+
connectedCallback() {
11+
const content = dom.div().create();
12+
this.appendChild(content);
13+
this.get('/customer/data').then(d=>{
14+
this.render(content, d);
15+
});
3016
}
31-
3217
}
3318

3419
window.customElements.define('customer-data-page', CustomerDataPage);

‎src/main/server/client/webcomponents/customer-overview-page.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const ServerBasePage = require("./server-base-page");
2+
const dom = require("./../../../app/www/js/utils/dom");
3+
const CustomerDataPage = require("./customer-data-page");
4+
5+
class CustomerOverviewPage extends ServerBasePage {
6+
templateSelector() {
7+
return "#customer-overview";
8+
}
9+
10+
connectedCallback(){
11+
const content = dom.div().create();
12+
this.appendChild(content);
13+
const domTree=this.render(content,{})
14+
}
15+
}
16+
window.customElements.define('customer-overview-page', CustomerOverviewPage);
17+
module.exports=CustomerOverviewPage;

‎src/main/server/client/webcomponents/customer-products-page.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const ServerBasePage = require("./server-base-page");
2+
const dom = require("./../../../app/www/js/utils/dom");
3+
4+
class CustomerProductsPage extends ServerBasePage {
5+
templateSelector() {
6+
return "#customer-products";
7+
}
8+
9+
connectedCallback(){
10+
const content = dom.div().create();
11+
this.appendChild(content);
12+
this.get('/customer/products').then(d=>{
13+
this.render(content,d);
14+
});
15+
}
16+
}
17+
window.customElements.define('customer-products-page', CustomerProductsPage);
18+
module.exports=CustomerProductsPage;

‎src/main/server/client/webcomponents/server-base-page.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
require("./../../../app/www/js/utils/queryDOMElements");
2+
const superagent = require("superagent");
3+
const Cookies = require("js-cookie");
4+
const nunjucks = require("nunjucks");
5+
const i18n = require("./../i18n");
6+
7+
class ServerBasePage extends HTMLElement {
8+
9+
templateSelector(){
10+
return undefined;
11+
}
12+
13+
render(target, data){
14+
if(!this.templateSelector()){
15+
return;
16+
}
17+
const template = $(this.templateSelector()).textContent;
18+
target.innerHTML= nunjucks.renderString(template, data);
19+
this.attachI18n(target);
20+
}
21+
22+
attachI18n(target){
23+
const attributeFilter = attr=>attr.name.indexOf('i18n-')==0;
24+
const withI18n=$$('*',target).filter(n=> Array.from(n.attributes).filter(attributeFilter).length>0);
25+
withI18n.forEach(nodeWithI18n=>{
26+
Array.from(nodeWithI18n.attributes).filter(attributeFilter).forEach(i18nAttribute=>{
27+
const command = i18nAttribute.name.split('-')[1];
28+
const languageKey = navigator.language !='de' ? 'en' : navigator.language;
29+
const value = i18n.parse(languageKey, i18nAttribute.value);
30+
if(command==='value'){
31+
nodeWithI18n.innerText = value;
32+
}
33+
if(command==='title'){
34+
nodeWithI18n.title = value;
35+
}
36+
})
37+
})
38+
}
39+
40+
async get(url) {
41+
try {
42+
const rsp = await superagent.get(url);
43+
return rsp.body;
44+
} catch (err) {
45+
Cookies.remove('token');
46+
location.reload();
47+
}
48+
}
49+
}
50+
module.exports=ServerBasePage;

‎src/main/server/database.sqlite

0 Bytes
Binary file not shown.

‎src/main/server/routes/business/getCustomerProducts.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const storage = require("./../../db/storage");
2+
module.exports = async (req,res)=>{
3+
const products=await storage.Produkt.findAll({where:{customerId:req.customer}});
4+
res.send({products:products.map(p=>p.dataValues)});
5+
}

‎src/main/server/routes/business/postCustomerData.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const storage = require("./../../db/storage");
2+
module.exports = async (req,res)=>{
3+
await storage.Kunde.update( req.body, {where:{id:req.customer}});
4+
res.sendStatus(200);
5+
}

‎src/main/server/server.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ startServer = async (givenPort) => {
4444
res.sendFile(path.resolve(__dirname,'dist/index.html'))
4545
})
4646

47-
app.post('/page/:page', checkCookie, bodyParser.json(),(req,res)=>{
48-
49-
})
5047
app.post("/login",checkCookie, bodyParser.json(), login);
5148
app.get("/customer/data", checkCookie, require("./routes/business/customerData"));
49+
app.post("/customer/data", checkCookie, bodyParser.urlencoded({extended:false}),require("./routes/business/postCustomerData"));
50+
app.get("/customer/products", checkCookie, require("./routes/business/getCustomerProducts"));
51+
5252
// REST routen (Daten speichern und abfragen für die App)
5353
app.get("/search/:query", require("./routes/queryProducts"));
5454
app.get('/kategorien', require("./routes/getKategorien"));

‎src/main/server/templates/pages/customer-app.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="sidebar">
2+
<button i18n-value="sidebar.overview.value" target-component="customer-overview-page"></button>
3+
<button i18n-value="sidebar.settings.value" target-component="customer-data-page"></button>
4+
<button i18n-value="sidebar.products.value" target-component="customer-products-page"></button>
5+
</div>
6+
<div class="content">
7+
8+
</div>

‎src/main/server/templates/pages/customer-data.html

+29-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,33 @@
1-
<form>
2-
<label for="ansprechpartner">Ansprechpartner</label>
1+
<form action="/customer/data" enctype="application/x-www-form-urlencoded" method="post">
2+
<label for="name" i18n-value="customerData.name.value">Herbert</label>
3+
<input type="text" name="name" id="name" value="{{name}}"/>
4+
<label for="ansprechpartner" i18n-value="customerData.ansprechpartner">Herbert</label>
35
<input type="text" name="ansprechpartner" id="ansprechpartner" value="{{ansprechpartner}}"/>
4-
<label for="adresse">Adresse</label>
5-
<textarea name="adresse" id="adresse">
6+
<label for="adresse" i18n-value="customerData.adresse.value">Adresse</label>
7+
<textarea name="adresse" id="adresse" i18n-title="customerData.adresse.title">
68
{{adresse}}
79
</textarea>
10+
<img src="{{logo}}"/>
11+
<label for="telefon" i18n-value="customerData.telefon.value">Herbert</label>
12+
<input type="text" name="telefon" id="telefon" value="{{telefon}}"/>
13+
<label for="mail" i18n-value="customerData.mail.value">Herbert</label>
14+
<input type="email" name="mail" id="mail" value="{{mail}}"/>
15+
<div class="zeiten">
16+
<h3 i18n-value="customerData.oeffnungszeiten.value"></h3>
17+
<label for="zeitenBeginn" i18n-value="customerData.beginn.value">Herbert</label>
18+
<input type="time" name="oeffnungszeitBeginn" id="zeitenBeginn" value="{{oeffnungszeitBeginn}}"/>
19+
<label for="zeitenEnde" i18n-value="customerData.ende.value">Herbert</label>
20+
<input type="time" name="oeffnungszeitEnde" id="zeitenEnde" value="{{oeffnungszeitEnde}}"/>
21+
</div>
22+
<label for="homepage" i18n-value="customerData.homepage.value">Herbert</label>
23+
<input type="text" name="homepage" id="homepage" value="{{homepage}}"/>
24+
<label for="beschreibung" i18n-value="customerData.adresse.value">Adresse</label>
25+
<textarea name="beschreibung" id="beschreibung" i18n-title="customerData.beschreibung.title">
26+
{{beschreibung}}
27+
</textarea>
28+
<label for="reservierbar" i18n-value="customerData.reservierbar.value">Adresse</label>
29+
<input type="checkbox" name="reservierbar" id="reservierbar" checked="{{reservierbar}}"/>
30+
<label for="chat" i18n-value="customerData.chat.value">Adresse</label>
31+
<input type="checkbox" name="chat" id="chat" checked="{{chat}}"/>
32+
<input type="submit" value="Absenden">
833
</form>

‎src/main/server/templates/pages/customer-overview.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<h1>Übersicht du Spacken</h1>

‎src/main/server/templates/pages/customer-products.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<h1>Hier wohl irgendwann Produkte</h1>
2+
<ul>
3+
{% for product in products %}
4+
<li>
5+
<p>
6+
{{product.beschreibung}}
7+
<img src="{{product.logo}}"/>
8+
</p>
9+
</li>
10+
{% endfor %}
11+
</ul>

0 commit comments

Comments
 (0)