Ainias/prayercircle
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial thingies

Browse Source
This commit is contained in:
silas 2021-03-03 12:38:30 +01:00
commit c4ef800f82
12 changed files with 9639 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8694
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

43
package.json Normal file
View File

@ -0,0 +1,43 @@
{
"name": "prayercircle",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "webpack --config webpack.config.js",
"start": "ts-node src/server/index.ts",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/plugin-transform-runtime": "^7.11.5",
"@babel/polyfill": "^7.11.5",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.1.1",
"css-loader": "^4.3.0",
"extract-loader": "^5.1.0",
"file-loader": "^6.1.0",
"html-loader": "^1.3.1",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^0.11.2",
"node-sass": "^5.0.0",
"postcss-loader": "^4.0.4",
"sass-loader": "^10.1.0",
"terser-webpack-plugin": "^4.2.2",
"ts-loader": "^8.0.4",
"typescript": "^4.0.2",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"dotenv": "^8.2.0",
"ts-node": "^9.1.1",
"js-helper": "git+https://github.com/Ainias/js-helper.git#0.6.3"
},
"dependencies": {
"express": "^4.17.1"
}
}

BIN
src/client/img/doge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB

196
src/client/img/trashcan.svg Normal file
View File

@ -0,0 +1,196 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="1.70667in" height="1.70667in"
viewBox="0 0 512 512">
<path id="Auswahl"
stroke="black" stroke-width="1"
d="M 3.00,32.00
C 11.60,32.19 14.07,27.79 22.00,24.60
22.00,24.60 38.00,19.25 38.00,19.25
38.00,19.25 49.00,16.91 49.00,16.91
49.00,16.91 57.00,14.46 57.00,14.46
57.00,14.46 73.00,11.96 73.00,11.96
73.00,11.96 85.00,9.42 85.00,9.42
85.00,9.42 109.00,6.88 109.00,6.88
109.00,6.88 117.00,5.12 117.00,5.12
117.00,5.12 160.00,2.00 160.00,2.00
160.00,2.00 180.00,0.00 180.00,0.00
180.00,0.00 336.00,0.00 336.00,0.00
343.97,0.12 340.87,1.94 350.00,2.00
350.00,2.00 354.00,2.00 354.00,2.00
354.00,2.00 397.83,5.24 397.83,5.24
397.83,5.24 404.04,6.87 404.04,6.87
404.04,6.87 432.00,10.04 432.00,10.04
432.00,10.04 439.00,11.78 439.00,11.78
439.00,11.78 457.91,14.95 457.91,14.95
457.91,14.95 465.04,17.16 465.04,17.16
465.04,17.16 489.91,24.45 489.91,24.45
496.64,26.85 501.95,32.54 509.00,34.00
509.00,34.00 504.17,82.00 504.17,82.00
504.17,82.00 496.17,159.00 496.17,159.00
496.17,159.00 472.83,386.00 472.83,386.00
472.83,386.00 464.83,463.00 464.83,463.00
464.83,463.00 462.00,489.00 462.00,489.00
462.00,489.00 439.00,496.69 439.00,496.69
412.57,501.93 370.65,507.69 344.00,508.00
344.00,508.00 329.00,509.00 329.00,509.00
329.00,509.00 290.00,510.00 290.00,510.00
290.00,510.00 273.00,511.00 273.00,511.00
273.00,511.00 210.00,511.00 210.00,511.00
210.00,511.00 193.00,510.00 193.00,510.00
193.00,510.00 172.00,510.00 172.00,510.00
172.00,510.00 136.00,508.00 136.00,508.00
136.00,508.00 110.00,505.00 110.00,505.00
110.00,505.00 101.00,505.00 101.00,505.00
101.00,505.00 69.00,499.29 69.00,499.29
63.23,497.71 52.49,496.02 48.57,491.32
46.64,489.00 46.97,484.98 46.58,482.00
46.58,482.00 43.98,456.00 43.98,456.00
43.98,456.00 40.17,418.00 40.17,418.00
40.17,418.00 35.83,372.00 35.83,372.00
35.83,372.00 13.83,148.00 13.83,148.00
13.83,148.00 6.83,77.00 6.83,77.00
6.83,77.00 3.00,32.00 3.00,32.00 Z
M 113.00,78.00
C 113.00,78.00 81.00,74.38 81.00,74.38
81.00,74.38 72.00,72.12 72.00,72.12
72.00,72.12 50.00,68.30 50.00,68.30
50.00,68.30 29.00,62.19 29.00,62.19
29.00,62.19 18.00,58.00 18.00,58.00
18.00,58.00 19.83,76.00 19.83,76.00
19.83,76.00 24.83,130.00 24.83,130.00
24.83,130.00 40.83,302.00 40.83,302.00
40.83,302.00 51.83,421.00 51.83,421.00
51.83,421.00 57.00,475.00 57.00,475.00
57.00,475.00 66.00,478.69 66.00,478.69
66.00,478.69 73.00,479.46 73.00,479.46
73.00,479.46 82.00,481.54 82.00,481.54
82.00,481.54 95.00,483.43 95.00,483.43
101.43,484.52 103.05,485.91 110.00,486.00
123.92,486.17 117.37,487.13 124.09,488.71
124.09,488.71 136.00,490.00 136.00,490.00
136.00,490.00 135.00,474.00 135.00,474.00
135.00,474.00 134.00,451.00 134.00,451.00
134.00,451.00 133.00,437.00 133.00,437.00
133.00,437.00 131.00,396.00 131.00,396.00
131.00,396.00 130.00,382.00 130.00,382.00
130.00,382.00 128.00,342.00 128.00,342.00
128.00,342.00 127.04,332.00 127.04,332.00
127.04,332.00 127.04,324.00 127.04,324.00
127.04,324.00 126.00,305.00 126.00,305.00
126.00,305.00 125.04,295.00 125.04,295.00
125.04,295.00 125.04,287.00 125.04,287.00
125.04,287.00 124.00,269.00 124.00,269.00
124.00,269.00 123.00,255.00 123.00,255.00
123.00,255.00 122.00,233.00 122.00,233.00
122.00,233.00 121.00,218.00 121.00,218.00
121.00,218.00 120.00,201.00 120.00,201.00
120.00,201.00 119.00,179.00 119.00,179.00
119.00,179.00 118.00,164.00 118.00,164.00
118.00,164.00 116.00,123.00 116.00,123.00
116.00,123.00 115.00,110.00 115.00,110.00
115.00,110.00 113.00,78.00 113.00,78.00 Z
M 493.00,58.00
C 493.00,58.00 481.00,61.80 481.00,61.80
481.00,61.80 473.00,64.83 473.00,64.83
473.00,64.83 459.00,67.84 459.00,67.84
459.00,67.84 450.00,70.54 450.00,70.54
450.00,70.54 432.00,73.27 432.00,73.27
432.00,73.27 413.00,76.72 413.00,76.72
413.00,76.72 404.74,78.74 404.74,78.74
404.74,78.74 403.00,88.00 403.00,88.00
403.00,88.00 402.00,99.00 402.00,99.00
402.00,99.00 402.00,108.00 402.00,108.00
402.00,108.00 396.91,187.00 396.91,187.00
396.91,187.00 390.91,281.00 390.91,281.00
390.91,281.00 389.09,294.00 389.09,294.00
389.09,294.00 384.00,372.00 384.00,372.00
384.00,372.00 384.00,381.00 384.00,381.00
384.00,381.00 380.09,436.00 380.09,436.00
380.09,436.00 376.00,487.00 376.00,487.00
376.00,487.00 385.00,486.00 385.00,486.00
385.00,486.00 381.00,484.00 381.00,484.00
391.63,484.48 402.51,484.61 413.00,482.34
413.00,482.34 426.00,479.01 426.00,479.01
437.40,476.56 438.80,477.78 451.00,473.00
451.00,473.00 457.83,405.00 457.83,405.00
457.83,405.00 465.17,328.00 465.17,328.00
465.17,328.00 468.83,301.00 468.83,301.00
468.83,301.00 480.17,184.00 480.17,184.00
480.17,184.00 487.18,114.00 487.18,114.00
487.18,114.00 488.82,106.00 488.82,106.00
488.82,106.00 493.00,58.00 493.00,58.00 Z
M 382.00,80.00
C 382.00,80.00 345.00,83.00 345.00,83.00
345.00,83.00 332.00,84.04 332.00,84.04
332.00,84.04 317.00,84.04 317.00,84.04
317.00,84.04 305.00,85.00 305.00,85.00
305.00,85.00 268.00,85.00 268.00,85.00
268.00,85.00 268.00,111.00 268.00,111.00
268.00,111.00 267.00,128.00 267.00,128.00
267.00,128.00 267.00,243.00 267.00,243.00
267.00,243.00 266.00,258.00 266.00,258.00
266.00,258.00 266.00,372.00 266.00,372.00
266.00,372.00 265.00,387.00 265.00,387.00
265.00,387.00 265.00,493.00 265.00,493.00
265.00,493.00 304.00,492.00 304.00,492.00
304.00,492.00 321.00,491.00 321.00,491.00
321.00,491.00 342.00,490.09 342.00,490.09
342.00,490.09 359.00,489.00 359.00,489.00
359.00,489.00 361.00,448.00 361.00,448.00
361.00,448.00 362.00,433.00 362.00,433.00
362.00,433.00 363.00,415.00 363.00,415.00
363.00,415.00 364.00,396.00 364.00,396.00
364.00,396.00 365.00,375.00 365.00,375.00
365.00,375.00 366.00,359.00 366.00,359.00
366.00,359.00 367.00,335.00 367.00,335.00
367.00,335.00 368.08,322.00 368.08,322.00
368.08,322.00 368.08,313.00 368.08,313.00
368.08,313.00 370.00,301.00 370.00,301.00
370.00,301.00 370.00,292.00 370.00,292.00
370.00,292.00 371.00,278.00 371.00,278.00
371.00,278.00 372.00,258.00 372.00,258.00
372.00,258.00 373.00,244.00 373.00,244.00
373.00,244.00 375.00,202.00 375.00,202.00
375.00,202.00 375.96,192.00 375.96,192.00
375.96,192.00 375.96,184.00 375.96,184.00
375.96,184.00 377.00,165.00 377.00,165.00
377.00,165.00 378.00,147.00 378.00,147.00
378.00,147.00 379.00,131.00 379.00,131.00
379.00,131.00 380.00,115.00 380.00,115.00
380.00,115.00 381.00,93.00 381.00,93.00
381.00,93.00 382.00,80.00 382.00,80.00 Z
M 247.00,85.00
C 247.00,85.00 208.00,85.00 208.00,85.00
208.00,85.00 196.00,84.04 196.00,84.04
196.00,84.04 183.00,84.04 183.00,84.04
183.00,84.04 167.00,83.00 167.00,83.00
167.00,83.00 134.00,81.00 134.00,81.00
134.00,81.00 135.00,93.00 135.00,93.00
135.00,93.00 136.00,121.00 136.00,121.00
136.00,121.00 137.00,138.00 137.00,138.00
137.00,138.00 138.00,165.00 138.00,165.00
138.00,165.00 139.04,179.00 139.04,179.00
139.04,179.00 139.04,190.00 139.04,190.00
139.04,190.00 140.00,202.00 140.00,202.00
140.00,202.00 141.00,223.00 141.00,223.00
141.00,223.00 142.00,252.00 142.00,252.00
142.00,252.00 143.00,267.00 143.00,267.00
143.00,267.00 144.00,287.00 144.00,287.00
144.00,287.00 145.00,316.00 145.00,316.00
145.00,316.00 146.00,331.00 146.00,331.00
146.00,331.00 148.00,380.00 148.00,380.00
148.00,380.00 149.00,394.00 149.00,394.00
149.00,394.00 150.00,422.00 150.00,422.00
150.00,422.00 151.00,439.00 151.00,439.00
151.00,439.00 152.00,459.00 152.00,459.00
152.00,459.00 153.00,491.00 153.00,491.00
153.00,491.00 173.00,492.00 173.00,492.00
173.00,492.00 195.00,492.00 195.00,492.00
195.00,492.00 211.00,493.00 211.00,493.00
211.00,493.00 247.00,493.00 247.00,493.00
247.00,493.00 247.00,85.00 247.00,85.00 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

