Added region support (#14)

Co-authored-by: mroloux <matti@seats.io>

projects/seatsio-angular/README.md

@@ -32,6 +32,7 @@ Make sure you expose `config` in your component. For example:
 
 ```js
 config = {
+    region: "<yourRegion>", // e.g. "eu"
     workspaceKey: "<yourWorkspacePublicKey>",
     event: "<yourEventKey>"
   }
@@ -79,7 +80,8 @@ To set an explicit height, use CSS on the div that gets created by `<si-seatsio-
 
 ```js
 config = {
-    workspaceKey: "<yourWorkspacePublicKey>",
+  region: "<yourRegion>",
+  workspaceKey: "<yourWorkspacePublicKey>",
     event: "<yourEventKey>",
     onRenderStarted: (chart) => {
       console.info('Render Started')
@@ -93,6 +95,7 @@ If you store the chart object that's passed to `onRenderStarted`, you can access
 let chart = null
 
 config = {
+    region: "<yourRegion>",
     workspaceKey: "<yourWorkspacePublicKey>",
     event: "<yourEventKey>",
     onRenderStarted: {createdChart => { chart = createdChart }}
@@ -105,6 +108,7 @@ config = {
 
 ```js
 config = {
+    region: "<yourRegion>",
     workspaceKey: "<yourWorkspacePublicKey>",
     event: "<yourEventKey>",
     onRenderRendered: (chart) => {
@@ -119,6 +123,7 @@ Other parameters are supported as well. For a full list, check https://docs.seat
 
 ```js
 config = {
+    region: "<yourRegion>",
     workspaceKey: "<yourWorkspacePublicKey>",
     event: "<yourEventKey>",
     pricing: {[
@@ -134,6 +139,7 @@ config = {
 
 ```js
 eventManagerConfig = {
+  region: "<yourRegion>",
   secretKey: "<yourWorkspaceSecretKey>",
   event: "<yourEventKey>",
   mode: "<manageObjectStatus or another mode>"
@@ -152,6 +158,7 @@ Other parameters are supported as well. For a full list, check https://docs.seat
 
 ```js
 chartManagerConfig = {
+  region: "<yourRegion>",
   secretKey: "<yourWorkspaceSecretKey>",
   chart: "<yourChartKey>",
   mode: "manageRulesets"
@@ -171,6 +178,7 @@ Other parameters are supported as well. For a full list, check https://docs.seat
 To embed the seating chart designer for the purpose of creating a new chart, do this:
 ```js
 seatingChartConfig = {
+  region: "<yourRegion>",
   workspaceKey: "<yourWorkspacePublicKey>",
   event: "<yourEventKey>",
   onRenderStarted: () => {
@@ -192,6 +200,7 @@ To be able to edit a chart from an embedded designer, you need to specify the ch
 
 ```js
 seatingChartConfig = {
+  region: "<yourRegion>",
   workspaceKey: "<yourWorkspacePublicKey>",
   event: "<yourEventKey>",
   chartKey: "<yourChartKey>",

projects/seatsio-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seatsio/seatsio-angular",
-  "version": "8.2.0",
+  "version": "9.0.0",
   "author": "Seatsio",
   "license": "MIT",
   "repository": {

projects/seatsio-angular/src/lib/seatsio.service.ts

@@ -9,50 +9,54 @@ export class SeatsioService implements OnInit, OnDestroy {
   chart: any;
 
   async showDesigner(config) {
-    const seatsioInstance = await this.getSeatsio(config.chartJsUrl);
+    const seatsioInstance = await this.getSeatsio(config.region, config.chartJsUrl);
 
     delete config['chartJsUrl'];
+    delete config['region'];
     const chart = new seatsioInstance.SeatingChartDesigner(config).render();
     return chart;
   }
 
   async showSeatingChart(config) {
-    const seatsioInstance = await this.getSeatsio(config.chartJsUrl);
+    const seatsioInstance = await this.getSeatsio(config.region, config.chartJsUrl);
 
     delete config['chartJsUrl'];
+    delete config['region'];
     const chart = new seatsioInstance.SeatingChart(config).render();
     return chart;
   }
 
   async showEventManager(config) {
-    const seatsioInstance = await this.getSeatsio(config.chartJsUrl);
+    const seatsioInstance = await this.getSeatsio(config.region, config.chartJsUrl);
 
     delete config['chartJsUrl'];
+    delete config['region'];
     const chart = new seatsioInstance.EventManager(config).render();
     return chart;
   }
 
   async showChartManager(config) {
-    const seatsioInstance = await this.getSeatsio(config.chartJsUrl);
+    const seatsioInstance = await this.getSeatsio(config.region, config.chartJsUrl);
 
     delete config['chartJsUrl'];
+    delete config['region'];
     const chart = new seatsioInstance.ChartManager(config).render();
     return chart;
   }
 
-  getSeatsio(chartJsUrl) {
+  getSeatsio(region, chartJsUrl) {
     if (typeof seatsio !== 'undefined') {
       return Promise.resolve(seatsio);
     }
-    return this.loadSeatsio(chartJsUrl);
+    return this.loadSeatsio(region, chartJsUrl);
   }
 
-  loadSeatsio(chartJsUrl = 'https://cdn.seatsio.net/chart.js') {
+  loadSeatsio(region, chartJsUrl = 'https://cdn-{region}.seatsio.net/chart.js') {
     return new Promise((resolve, reject) => {
       const script: HTMLScriptElement = document.createElement('script');
       script.onload = () => resolve(seatsio);
       script.onerror = () => reject(`Could not load ${script.src}`);
-      script.src = chartJsUrl.toString();
+      script.src = chartJsUrl.replace('{region}', region);
       document.head.appendChild(script);
     });
   }

projects/testApp/src/app/app.component.ts

@@ -11,14 +11,16 @@ export class AppComponent {
   designerConfig = {
     class: "designer",
     designerKey: "demoDesignerKey",
-    chartJsUrl: "https://cdn-staging.seatsio.net/chart.js",
+    chartJsUrl: "https://cdn-staging-{region}.seatsio.net/chart.js",
+    region: "eu",
     onExitRequested: () => console.log("Exit Requested"),
     onChartCreated: key => console.log("Chart Created", key)
   }
 
   seatingChartConfig = {
     publicKey: "publicDemoKey",
-    chartJsUrl: "https://cdn-staging.seatsio.net/chart.js",
+    chartJsUrl: "https://cdn-staging-{region}.seatsio.net/chart.js",
+    region: "eu",
     event: "fullExampleWithoutSectionsEvent",
     onRenderStarted: () => {
       console.info('Render Started')
@@ -31,7 +33,8 @@ export class AppComponent {
 
   eventManagerConfig = {
     secretKey: "demoKey",
-    chartJsUrl: "https://cdn-staging.seatsio.net/chart.js",
+    chartJsUrl: "https://cdn-staging-{region}.seatsio.net/chart.js",
+    region: "eu",
     event: "fullExampleWithoutSectionsEvent",
     mode: "manageObjectStatuses",
     onChartRendered: () => {
@@ -41,7 +44,8 @@ export class AppComponent {
 
   chartManagerConfig = {
     secretKey: "demoKey",
-    chartJsUrl: "https://cdn-staging.seatsio.net/chart.js",
+    chartJsUrl: "https://cdn-staging-{region}.seatsio.net/chart.js",
+    region: "eu",
     chart: "demoChartSmallTheatre",
     mode: "manageRulesets",
     onChartRendered: () => {