Shevett shevett dec02 (#14)

* startup

* formatting changes

* more formatting

* Added 'title' text to free and booked screens

* Some cleanup before merging to master.

* Moar cleanup.

* Removed fork comments.

* Restoring original graphic

* Added documentation on the title option

* cleanup

README.md

@@ -29,14 +29,15 @@ To install the binary:
 - You are asked to enter the calendar ID (the calendar ID can be found on the settings page of your calendar in Google Calendar)
 - Open the link printed in your terminal, login with the same user as before to obtain the OAuth JSON file and authorize the app to access Google's API. You now get a token in the browser. Enter that token in the terminal's prompt.
 - If your Raspberry Pi is not already in portrait mode, append the following to your `/boot/config.txt`: `display_rotate=1 90 degrees`
+- To add a custom title to the screens (e.g. to identify a specific room this display is for), edit `sitincator.json` (created during the calendar ID setup) and modify the `title` entry.
 
 #### Start the Application
 
 Run the following in a terminal:
 
     /home/pi/Sitincator/Sitincator
 
-### Development Setup
+### Development Environment Setup and Startup
 
 It is not recommended to run the following setup on a Raspberry Pi. The installation of the correct node version and the required npm packages is quite a burden for the Raspberry Pi and takes a long time to complete, if successful. The setup has been tested on recent versions of OS X.
 
@@ -46,8 +47,15 @@ Node requirement: `v6`
     cd sitincator
     npm install
 
-- Follow the instructions above (`Installation on the Raspberry Pi -> Configuration`). Before starting the application, start webpack (note that this process is blocking, you could also start it in the background): `npm run watch`
-- During development, start the application by calling `npm start`
+Follow the instructions above (`Installation on the Raspberry Pi -> Configuration`). 
+
+Start webpack (note that this process is blocking, you could also start it in the background): 
+
+    npm run watch
+
+Start the application in development mode (windowed, with debugging information):
+
+    npm start
 
 #### Local Production Environment
 

index.html

@@ -8,6 +8,7 @@
 
   <script>
     var bundlePath = './build/bundle.js';
+    var remote = require('electron').remote;
 
     if(typeof process !== 'undefined' && process.env.NODE_ENV === 'development') {
       bundlePath = 'http://localhost:8080/build/bundle.js';

main.js

@@ -9,6 +9,8 @@ const path = require('path');
 const CONFIG_DIR = path.resolve(__dirname, './config');
 const SITINCATOR_CONFIG = path.resolve(CONFIG_DIR, 'sitincator.json');
 
+global.calendarName = '';
+
 let win;
 
 function createDirectory(directory) {
@@ -23,7 +25,8 @@ function createDirectory(directory) {
 
 function writeConfiguration(calendar_id) {
   return new Promise((resolve, reject) => {
-    let configuration = { calendar_id: calendar_id };
+    let configuration = { calendar_id: calendar_id, title: "" };
+
     fs.writeFile(SITINCATOR_CONFIG, JSON.stringify(configuration), error => {
       if(error)
         reject(error);
@@ -95,10 +98,13 @@ app.on('ready', () => {
   readConfiguration()
     .then(configuration => {
       const gcalApi = new gcal.GCal(configuration.calendar_id);
+
       gcalApi.authorize()
         .then(client => {
           createWindow();
 
+          global.calendarName = configuration.title;
+
           ipcMain.on('calendar:list-events', event => client.listEvents()
             .then(items => event.sender.send('calendar:list-events-success', items))
             .catch(error => event.sender.send('calendar:list-events-failure', error))

src/components/booked.js

@@ -13,6 +13,7 @@ const Booked = ({ currentEvent, onClick}) => {
 
   return (
     <div className='status-details' key={1}>
+      <strong> { remote.getGlobal('calendarName') }</strong>
       <div className="action-buttons single">
         <Button icon="cancel" className="big" handleClick={onClick}/>
       </div>

src/components/check_connection.js

@@ -4,6 +4,7 @@ export default class CheckConnection extends Component {
   render() {
     return (
       <div className="no-connection">
+        <strong>{ remote.getGlobal('calendarName') }</strong>
         <div className="icon"><i className="icon icon-no-connection"></i></div>
         <h3 className="text">Failed to connect to the Google Calendar API</h3>
       </div>

src/components/free.js

@@ -22,6 +22,7 @@ const Free = ({ nextEvent, onClick15, onClick30}) => {
 
   return (
     <div className='status-details' key={1}>
+      <strong> { remote.getGlobal('calendarName') }</strong>
       <h3>Quick Booking</h3>
       <div className="action-buttons multiple">
         <Button

static/sass/modules/status.scss

@@ -47,6 +47,14 @@
       font-size: 30px;
     }
 
+    strong {
+      height: 10px ;
+      margin: 4px 0 28px 0;
+      font-family: 'Mark Pro Book';
+      letter-spacing: 0.5px;
+      font-size: 10;
+    }
+
     .action-buttons {
       display: flex;
       flex-flow: row nowrap;