74
src/client/index.html Normal file
View File

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Prayercircle</title>
</head>
<body class="starting-page">
<div class="container">
<header class="header">
<div class="logo-container">
<!-- <img src="img/doge.png" alt="doge logo" class="logo-img"/>-->
<h1 class="logo-text">
<span class="logo-highlight">Prayer</span>Circle
</h1>
</div>
</header>
<section id="list-section">
<button id="add-button">+</button>
<div id="list-container">
<div id="input-template"><input class="name" placeholder="Name">
<button class="delete-button"></button>
</div>
</div>
</section>
<section id="table-section">
<div id = "week-selection">
<button id = "previous-week"><</button>
<span id = "week-input"></span>
<button id = "next-week">></button>
</div>
<div id="table-container">
<table id="table-template" class="prayer-table">
<thead>
<tr>
<th class="name"></th>
<th>Mo</th>
<th>Di</th>
<th>Mi</th>
<th>Do</th>
<th>Fr</th>
<th>Sa</th>
<th>So</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ich bete für:</td>
<td class="for-0"></td>
<td class="for-1"></td>
<td class="for-2"></td>
<td class="for-3"></td>
<td class="for-4"></td>
<td class="for-5"></td>
<td class="for-6"></td>
</tr>
<tr>
<td>Für mich betet:</td>
<td class="by-0"></td>
<td class="by-1"></td>
<td class="by-2"></td>
<td class="by-3"></td>
<td class="by-4"></td>
<td class="by-5"></td>
<td class="by-6"></td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</body>
</html>

