initial commit

.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+dist

Procfile

@@ -0,0 +1,2 @@
+react: yarn react-start
+electron: yarn electron-start

README.md

@@ -0,0 +1,53 @@
+# Hotelier
+
+Tray App for [Hotel](https://github.com/typicode/hotel) process manager which works on Windows, Mac and Linux.
+
+## Install
+
+Download the [latest release](http://www.github.com/macav/hotelier/releases) and install it.
+
+## About
+
+### Description
+
+The main purpose of the app is allowing easy management of the servers directly from the tray / menu bar, without the need of opening the `Hotel` in the browser, or using the CLI.
+
+The app works currently in a happy path scenario, meaning for example it doesn't handle situation where you don't have `Hotel` installed.
+
+It is created using React & Electron, making it easy to extend. The downside is the app size (~ 150 MB), but that's the price to pay for the maintainability.
+
+### Motivation
+
+I decided to create the app because all other alternatives didn't work properly for me, or where too outdated and not maintained anymore (2018).
+
+### Builds
+
+The builds are available for Mac (`.dmg`), Windows (32 & 64 bit) and Linux (`.deb`).
+
+## Features
+
+Currently, the implemented features are following:
+
+* **See all your servers with status**
+* **Start / stop servers**
+* **Open the server URL by clicking on the server**
+
+In the future, I plan to add at least:
+
+* Handling of different Hotel configurations (different port, etc.)
+* Handling of edge cases (e.g. Hotel not installed)
+* Dark mode
+* Refresh via events without polling
+
+## Contribution
+
+* `git clone [email protected]:macav/hotelier.git`
+* `cd hotelier`
+* `yarn`
+* `yarn start`
+
+PRs are very welcome!
+
+## Licence
+
+**MIT** - Martin Cavoj

package.json

@@ -0,0 +1,66 @@
+{
+  "name": "hotelier",
+  "author": {
+    "name": "Martin Cavoj",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "description": "Tray App for Hotel Process Manager",
+  "version": "0.1.0",
+  "dependencies": {
+    "is-electron": "^2.1.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-scripts": "1.1.4"
+  },
+  "devDependencies": {
+    "electron": "^2.0.0",
+    "electron-builder": "^20.11.1",
+    "foreman": "^2.0.0"
+  },
+  "main": "public/electron.js",
+  "homepage": "./",
+  "proxy": "http://localhost:2000/",
+  "scripts": {
+    "start": "nf start -p 3000",
+    "react-start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "electron": "electron .",
+    "electron-start": "node src/electron-wait-react",
+    "electron:build": "build",
+    "postbuild": "build"
+  },
+  "build": {
+    "appId": "com.macav.hotelier",
+    "productName": "Hotelier",
+    "electronVersion": "2.0.0",
+    "asar": true,
+    "linux": {
+      "target": [
+        {
+          "target": "deb",
+          "arch": [
+            "x64"
+          ]
+        }
+      ]
+    },
+    "win": {
+      "target": [
+        {
+          "target": "nsis",
+          "arch": [
+            "x64",
+            "ia32"
+          ]
+        }
+      ]
+    },
+    "files": [
+      "build/**/*",
+      "icon.*"
+    ]
+  }
+}

public/electron.js

@@ -0,0 +1,86 @@
+const { app, BrowserWindow, ipcMain, Tray } = require('electron')
+const path = require('path')
+const url = require('url');
+
+const assetsDirectory = path.join(__dirname, './assets')
+
+let tray = undefined
+let window = undefined
+
+app.dock.hide()
+
+app.on('ready', () => {
+  createTray()
+  createWindow()
+})
+
+app.on('window-all-closed', () => {
+  app.quit()
+})
+
+const createTray = () => {
+  tray = new Tray(path.join(assetsDirectory, 'hotelTemplate.png'))
+  tray.on('right-click', toggleWindow)
+  tray.on('double-click', toggleWindow)
+  tray.on('click', function (event) {
+    toggleWindow()
+
+    if (window.isVisible() && process.defaultApp && event.metaKey) {
+      window.openDevTools({ mode: 'detach' })
+    }
+  })
+}
+
+const getWindowPosition = () => {
+  const windowBounds = window.getBounds()
+  const trayBounds = tray.getBounds()
+
+  const x = Math.round(trayBounds.x + (trayBounds.width / 2) - (windowBounds.width / 2))
+
+  const y = Math.round(trayBounds.y + trayBounds.height + 4)
+
+  return { x: x, y: y }
+}
+
+const createWindow = () => {
+  window = new BrowserWindow({
+    width: 300,
+    height: 450,
+    show: false,
+    frame: false,
+    fullscreenable: false,
+    resizable: false,
+    transparent: true,
+    webPreferences: {
+      backgroundThrottling: false,
+      preload: path.join(__dirname, 'preload.js'),
+    }
+  })
+  const startUrl = process.env.ELECTRON_START_URL || url.format({
+    pathname: path.join(__dirname, './index.html'),
+    protocol: 'file:',
+    slashes: true
+  });
+  window.loadURL(startUrl);
+
+  window.on('blur', () => {
+    if (!window.webContents.isDevToolsOpened()) {
+      window.hide()
+    }
+  })
+}
+
+const toggleWindow = () => {
+  if (window.isVisible()) {
+    window.hide()
+  } else {
+    showWindow()
+  }
+}
+
+const showWindow = () => {
+  const position = getWindowPosition()
+  window.setPosition(position.x, position.y, false)
+  window.show()
+  window.focus()
+}

public/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/photon.css" media="screen" charset="utf-8">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "hotelier",
+  "main": "main.js",
+  "homepage": "./"
+}

public/preload.js

@@ -0,0 +1,2 @@
+const { shell } = require('electron');
+window.shell = shell;