Initial version

rapal · Sep 26, 2017 · 1ddfc54 · 1ddfc54
1 parent e31952c
commit 1ddfc54
Show file tree

Hide file tree

Showing 13 changed files with 4,062 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+build/
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,8 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"esbenp.prettier-vscode",
+		"eg2.tslint"
+	]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "prettier.tabWidth": 2,
+    "editor.tabSize": 2
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Rapal Oy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,2 +1,12 @@
 # optimaze-viewer-example
-Example application for the `optimaze-viewer` library. Written in TypeScript and using Webpack.
+
+This is an example application for the [`optimaze-viewer`](https://github.com/rapal/optimaze-viewer) library. 
+It is written in TypeScript and uses Webpack for bundling.
+
+Note: The API which this application uses is not yet published but will be published later in 2017.
+
+## Usage
+
+1. Run `yarn` to install dependencies
+2. Run `yarn start` to start dev server
+3. Alternatively, run `yarn build` and open `index.html`
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>optimaze-viewer-example</title>
+    <script src="build/bundle.js"></script>
+    <link rel="stylesheet" href="build/bundle.css" />
+</head>
+
+<body>
+    <div id="viewer"></div>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@rapal/optimaze-viewer-example",
+  "version": "0.1.0",
+  "main": "index.html",
+  "author": "Rapal Oy",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rapal/optimaze-viewer-example"
+  },
+  "scripts": {
+    "build": "yarn run lint && rimraf build && webpack",
+    "start": "webpack-dev-server",
+    "lint": "tslint --config tslint.json --project tsconfig.json"
+  },
+  "devDependencies": {
+    "css-loader": "^0.28.7",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "path": "^0.12.7",
+    "rimraf": "^2.6.2",
+    "ts-loader": "^2.3.7",
+    "tslint": "^5.7.0",
+    "typescript": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.8.2"
+  },
+  "dependencies": {
+    "@rapal/optimaze-viewer": "^0.1.0",
+    "@types/leaflet": "^1.2.0",
+    "@types/q": "^1.0.5",
+    "leaflet": "^1.2.0",
+    "q": "^1.5.0"
+  }
+}
diff --git a/src/app.css b/src/app.css
@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+}
+#viewer {
+  height: 100vh;
+}
+.leaflet-container {
+  background: transparent;
+}
diff --git a/src/app.ts b/src/app.ts
@@ -0,0 +1,141 @@
+import * as L from "leaflet";
+import * as Q from "q";
+import {
+  Viewer,
+  Space,
+  Element,
+  GraphicsLayer,
+  IDimensions,
+  IBoundary,
+  ICoordinate
+} from "@rapal/optimaze-viewer";
+
+import "leaflet/dist/leaflet.css";
+import "./app.css";
+
+// Specify company id
+const companyId = 1361;
+
+// Get floor id from URL params or use default
+const params = new URLSearchParams(document.location.search.substring(1));
+const floorId = params.get("floorId") || "m2033625";
+
+// TODO: Replace with production URL once API is published
+// TODO: Add support for authentication
+const baseUrl = "http://localhost/space/api/public/v1/";
+
+const graphicsUrl = `${baseUrl}/${companyId}/floors/${floorId}/graphics`;
+const seatsUrl = `${baseUrl}/${companyId}/seats?floorId=${floorId}`;
+
+function getTileUrlTemplate(layer: GraphicsLayer) {
+  return `${baseUrl}/${companyId}/floors/${floorId}/tiles?layer=${layer}&x={x}&y={y}&z={z}`;
+}
+
+function getJson<TData>(url: string) {
+  return fetch(url, { credentials: "include" }).then<TData>(r => r.json());
+}
+
+Q.all([
+  getJson<IFloorGraphics>(graphicsUrl),
+  getJson<IList<ISeat>>(seatsUrl)
+]).then(values => {
+  const floor = values[0];
+  const seats = values[1].items;
+
+  const viewer = new Viewer("viewer", floor.dimensions);
+
+  // Add all available tile layers
+  // floor.graphicsLayers.forEach(l =>
+  //     viewer.addTileLayer(getTileUrlTemplate(l))
+  // );
+
+  // Or add specific tile layer
+  viewer.addTileLayer(getTileUrlTemplate(GraphicsLayer.Architect));
+
+  // Creating custom panes is not neccessary, but makes sure
+  // that elements of the same type are shown at the same z-index
+  viewer.createPane("seats");
+
+  // Create selectable space layers
+  const spaceLayers = floor.spaceGraphics.map(s => {
+    return new Space(s.id, s.boundaries, {
+      selectable: true
+    });
+  });
+
+  spaceLayers.forEach(space => {
+    // Add to map
+    viewer.addLayer(space);
+
+    // Deselect other spaces and log space id when selected
+    space.on("select", e => {
+      const id = e.target.id;
+      spaceLayers.filter(s => s.id !== id).forEach(s => (s.selected = false));
+      console.log("select space " + id);
+    });
+
+    // Log space id when deselected
+    space.on("deselect", e => {
+      const id = e.target.id;
+      console.log("deselect space " + id);
+    });
+  });
+
+  // Create selectable seat layer
+  // Seats are shown as circles with 500mm radius
+  // Seat styles are specified using the style function
+  const seatLayers = seats.map(s => {
+    const circle = L.circle(L.latLng(s.y, s.x), { radius: 500, pane: "seats" });
+    return new Element(s.id.toString(), [circle], {
+      selectable: true,
+      styleFunction: e => ({
+        color: e.selected ? "#f00" : "#666",
+        weight: e.selected ? 2 : 1,
+        opacity: 1,
+        fillColor: e.selected ? "#faa" : "#ccc",
+        fillOpacity: 1,
+        pane: "seats"
+      })
+    });
+  });
+
+  seatLayers.forEach(seat => {
+    // Add to map
+    viewer.addLayer(seat);
+
+    // Deselect other seats and log seat id when selected
+    seat.on("select", e => {
+      const id = e.target.id;
+      seatLayers.filter(s => s.id !== id).forEach(s => (s.selected = false));
+      console.log("select seat " + id);
+    });
+
+    // Log seat id when deselected
+    seat.on("deselect", e => {
+      const id = e.target.id;
+      console.log("deselect seat " + id);
+    });
+  });
+});
+
+interface IFloorGraphics {
+  dimensions: IDimensions;
+  graphicsLayers: GraphicsLayer[];
+  spaceGraphics: ISpaceGraphics[];
+  scale: number;
+}
+
+interface ISpaceGraphics {
+  id: string;
+  boundaries: IBoundary[];
+}
+
+interface IList<TItem> {
+  items: TItem[];
+}
+
+interface ISeat {
+  id: number;
+  x: number;
+  y: number;
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "strictNullChecks": true
+  }
+}
diff --git a/tslint.json b/tslint.json
@@ -0,0 +1,14 @@
+{
+  "defaultSeverity": "error",
+  "extends": ["tslint:recommended"],
+  "jsRules": {},
+  "rules": {
+    "arrow-parens": false,
+    "object-literal-sort-keys": false,
+    "trailing-comma": false,
+    "member-ordering": false,
+    "ordered-imports": false,
+    "no-console": false
+  },
+  "rulesDirectory": []
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,39 @@
+var path = require("path");
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = {
+  devtool: "inline-source-map",
+  entry: "./src/app.ts",
+  output: {
+    path: path.resolve("build"),
+    filename: "bundle.js"
+  },
+  plugins: [
+    new ExtractTextPlugin({
+      filename: "bundle.css"
+    })
+  ],
+  resolve: {
+    modules: [path.resolve("node_modules")],
+    extensions: [".ts", ".js"]
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.ts$/,
+        include: path.resolve("src"),
+        loader: "ts-loader"
+      },
+      {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract({
+          use: "css-loader"
+        })
+      },
+      {
+        test: /\.png$/,
+        loader: "file-loader"
+      }
+    ]
+  }
+};