138
src/client/js/CircleManager.js Normal file
View File

@ -0,0 +1,138 @@
import {ViewHelper} from "js-helper/dist/client/ViewHelper";
import {Helper} from "js-helper/dist/shared/Helper";
export class CircleManager {
constructor(listSection, tableSection) {
this._members = [];
this._week = 0;
this._inputTemplate = listSection.querySelector("#input-template");
this._inputTemplate.remove();
this._inputTemplate.removeAttribute("id");
this._listContainer = listSection.querySelector("#list-container");
listSection.querySelector("#add-button").addEventListener("click", () => this.addMember());
this._tableTemplate = tableSection.querySelector("#table-template");
this._tableTemplate.remove();
this._tableTemplate.removeAttribute("id");
this._tableContainer = tableSection.querySelector("#table-container");
this._weekInput = tableSection.querySelector("#week-input");
tableSection.querySelector("#next-week").addEventListener("click", () => this.setWeek(this._week + 1));
tableSection.querySelector("#previous-week").addEventListener("click", () => this.setWeek(this._week - 1));
this.load();
this.setWeek(this._week);
}
setWeek(newWeek) {
newWeek = parseInt(newWeek);
if (!isNaN(newWeek)) {
newWeek = Math.max(newWeek, 0);
this._week = newWeek;
this._weekInput.innerText = (this._week + 1);
this.updateTables();
this.save();
}
}
save(){
console.log("saving...");
localStorage.setItem("list", JSON.stringify({"week": this._week, "members": this._members}));
}
load(){
const jsonSavedata = localStorage.getItem("list");
console.log("liste", jsonSavedata);
if (jsonSavedata){
const data = JSON.parse(jsonSavedata);
this._week = data.week;
this._members = data.members;
this.updateList();
this.updateTables();
}
}
updateList() {
ViewHelper.removeAllChildren(this._listContainer);
this._members.forEach((member, id) => {
const memberElement = this._inputTemplate.cloneNode(true);
memberElement.querySelector(".delete-button").addEventListener("click", () => this.deleteMember(id))
const inputElem =
memberElement.querySelector(".name");
inputElem.value = member;
inputElem.addEventListener("input", () => {
this._members[id] = inputElem.value;
this.updateTables();
this.save();
});
this._listContainer.appendChild(memberElement);
})
}
deleteMember(index) {
if (index >= 0 && index < this._members.length) {
this._members.splice(index, 1);
this.updateList();
this.updateTables();
this.save();
}
}
addMember(name) {
name = Helper.nonNull(name, "");
this._members.push(name);
this.updateList();
this.updateTables();
this.save();
}
updateTables() {
if (this._members.length < 2) {
return;
}
const tables = {};
this._members.forEach((member, index) => {
const listPrayers = [];
const listPrayedBy = [];
const otherMembers = this._members.filter((v, i) => i !== index);
let prayersIndex = index - 1;
let prayedIndex = index;
const weekOffset = this._week * 7;
prayersIndex += weekOffset;
prayedIndex -= weekOffset;
if (prayedIndex < 0) {
prayedIndex += otherMembers.length * Math.floor(weekOffset / otherMembers.length);
}
for (let i = 0; i < 7; i++) {
prayersIndex = (prayersIndex + 1) % otherMembers.length
prayedIndex = (prayedIndex - 1 + otherMembers.length) % otherMembers.length;
listPrayers.push(otherMembers[prayersIndex]);
listPrayedBy.push(otherMembers[prayedIndex]);
}
tables[index] = {"for": listPrayers, "by": listPrayedBy}
});
ViewHelper.removeAllChildren(this._tableContainer);
Object.keys(tables).forEach(memberIndex => {
const tableElement = this._tableTemplate.cloneNode(true);
tableElement.querySelector(".name").innerText = this._members[memberIndex];
tables[memberIndex].for.forEach((otherMember, index) => {
tableElement.querySelector(".for-" + index).innerText = otherMember;
});
tables[memberIndex].by.forEach((otherMember, index) => {
tableElement.querySelector(".by-" + index).innerText = otherMember;
});
this._tableContainer.appendChild(tableElement);
});
}
}

