ctp init app

.gitattributes

@@ -0,0 +1,8 @@
+app/res/img/** filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.avif filter=lfs diff=lfs merge=lfs -text
+*.tiff filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+public/res/font/** filter=lfs diff=lfs merge=lfs -text

.github/workflows/CI.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on: pull_request
+
+jobs:
+
+  CI: 
+    name: CI
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps: 
+    - name: "Checkout"
+      uses: actions/checkout@master
+    - name: "Setup node"
+      uses: actions/setup-node@master
+      with:
+        node-version: '16.x'
+
+    - name: Installing runner dependencies
+      run: npm i
+
+    - name: "Building"
+      run: npm run build --if-present
+
+    - name: "Testing"
+      run: npm test --if-present

.gitignore

@@ -0,0 +1,21 @@
+node_modules
+test.js
+dist/
+.DS_Store
+.idea*
+.deploy
+
+package-lock.json
+pnpm-lock.yaml
+
+public/sw.js
+public/sw.*.js
+
+ecosystem.config.js
+.ecosystemCache
+pm2Reload.js
+
+
+deploy.zip
+debug.log
+pugBody.gen.ts

README.md

@@ -0,0 +1,67 @@
+# Lb anmeldung
+
+Notifies when website changes.
+
+## Contribute
+
+The frontend / client is referred as app. The backend as server.
+
+### Development env
+
+#### Develop app
+
+The source of the app can be found in `/app` and the serviceWorker's in `/serviceWorker`.
+
+```
+ $ npm run devApp
+```
+
+Builds the app on save & spins up a live (notifies client to reload on change) repl server, whose source can be found in `/replServer/src`.
+
+#### Develop server
+
+Source found in `/server/src`.
+
+```
+ $ npm run devServer
+```
+
+Builds the server & replApp on save. The source of the replApp can be found under `/replApp`. No live reloading available, since its the prod server.
+
+#### Develop server & app
+
+```
+ $ npm run dev
+```
+
+Watches production server & app and builds them on save. No live reloading avalible, since its the prod server.
+
+### Deploy
+
+#### Build scripts
+
+Build everything for production
+
+```
+ $ npm run build
+```
+
+#### Start
+
+Start the server with default options
+
+```
+ $ npm start
+```
+
+Since this is a [npm-run-script](https://docs.npmjs.com/cli/run-script), cli options must be escaped in order to distinguish them from npm options. Simply prefix all options with **one** `--` like so: 
+
+```
+ $ npm start --  --port 1234 --outageReciliance strong
+```
+
+##### CLI options
+
+Here is a list of all recognised cli options:
+
+> TODO

app/_component/_icon/icon.css

@@ -0,0 +1,19 @@
+/* There is a bug in chrome which staggers transitions if declared in differnet shadowrrots on tspan... 04/06/2020 */
+
+:host {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  --color: #000;
+}
+
+
+svg {
+  width: inherit;
+  height: inherit;
+  display: block;
+}
+
+:host svg *:not(tspan) {
+  transition: inherit
+}

app/_component/_icon/icon.ts

@@ -0,0 +1,11 @@
+import Component from "../component"
+
+
+export default abstract class Icon extends Component<false> {
+  constructor() {
+    super(false)
+  }
+  stl() {
+    return require("./icon.css").toString()
+  }
+}

app/_component/_indicator/indecator.css

@@ -0,0 +1,13 @@
+:host {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+component-body {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}

app/_component/_indicator/indecator.ts

@@ -0,0 +1,18 @@
+import Component from "../component";
+
+
+export default abstract class Indecator extends Component {
+  constructor(protected indicator: HTMLElement) {
+    super()
+    this.apd(indicator)
+  }
+  protected async indicate() {
+    this.indicator.anim({opacity: 1})
+  }
+  protected async removeIndecation() {
+    this.indicator.anim({opacity: 0})
+  }
+  stl() {
+    return super.stl() + require('./indecator.css').toString();
+  }
+}

app/_component/_indicator/loadingIndicator/loadingIndicator.css

@@ -0,0 +1,12 @@
+loading-element {
+  width: 30px;
+  height: 30px;
+  display: block;
+  border-radius: 50%;
+  border: 4px solid #b6b6b6;
+  border-top-color: transparent;
+}
+
+:host {
+  cursor: wait;
+}

app/_component/_indicator/loadingIndicator/loadingIndicator.ts

@@ -0,0 +1,37 @@
+import Indecator from "../indecator";
+import { declareComponent } from "../../../lib/declareComponent"
+
+export default declareComponent("loading-indecator", class LoadingIndicator extends Indecator {
+  constructor(start: boolean = true, public dimension?: {width: number, height: number}) {
+    super(ce("loading-element"));
+    if (start) this.start();
+  }
+  public start() {
+    if (this.dimension !== undefined) {
+      this.indicator.css(this.dimension);
+      this.indicator.css({width: 123, height: 32})
+      /*                                                                         (7.5 * 2) */
+      this.indicator.css("borderWidth", (this.dimension.width + this.dimension.height) / (15));
+    }
+    this.indicate()
+  }
+  connectedCallback() {
+    setTimeout(() => {
+      this.indicator.anim([
+        {rotateZ: 0, offset: 0},
+        {rotateZ: 360, offset: 1}
+      ],
+      {iterations: Infinity, duration: 1000, easing: "linear"})
+    })
+  }
+  public async stop() {
+    this.removeIndecation()
+  }
+
+  stl() {
+    return super.stl() + require('./loadingIndicator.css').toString();
+  }
+  pug() {
+    return ""
+  }
+})

app/_component/_themeAble/_focusAble/_button/button.css

@@ -0,0 +1,46 @@
+:host {
+  --text: var(--primary-text);
+  --drag: auto;
+}
+
+:host {
+  position: relative;
+  color: rgb(var(--text));
+  text-align: left;
+  user-select: none;
+  font-weight: bold;
+  display: block;
+  background-color: transparent;
+}
+
+:host(:not(.disabled)) {
+  cursor: pointer;
+}
+
+a {
+  width: inherit;
+  max-width: inherit;
+  height: 100%;
+  text-align: inherit;
+  color: inherit;
+  display: block;
+  font-family: inherit;
+  transition: .3s color;
+
+  text-decoration: none;
+  border-radius: inherit;
+
+  -webkit-user-drag: var(--drag);
+  user-drag: var(--drag);
+
+  min-height: min-content;
+  min-width: max-content;
+  width: 100%;
+  height: 100%;
+}
+
+slot {
+  border-radius: inherit;
+  width: inherit;
+  max-width: inherit;
+}