@seatsio/seatsio-vue 1.1.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -17
- package/dev/serve.vue +38 -22
- package/dist/seatsio-vue.js +28 -38
- package/package.json +9 -9
- package/src/lib-components/seatsioEmbeddable.vue +23 -34
package/README.md
CHANGED
|
@@ -9,7 +9,7 @@ Npm
|
|
|
9
9
|
npm install --save @seatsio/seatsio-vue
|
|
10
10
|
|
|
11
11
|
Yarn
|
|
12
|
-
yarn add
|
|
12
|
+
yarn add @seatsio/seatsio-vue
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
# Usage
|
|
@@ -18,7 +18,7 @@ yarn add -dev @seatsio/seatsio-vue
|
|
|
18
18
|
|
|
19
19
|
### Minimal example to render a seating chart:
|
|
20
20
|
|
|
21
|
-
```
|
|
21
|
+
```vue
|
|
22
22
|
import { SeatsioSeatingChart } from '@seatsio/seatsio-vue';
|
|
23
23
|
|
|
24
24
|
<div style="height: 500px">
|
|
@@ -32,13 +32,32 @@ import { SeatsioSeatingChart } from '@seatsio/seatsio-vue';
|
|
|
32
32
|
|
|
33
33
|
The chart uses 100 % of the width and height of the DOM element (e.g. a div) in which you render it. Play with the size of that element to change the chart size.
|
|
34
34
|
|
|
35
|
+
### Pricing
|
|
36
|
+
|
|
37
|
+
```vue
|
|
38
|
+
import { SeatsioSeatingChart } from '@seatsio/seatsio-vue';
|
|
39
|
+
|
|
40
|
+
<div style="height: 500px">
|
|
41
|
+
<SeatsioSeatingChart
|
|
42
|
+
workspaceKey="<yourPublicWorkspaceKey>"
|
|
43
|
+
event="<yourEventKey>"
|
|
44
|
+
region="eu"
|
|
45
|
+
:pricing="[
|
|
46
|
+
{'category': 1, 'price': 30},
|
|
47
|
+
{'category': 2, 'price': 40},
|
|
48
|
+
{'category': 3, 'price': 50}
|
|
49
|
+
]"
|
|
50
|
+
/>
|
|
51
|
+
</div>
|
|
52
|
+
```
|
|
53
|
+
|
|
35
54
|
## Reacting to events
|
|
36
55
|
|
|
37
56
|
### onRenderStarted()
|
|
38
57
|
|
|
39
58
|
`onRenderStarted` is fired when the chart has started loading, but hasn't rendered yet. If you store the chart object that's passed to the `onRenderStarted` callback, you can access the properties defined on the wrapped `seatsio.SeatingChart`:
|
|
40
59
|
|
|
41
|
-
```
|
|
60
|
+
```vue
|
|
42
61
|
// Single File Component (SFC) using SeatsioSeatingChart
|
|
43
62
|
export default {
|
|
44
63
|
...
|
|
@@ -48,19 +67,19 @@ export default {
|
|
|
48
67
|
}
|
|
49
68
|
},
|
|
50
69
|
methods: {
|
|
51
|
-
onRenderStarted:
|
|
70
|
+
onRenderStarted: (chart) => {
|
|
52
71
|
this.chart = chart
|
|
53
72
|
console.log(chart.selectedObjects)
|
|
54
73
|
}
|
|
55
74
|
}
|
|
56
75
|
}
|
|
57
76
|
|
|
77
|
+
// Notice how the event handler is defined with @<eventListener>
|
|
78
|
+
// For more information, see https://vuejs.org/guide/essentials/event-handling.html
|
|
58
79
|
<SeatsioSeatingChart
|
|
59
80
|
workspaceKey="<yourPublicWorkspaceKey>"
|
|
60
81
|
event="<yourEventKey>"
|
|
61
|
-
|
|
62
|
-
// For more information, see https://vuejs.org/guide/essentials/event-handling.html
|
|
63
|
-
@onRenderStarted="onRenderStarted"
|
|
82
|
+
@renderStarted="onRenderStarted"
|
|
64
83
|
region="eu"
|
|
65
84
|
/>
|
|
66
85
|
```
|
|
@@ -69,7 +88,7 @@ export default {
|
|
|
69
88
|
|
|
70
89
|
`onChartRendered` is fired when the chart is rendered successfully:
|
|
71
90
|
|
|
72
|
-
```
|
|
91
|
+
```vue
|
|
73
92
|
export default {
|
|
74
93
|
...
|
|
75
94
|
data() {
|
|
@@ -88,7 +107,7 @@ export default {
|
|
|
88
107
|
<SeatsioSeatingChart
|
|
89
108
|
workspaceKey="<yourPublicWorkspaceKey>"
|
|
90
109
|
event="<yourEventKey>"
|
|
91
|
-
@
|
|
110
|
+
@chartRendered="onChartRendered"
|
|
92
111
|
region="eu"
|
|
93
112
|
/>
|
|
94
113
|
```
|
|
@@ -96,14 +115,13 @@ export default {
|
|
|
96
115
|
|
|
97
116
|
Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/renderer/embed-a-floor-plan
|
|
98
117
|
|
|
99
|
-
|
|
100
118
|
Example: Passing in a custom object color:
|
|
101
|
-
```
|
|
119
|
+
```vue
|
|
102
120
|
export default {
|
|
103
121
|
...
|
|
104
122
|
data() {
|
|
105
123
|
// Supports CSS color values
|
|
106
|
-
objectColor: () => 'grey'
|
|
124
|
+
objectColor: () => 'grey'
|
|
107
125
|
},
|
|
108
126
|
}
|
|
109
127
|
|
|
@@ -119,7 +137,7 @@ Whenever one of the properties passed on to `<SeatsioSeatingChart />` changes, t
|
|
|
119
137
|
|
|
120
138
|
## Event manager
|
|
121
139
|
|
|
122
|
-
```
|
|
140
|
+
```vue
|
|
123
141
|
import { SeatsioEventManager } from '@seatsio/seatsio-vue';
|
|
124
142
|
|
|
125
143
|
<div style="height: 500px">
|
|
@@ -136,7 +154,7 @@ Other parameters are supported as well. For a full list, check https://docs.seat
|
|
|
136
154
|
|
|
137
155
|
## Chart manager
|
|
138
156
|
|
|
139
|
-
```
|
|
157
|
+
```vue
|
|
140
158
|
import { SeatsioChartManager } from '@seatsio/seatsio-vue';
|
|
141
159
|
|
|
142
160
|
<div style="height: 500px">
|
|
@@ -154,7 +172,7 @@ Other parameters are supported as well. For a full list, check https://docs.seat
|
|
|
154
172
|
|
|
155
173
|
To embed the seating chart designer for the purpose of creating a new chart, do this:
|
|
156
174
|
|
|
157
|
-
```
|
|
175
|
+
```vue
|
|
158
176
|
import { SeatsioDesigner } from '@seatsio/seatsio-vue';
|
|
159
177
|
|
|
160
178
|
<div style="height: 500px">
|
|
@@ -167,7 +185,7 @@ import { SeatsioDesigner } from '@seatsio/seatsio-vue';
|
|
|
167
185
|
|
|
168
186
|
To be able to edit a chart from an embedded designer, you need to specify the chart to load:
|
|
169
187
|
|
|
170
|
-
```
|
|
188
|
+
```vue
|
|
171
189
|
<SeatsioDesigner
|
|
172
190
|
secretKey="<yourWorkspaceSecretKey>"
|
|
173
191
|
chartKey="<yourChartKey>"
|
|
@@ -175,4 +193,4 @@ To be able to edit a chart from an embedded designer, you need to specify the ch
|
|
|
175
193
|
/>
|
|
176
194
|
```
|
|
177
195
|
|
|
178
|
-
Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer/introduction
|
|
196
|
+
Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer/introduction
|
package/dev/serve.vue
CHANGED
|
@@ -12,19 +12,23 @@ export default {
|
|
|
12
12
|
SeatsioSeatingChart,
|
|
13
13
|
SeatsioChartManager,
|
|
14
14
|
SeatsioDesigner,
|
|
15
|
-
SeatsioEventManager
|
|
16
|
-
SeatsioSeatingChart,
|
|
15
|
+
SeatsioEventManager
|
|
17
16
|
},
|
|
18
17
|
data: () => ({
|
|
19
|
-
messages: {
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
messages: {
|
|
19
|
+
clickToSelect: 'Click to pick',
|
|
20
|
+
STAGE: 'stage-translated'
|
|
21
|
+
},
|
|
22
22
|
selectedComponent: 'seatingChart',
|
|
23
|
+
objectColor: () => 'purple',
|
|
24
|
+
tooltipInfo: () => 'My custom info',
|
|
25
|
+
chartJsUrl: 'https://cdn-staging-eu.seatsio.net/chart.js'
|
|
23
26
|
}),
|
|
24
27
|
methods: {
|
|
25
28
|
onRenderStarted: chart => console.log('Render started', chart),
|
|
26
29
|
onObjectClicked: clickedObject => console.log('Object clicked', clickedObject),
|
|
27
|
-
|
|
30
|
+
priceFormatter: price => '$' + price
|
|
31
|
+
}
|
|
28
32
|
}
|
|
29
33
|
</script>
|
|
30
34
|
|
|
@@ -36,47 +40,59 @@ export default {
|
|
|
36
40
|
workspaceKey="publicDemoKey"
|
|
37
41
|
event="smallTheatreEvent"
|
|
38
42
|
region="eu"
|
|
43
|
+
language="en"
|
|
44
|
+
:chartJsUrl="chartJsUrl"
|
|
39
45
|
:messages="messages"
|
|
40
46
|
:objectColor="objectColor"
|
|
41
47
|
:tooltipInfo="tooltipInfo"
|
|
42
|
-
|
|
43
|
-
@
|
|
48
|
+
:priceFormatter="priceFormatter"
|
|
49
|
+
@renderStarted="onRenderStarted"
|
|
50
|
+
@objectClicked="onObjectClicked"
|
|
51
|
+
:pricing="[
|
|
52
|
+
{ category: 1, price: 30 },
|
|
53
|
+
{ category: 2, price: 40 },
|
|
54
|
+
{ category: 3, price: 50 }
|
|
55
|
+
]"
|
|
44
56
|
/>
|
|
45
57
|
<SeatsioDesigner
|
|
46
58
|
v-if="selectedComponent === 'chartDesigner'"
|
|
47
|
-
|
|
59
|
+
region="eu"
|
|
48
60
|
id="myChartDesigner"
|
|
49
61
|
workspaceKey="publicDemoKey"
|
|
50
62
|
mode="readOnly"
|
|
63
|
+
:chartJsUrl="chartJsUrl"
|
|
64
|
+
:show-fullscreen-button="true"
|
|
51
65
|
:messages="messages"
|
|
52
66
|
:tooltipInfo="tooltipInfo"
|
|
53
|
-
@
|
|
54
|
-
@
|
|
67
|
+
@renderStarted="onRenderStarted"
|
|
68
|
+
@objectClicked="onObjectClicked"
|
|
55
69
|
chartKey="0bcf8295-0063-486b-85fe-77b8d85008b5"
|
|
56
70
|
/>
|
|
57
71
|
<SeatsioChartManager
|
|
58
72
|
v-if="selectedComponent === 'chartManager'"
|
|
73
|
+
region="eu"
|
|
59
74
|
id="myChartManager"
|
|
60
75
|
mode="manageRulesets"
|
|
76
|
+
:chartJsUrl="chartJsUrl"
|
|
61
77
|
:messages="messages"
|
|
62
78
|
:tooltipInfo="tooltipInfo"
|
|
63
|
-
@
|
|
64
|
-
@
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
secretKey="<yourWorkspaceSecretKey>"
|
|
79
|
+
@renderStarted="onRenderStarted"
|
|
80
|
+
@objectClicked="onObjectClicked"
|
|
81
|
+
chart="0bcf8295-0063-486b-85fe-77b8d85008b5"
|
|
82
|
+
secretKey="demoKey"
|
|
68
83
|
/>
|
|
69
84
|
<SeatsioEventManager
|
|
70
85
|
v-if="selectedComponent === 'eventManager'"
|
|
86
|
+
region="eu"
|
|
71
87
|
id="myEventManager"
|
|
72
88
|
mode="manageCategories"
|
|
89
|
+
:chartJsUrl="chartJsUrl"
|
|
73
90
|
:messages="messages"
|
|
74
91
|
:tooltipInfo="tooltipInfo"
|
|
75
|
-
@
|
|
76
|
-
@
|
|
77
|
-
event="
|
|
78
|
-
secretKey="
|
|
79
|
-
workspaceKey="<yourWorkspaceKey>"
|
|
92
|
+
@renderStarted="onRenderStarted"
|
|
93
|
+
@objectClicked="onObjectClicked"
|
|
94
|
+
event="smallTheatreEvent"
|
|
95
|
+
secretKey="demoKey"
|
|
80
96
|
/>
|
|
81
97
|
</template>
|
|
82
98
|
|
|
@@ -84,4 +100,4 @@ export default {
|
|
|
84
100
|
#myChart, #myChartDesigner, #myChartManager, #myEventManager {
|
|
85
101
|
height: 100vh
|
|
86
102
|
}
|
|
87
|
-
</style>
|
|
103
|
+
</style>
|
package/dist/seatsio-vue.js
CHANGED
|
@@ -12,61 +12,48 @@ var script$4 = {
|
|
|
12
12
|
type: String,
|
|
13
13
|
default: 'https://cdn-{region}.seatsio.net/chart.js'
|
|
14
14
|
},
|
|
15
|
-
event: String,
|
|
16
15
|
id: {
|
|
17
16
|
type: String,
|
|
18
17
|
default: 'chart'
|
|
19
18
|
},
|
|
20
|
-
extraConfig: Object,
|
|
21
|
-
fitTo: String,
|
|
22
|
-
language: String,
|
|
23
|
-
messages: Object,
|
|
24
|
-
mode: String,
|
|
25
|
-
objectColor: Function,
|
|
26
|
-
objectTooltip: Object,
|
|
27
|
-
workspaceKey: {
|
|
28
|
-
type: String,
|
|
29
|
-
required: true
|
|
30
|
-
},
|
|
31
19
|
region: {
|
|
32
20
|
type: String,
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
showFullscreenButton: Boolean,
|
|
36
|
-
tooltipInfo: Function,
|
|
37
|
-
chartKey: String,
|
|
38
|
-
secretKey: String
|
|
21
|
+
required: true
|
|
22
|
+
}
|
|
39
23
|
},
|
|
40
24
|
methods: {
|
|
41
25
|
createAndRenderChart: async function () {
|
|
26
|
+
if (!this.$props.region) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
42
29
|
const seatsio = await this.getSeatsio();
|
|
43
|
-
const callbacks = {
|
|
44
|
-
onChartRendered: chart => this.$emit('onChartRendered', chart),
|
|
45
|
-
onChartRenderingFailed: chart => this.$emit('onChartRenderingFailed', chart),
|
|
46
|
-
onChartRerenderingStarted: chart => this.$emit('onChartRerenderingStarted', chart),
|
|
47
|
-
onObjectSelected: selectedObject => this.$emit('onObjectSelected', selectedObject),
|
|
48
|
-
onObjectDeselected: deselectedObject => this.$emit('onObjectDeselected', deselectedObject),
|
|
49
|
-
onObjectClicked: clickedObject => this.$emit('onObjectClicked', clickedObject),
|
|
50
|
-
onFullScreenOpened: () => this.$emit('onFullScreenOpened'),
|
|
51
|
-
onFullScreenClosed: () => this.$emit('onFullScreenClosed'),
|
|
52
|
-
onSubmitSucceeded: () => this.$emit('onSubmitSucceeded'),
|
|
53
|
-
onSubmitFailed: () => this.$emit('onSubmitFailed')
|
|
54
|
-
};
|
|
55
30
|
const config = {
|
|
56
31
|
divId: this.$props.id,
|
|
57
|
-
...this.
|
|
58
|
-
...callbacks
|
|
32
|
+
...this.propsAndAttrs()
|
|
59
33
|
};
|
|
60
34
|
this.chart = this.createChart(seatsio, config).render();
|
|
61
|
-
|
|
35
|
+
if (this.$attrs.onRenderStarted) {
|
|
36
|
+
this.$attrs.onRenderStarted(this.chart);
|
|
37
|
+
}
|
|
62
38
|
},
|
|
63
|
-
|
|
64
|
-
|
|
39
|
+
propsAndAttrs: function () {
|
|
40
|
+
let allPropsAndAttrs = {
|
|
41
|
+
...this.$props,
|
|
42
|
+
...this.$attrs
|
|
43
|
+
};
|
|
44
|
+
let {
|
|
45
|
+
id,
|
|
46
|
+
onRenderStarted,
|
|
47
|
+
chartJsUrl,
|
|
48
|
+
region,
|
|
49
|
+
...filteredPropsAndAttrs
|
|
50
|
+
} = allPropsAndAttrs;
|
|
51
|
+
return filteredPropsAndAttrs;
|
|
65
52
|
},
|
|
66
53
|
getSeatsio: async function () {
|
|
67
54
|
if (typeof window.seatsio === 'undefined') {
|
|
68
55
|
return this.loadSeatsio();
|
|
69
|
-
} else if (window.seatsio.region !== this.
|
|
56
|
+
} else if (window.seatsio.region !== this.getRegion()) {
|
|
70
57
|
window.seatsio = undefined;
|
|
71
58
|
return this.loadSeatsio();
|
|
72
59
|
} else {
|
|
@@ -77,16 +64,19 @@ var script$4 = {
|
|
|
77
64
|
return new Promise((resolve, reject) => {
|
|
78
65
|
let script = document.createElement('script');
|
|
79
66
|
script.onload = () => {
|
|
80
|
-
window.seatsio.region = this.
|
|
67
|
+
window.seatsio.region = this.getRegion();
|
|
81
68
|
resolve(window.seatsio);
|
|
82
69
|
};
|
|
83
70
|
script.onerror = () => reject(`Could not load ${script.src}`);
|
|
84
|
-
script.src = this.chartJsUrl.replace('{region}', this.
|
|
71
|
+
script.src = this.chartJsUrl.replace('{region}', this.getRegion());
|
|
85
72
|
document.head.appendChild(script);
|
|
86
73
|
});
|
|
87
74
|
},
|
|
88
75
|
destroyChart: function () {
|
|
89
76
|
this.chart.destroy();
|
|
77
|
+
},
|
|
78
|
+
getRegion: function () {
|
|
79
|
+
return this.$props.region;
|
|
90
80
|
}
|
|
91
81
|
}
|
|
92
82
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seatsio/seatsio-vue",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/seatsio-vue.js",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -10,18 +10,18 @@
|
|
|
10
10
|
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js"
|
|
11
11
|
},
|
|
12
12
|
"devDependencies": {
|
|
13
|
-
"@babel/core": "^7.21.
|
|
14
|
-
"@babel/preset-env": "^7.
|
|
15
|
-
"@rollup/plugin-alias": "^
|
|
13
|
+
"@babel/core": "^7.21.5",
|
|
14
|
+
"@babel/preset-env": "^7.21.5",
|
|
15
|
+
"@rollup/plugin-alias": "^5.0.0",
|
|
16
16
|
"@rollup/plugin-babel": "^6.0.3",
|
|
17
|
-
"@rollup/plugin-commonjs": "^24.0
|
|
18
|
-
"@rollup/plugin-node-resolve": "^15.0.
|
|
19
|
-
"@rollup/plugin-replace": "^
|
|
17
|
+
"@rollup/plugin-commonjs": "^24.1.0",
|
|
18
|
+
"@rollup/plugin-node-resolve": "^15.0.2",
|
|
19
|
+
"@rollup/plugin-replace": "^5.0.2",
|
|
20
20
|
"@vue/cli-plugin-babel": "^5.0.8",
|
|
21
21
|
"@vue/cli-service": "^5.0.8",
|
|
22
22
|
"cross-env": "^7.0.3",
|
|
23
|
-
"minimist": "^1.2.
|
|
24
|
-
"rimraf": "^
|
|
23
|
+
"minimist": "^1.2.8",
|
|
24
|
+
"rimraf": "^4.4.1",
|
|
25
25
|
"rollup": "^2.52.8",
|
|
26
26
|
"rollup-plugin-terser": "^7.0.2",
|
|
27
27
|
"rollup-plugin-vue": "^6.0.0",
|
|
@@ -8,49 +8,35 @@
|
|
|
8
8
|
},
|
|
9
9
|
props: {
|
|
10
10
|
chartJsUrl: {type: String, default: 'https://cdn-{region}.seatsio.net/chart.js'},
|
|
11
|
-
event: String,
|
|
12
11
|
id: {type: String, default: 'chart'},
|
|
13
|
-
|
|
14
|
-
fitTo: String,
|
|
15
|
-
language: String,
|
|
16
|
-
messages: Object,
|
|
17
|
-
mode: String,
|
|
18
|
-
objectColor: Function,
|
|
19
|
-
objectTooltip: Object,
|
|
20
|
-
workspaceKey: {type: String, required: true},
|
|
21
|
-
region: {type: String, default: 'eu'},
|
|
22
|
-
showFullscreenButton: Boolean,
|
|
23
|
-
tooltipInfo: Function,
|
|
24
|
-
chartKey: String,
|
|
25
|
-
secretKey: String
|
|
12
|
+
region: {type: String, required: true}
|
|
26
13
|
},
|
|
27
14
|
methods: {
|
|
28
15
|
createAndRenderChart: async function () {
|
|
16
|
+
if(!this.$props.region) {
|
|
17
|
+
return
|
|
18
|
+
}
|
|
19
|
+
|
|
29
20
|
const seatsio = await this.getSeatsio()
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
onObjectSelected: selectedObject => this.$emit('onObjectSelected', selectedObject),
|
|
35
|
-
onObjectDeselected: deselectedObject => this.$emit('onObjectDeselected', deselectedObject),
|
|
36
|
-
onObjectClicked: clickedObject => this.$emit('onObjectClicked', clickedObject),
|
|
37
|
-
onFullScreenOpened: () => this.$emit('onFullScreenOpened'),
|
|
38
|
-
onFullScreenClosed: () => this.$emit('onFullScreenClosed'),
|
|
39
|
-
onSubmitSucceeded: () => this.$emit('onSubmitSucceeded'),
|
|
40
|
-
onSubmitFailed: () => this.$emit('onSubmitFailed'),
|
|
21
|
+
|
|
22
|
+
const config = {
|
|
23
|
+
divId: this.$props.id,
|
|
24
|
+
...this.propsAndAttrs()
|
|
41
25
|
}
|
|
42
|
-
|
|
43
|
-
const config = {divId: this.$props.id, ...this.finaliseProps(this.$props), ...callbacks}
|
|
44
26
|
this.chart = this.createChart(seatsio, config).render()
|
|
45
|
-
this.
|
|
27
|
+
if(this.$attrs.onRenderStarted) {
|
|
28
|
+
this.$attrs.onRenderStarted(this.chart)
|
|
29
|
+
}
|
|
46
30
|
},
|
|
47
|
-
|
|
48
|
-
|
|
31
|
+
propsAndAttrs: function () {
|
|
32
|
+
let allPropsAndAttrs = {...this.$props, ...this.$attrs};
|
|
33
|
+
let { id, onRenderStarted, chartJsUrl, region, ...filteredPropsAndAttrs } = allPropsAndAttrs
|
|
34
|
+
return filteredPropsAndAttrs
|
|
49
35
|
},
|
|
50
36
|
getSeatsio: async function () {
|
|
51
37
|
if (typeof window.seatsio === 'undefined') {
|
|
52
38
|
return this.loadSeatsio()
|
|
53
|
-
} else if (window.seatsio.region !== this.
|
|
39
|
+
} else if (window.seatsio.region !== this.getRegion()) {
|
|
54
40
|
window.seatsio = undefined
|
|
55
41
|
return this.loadSeatsio()
|
|
56
42
|
} else {
|
|
@@ -61,17 +47,20 @@
|
|
|
61
47
|
return new Promise((resolve, reject) => {
|
|
62
48
|
let script = document.createElement('script')
|
|
63
49
|
script.onload = () => {
|
|
64
|
-
window.seatsio.region = this.
|
|
50
|
+
window.seatsio.region = this.getRegion()
|
|
65
51
|
resolve(window.seatsio)
|
|
66
52
|
}
|
|
67
53
|
script.onerror = () => reject(`Could not load ${script.src}`)
|
|
68
|
-
script.src = this.chartJsUrl.replace('{region}', this.
|
|
54
|
+
script.src = this.chartJsUrl.replace('{region}', this.getRegion())
|
|
69
55
|
document.head.appendChild(script)
|
|
70
56
|
})
|
|
71
57
|
},
|
|
72
58
|
destroyChart: function () {
|
|
73
59
|
this.chart.destroy()
|
|
60
|
+
},
|
|
61
|
+
getRegion: function () {
|
|
62
|
+
return this.$props.region
|
|
74
63
|
}
|
|
75
64
|
}
|
|
76
65
|
}
|
|
77
|
-
</script>
|
|
66
|
+
</script>
|