7
src/client/js/index.js Normal file
View File

@ -0,0 +1,7 @@
import "../sass/index.scss"
import {CircleManager} from "./CircleManager";
const listSegment = document.getElementById("list-section");
const tableSegment = document.getElementById("table-section");
new CircleManager(listSegment, tableSegment);

119
src/client/sass/index.scss Normal file
View File

@ -0,0 +1,119 @@
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f9fafc;
color: #595354;
}
#video-section {
position: relative;
.site-control {
font-size: 3rem;
padding: 0.2rem;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
&.previous {
left: 0;
}
&.next {
right: 0;
}
}
}
.header {
background-color: #ffffff;
padding: 10px 40px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
}
.header > .logo-container {
display: flex;
align-items: center;
}
.header > .logo-container > .logo-img {
width: 60px;
height: 60px;
margin-right: 15px;
}
.header > .logo-container > .logo-text {
font-size: 26px;
font-weight: 700;
}
.header > .logo-container > .logo-text > .logo-highlight {
color: #65a9e5;
}
#list-section{
margin: 1rem;
}
button {
background: white;
padding: 0 0.3rem;
font-size: 1.5rem;
border: solid 1px black;
&.delete-button {
background: url("../img/trashcan.svg");
background-size: contain;
width: 1.5rem;
height: 1.5rem;
border: 0;
}
}
input {
border: 0;
background: transparent;
outline: none;
font-size: 1.5rem;
&:placeholder-shown, &:focus {
border-bottom: solid 1px black;
}
}
#week-input{
width: 3rem;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
}
#table-section {
margin-top: 2rem;
#week-selection{
margin-left: 1rem;
}
#table-container {
.prayer-table {
max-width: calc(100% - 2rem);
margin: 1rem;
border: solid 1px #adadad;
border-collapse: collapse;
td, th {
padding: 0.2rem;
width: 12.5%;
border: solid 1px #adadad;
}
th {
text-align: left;
}
}
}
}

