Add basic functionality

- 5 alarms, wake up, sleep, volume

.gitignore

@@ -44,3 +44,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+pi-clock-linux-*
+pi-clock-win32-*

.prettierrc.yaml

@@ -0,0 +1,5 @@
+trailingComma: 'es5'
+tabWidth: 2
+semi: true
+singleQuote: true
+printWidth: 120

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:4200",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "[typescript]": {
+    "editor.codeActionsOnSave": {
+      // "source.organizeImports": true
+    }
+  },
+  "html.format.wrapAttributes": "force-aligned",
+  "[html]": {
+    "editor.insertSpaces": true,
+    "editor.tabSize": 2
+  },
+  "files.exclude": {
+    "dist": true
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,12 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558 
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "pack-raspi",
+      "problemMatcher": []
+    }
+  ]
+}

README.md

@@ -1,27 +1,42 @@
 # PiClock
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.21.
+A Raspberry Pi touchscreen alarm clock based on mopidy music server. 
 
-## Development server
+The project is strongly  inspred by the project https://github.com/ct-Open-Source/ct-Raspi-Radiowecker, which was published in the c't 18/2019 (germany's  leading it magazin).
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+## Motivation
 
-## Code scaffolding
+I was looking for a easy to use alarm clock with multiple alarm times to configure and different media sources. I was a little bit disappointed about commercial alarm clocks. Most of them haven't multiple alarm times or it's too complicated to configure them. Therefore I decided to build an own alarm clock by using a raspberry pi and a touch display. Because I didn't want a new time consuming project, I started with the Kodi media center and some plugins. It was ok. Then I read about the ct-Raspi-Radiowecker project which has a very nice approach: Using the mopidy music server and a simple user interface on to of it. A limitation of the project is that it is not possible to use the Mopidy UI as well. Therefore I decided to start my own project where it is possible to integrate the Mopidy UI.
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## Technical 
 
-## Build
+The alarm clock runs on a raspberry pi with the original 7'' touch screen. I use a HiFiBerry-DAC and a single speaker to make the sound. The raspberry runs on the Raspin Buster Lite distribution with a installed mopidy server. The Alaram CLock application itself is a Electronjs Application with User interface written in Typescript and Angular. Okay, the use of the angulator might be a little overkill, but I'm familier with it and could build the alarm clock UI on a rainy day...
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+## Features
 
-## Running unit tests
+* FFive individually configurable alarms
+* Sleep timer
+* The full mopidy music server functionality is accessible via a UI
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-## Running end-to-end tests
+# Installation
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 
-## Further help
+```
+wget -q -O - https://apt.mopidy.com/mopidy.gpg | sudo apt-key add -
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+sudo wget -q -O /etc/apt/sources.list.d/mopidy.list https://apt.mopidy.com/buster.list
+
+sudo apt update && sudo apt upgrade
+
+sudo apt install --no-install-recommends xserver-xorg xinit xterm xserver-xorg-input-evdev xserver-xorg-video-fbturbo lightdm gstreamer1.0-alsa python3-pip python3-pygame python3-venv python3-wheel python-pip python-setuptools python-wheel python-alsaaudio mopidy mopidy-tunein mopidy-podcast-itunes 
+
+sudo pip install Mopidy-Iris Mopidy-ALSAMixer 
+sudo apt install x11-xserver-utils
+```
+
+```
+~/.xsessionrc
+
+xterm -e ~/pi-clock/run.sh
+```

angular.json

@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -93,6 +94,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -124,6 +126,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "pi-clock"
 }

index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="h-100">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Hello World!</title>
+    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+
+    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
+  </head>
+  <body class="h-100">
+    <div class="h-100 d-flex flex-column">
+      <div class="" style="height: 100px;">Toolbar</div>
+      <div class="flex-grow-1" style="background-color: aqua;"></div>
+      <div class="" style="background-color: royalblue;">
+        We are using node
+        <script>
+          document.write(process.versions.node);
+        </script>
+        , Chrome
+        <script>
+          document.write(process.versions.chrome);
+        </script>
+        , and Electron
+        <script>
+          document.write(process.versions.electron);
+        </script>
+        .
+      </div>
+    </div>
+  </body>
+</html>

main.js

@@ -0,0 +1,77 @@
+const { app, BrowserWindow, ipcMain } = require('electron');
+const url = require('url');
+const path = require('path');
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow;
+
+function createWindow() {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    fullscreen: false,
+    frame: false,
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(
+    url.format({
+      pathname: path.join(__dirname, `/dist/pi-clock/index.html`),
+      protocol: 'file:',
+      slashes: true,
+    })
+  );
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools();
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', () => {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null;
+  });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow();
+  }
+});
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.
+function openModal() {
+  const { BrowserWindow } = require('electron');
+  let modal = new BrowserWindow({ parent: mainWindow, modal: true, show: false });
+  modal.loadURL('https://www.sitepoint.com');
+  modal.once('ready-to-show', () => {
+    modal.show();
+  });
+}
+
+ipcMain.on('openModal', (event, arg) => {
+  openModal();
+});