40
src/server/Server.ts Normal file
View File

@ -0,0 +1,40 @@
import * as express from "express";
import {createServer, Server as HTTPServer} from "http";
import * as path from "path";
export class Server {
private httpServer: HTTPServer;
private app: express.Application;
private activeSockets: string[] = [];
private readonly DEFAULT_PORT = 5000;
constructor() {
this.initialize();
}
private initialize(): void {
this.app = express();
this.httpServer = createServer(this.app);
this.configureApp();
this.configureRoutes();
}
private configureApp(): void {
this.app.use(express.static(path.join(__dirname, "../../dist")));
}
private configureRoutes(): void {
this.app.get("/", (req, res) => {
res.sendFile("index.html");
});
}
public listen(callback: (port: number) => void): void {
this.httpServer.listen(this.DEFAULT_PORT, () => {
callback(this.DEFAULT_PORT);
});
}
}

99
src/server/TailStream.ts Normal file
View File

@ -0,0 +1,99 @@
import * as stream from "stream";
import * as fs from "fs";
export class TailStream extends stream.Readable {
private filepath: string;
private fd;
private bytesRead: number = 0;
private dataAvailable: boolean;
private watcher;
private renamed: boolean = false;
constructor(filepath: string, opts?) {
super(opts);
this.filepath = filepath;
this.init();
this.initWatcher();
}
private init() {
fs.open(this.filepath, 'r', (err, fd) => {
if (err) {
console.error(err);
} else {
this.fd = fd;
this.dataAvailable = true;
this._read();
}
});
}
_read() {
if (!this.dataAvailable || typeof this.fd !== "number") {
return this.push('');
}
const buffer = Buffer.alloc(16 * 1024);
fs.read(this.fd, buffer, 0, buffer.length, this.bytesRead, (err, bytesRead) => {
if (err) {
console.error(err);
this.end();
return;
}
if (bytesRead === 0) {
if (this.renamed) {
this.end();
}
else {
this.dataAvailable = false;
this.push('');
}
return;
}
if (!this.destroyed) {
this.bytesRead += bytesRead;
this.push(buffer.slice(0, bytesRead));
}
});
}
private initWatcher() {
this.watcher = fs.watch(this.filepath, (event, filename) => {
if (event === "change" && !this.dataAvailable) {
this.dataAvailable = true;
this.read(0);
} else if (event === "rename") {
if (this.filepath.endsWith(".tmp") && false) {
this.dataAvailable = false;
this.filepath = this.filepath.substring(0, this.filepath.length - 4);
this.renamed = true;
this.watcher.close();
if (this.fd) {
fs.close(this.fd, () => {
});
}
this.init();
this.initWatcher();
} else {
this.end();
}
}
})
}
private end() {
this.dataAvailable = false;
if (this.fd) {
fs.close(this.fd, () => {
});
}
this.push(null);
if (this.watcher) {
this.watcher.close();
}
this.destroy();
}
}

8
src/server/index.ts Normal file
View File

@ -0,0 +1,8 @@
import { Server } from "./Server";
// const server = new DashServer();
const server = new Server();
server.listen(port => {
console.log(`Server is listening on http://localhost:${port}`);
});

221
webpack.config.js Executable file
View File

@ -0,0 +1,221 @@
require("dotenv").config();
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const webpack = require('webpack');
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const WorkboxPlugin = require('workbox-webpack-plugin');
let mode = (process.env.MODE || "development");
// let mode = (process.env.MODE || "production");
// let mode = "production";
// function getIp() {
// let ip = null;
// Object.keys(ifaces).some(function (ifname) {
// return ifaces[ifname].some(function (iface) {
// if ('IPv4' !== iface.family || iface.internal !== false) {
// // skip over internal (i.e. 127.0.0.1) and non-ipv4 addresses
// return false;
// }
//
// ip = iface.address;
// return true;
// });
// });
// return ip;
// }
let moduleExports = {
//Development oder production, wird oben durch Variable angegeben (damit später per IF überprüft)
mode: mode,
//Beinhaltet den JS-Startpunkt und SCSS-Startpunkt
entry: [__dirname + "/src/client/js/index.js"],
// devtool: 'inline-source-map',
//Gibt Ausgabename und Ort für JS-File an
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js"
},
resolve: {
extensions: [".ts", ".js", ".mjs", ".json", "png"]
},
optimization: {
// minimize: false
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
mangle: {
reserved: []
}
}
})
]
},
plugins: [
//Delete www before every Build (to only have nessesary files)
new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: ['**/*', '!**/.gitkeep']}),
// new WorkboxPlugin.GenerateSW({
// maximumFileSizeToCacheInBytes: 1024 * 1024 * 1024 * 5
// }),
//Erstellt (kopiert) die Index.html
new HtmlWebpackPlugin({
template: '!!html-loader!src/client/index.html'
}),
new webpack.DefinePlugin({}),
new MiniCssExtractPlugin(),
],
module: {
//Regeln: Wenn Regex zutrifft => führe Loader (in UMGEKEHRTER) Reihenfolge aus
rules: [
{
//Kopiert HTML-Dateien in www. Nur die Dateien, welche im JS angefragt werden
test: /html[\\\/].*\.html$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'html'
}
},
{
loader: 'extract-loader'
},
{
loader: 'html-loader',
options: {
//Sorgt dafür, dass Child-Views funktionieren
attrs: [
":data-view",
":src",
"link:href"
]
}
}
],
},
{
test: /\.tsx?$/,
use: ["ts-loader"],
},
{
//Kopiert nur benutzte Bilder/Videos/Sound (benutzt durch JS (import), html oder css/sass)
test: /(img|video|sound)[\\\/]/,
use: [
{
loader: 'file-loader',
options: {
name: (resourcePath, resourceQuery) => {
// console.log("path", resourcePath);
// console.log("query", resourceQuery);
return "[name].[ext]"
},
outputPath: 'img',
publicPath: (url, resourcePath, context) => {
// console.log("url: ", url);
// console.log("resourcePath: ", resourcePath);
// console.log("context: ", context);
return "/img/" + url;
},
// useRelativePath: false
}
},
],
},
{
//Compiliert SASS zu CSS und speichert es in Datei
test: /\.scss$/,
use: [
// {
// loader: 'file-loader',
// options: {
// name: '[name].css',
// outputPath: 'css',
// // publicPath: '/css'
// }
// },
// {
// loader: 'extract-loader'
// },
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader'
},
{
//Compiliert zu CSS
loader: 'sass-loader'
}
]
}
]
}
};
//Auslagerung von zeitintensiven Sachen in production only, damit Debugging schneller geht
if (mode === "production" && false) {
//Polyfills hinzufügen
moduleExports["entry"].unshift("@babel/polyfill");
// moduleExports["devtool"] = "source-map";
//Transpilieren zu ES5
moduleExports["module"]["rules"].push({
test: /\.m?js$/,
exclude: /node_modules\/(?!(cordova-sites|js-helper|cs-event-manager|polygon-geometry))/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
}
});
moduleExports["module"]["rules"][1]["use"].unshift({
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
inputSourceMap: "inline",
sourceMaps: true
}
});
//Hinzufügen von POSTCSS und Autoprefixer für alte css-Präfixe
moduleExports["module"]["rules"][3]["use"].splice(3, 0, {
//PostCSS ist nicht wichtig, autoprefixer schon. Fügt Präfixes hinzu (Bsp.: -webkit), wo diese benötigt werden
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')()]
}
});
// moduleExports["optimization"] = {
// minimize: false,
// // minimizer: [new UglifyJsPlugin({
// // include: /\.min\.js$/
// // })]
// }
}
module.exports = moduleExports;