Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alisaitteke/seatmap-canvas
Typescript base multi-block supporting open source seat selection framework
https://github.com/alisaitteke/seatmap-canvas
booking canvas d3 seat seat-picker seat-selection seatmap seatmap-canvas seatselection selection stadium
Last synced: 6 days ago
JSON representation
Typescript base multi-block supporting open source seat selection framework
- Host: GitHub
- URL: https://github.com/alisaitteke/seatmap-canvas
- Owner: alisaitteke
- License: mit
- Created: 2018-10-05T10:33:05.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-11T04:29:13.000Z (5 months ago)
- Last Synced: 2025-01-25T03:18:59.056Z (13 days ago)
- Topics: booking, canvas, d3, seat, seat-picker, seat-selection, seatmap, seatmap-canvas, seatselection, selection, stadium
- Language: TypeScript
- Homepage: https://alisaitteke.github.io/seatmap-canvas
- Size: 1.22 MB
- Stars: 100
- Watchers: 19
- Forks: 33
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
- Authors: AUTHORS
Awesome Lists containing this project
README
# Seatmap Canvas
Seatmap Canvas is an advanced, open-source library for interactive seat selection in various settings such as stadiums, theaters, and event spaces. Designed with d3.js, this code version is optimized for developers looking for a customizable and efficient solution to handle seat arrangements and user interactions.
[](https://alisaitteke.github.io/seatmap-canvas)
## Features
* React Integration: Designed specifically for React projects, offering a streamlined development experience.
* Dynamic Seat Selection: Enables interactive selection, categorization, and location of seats.
* Customizable Styles: Extensive styling options for seats, blocks, and labels to fit your application's design.
* Interactive Seat Models: Define properties and behaviors for seats, including salability, notes, and custom data.
* Block Model Configuration: Organize seats into blocks with customizable titles, colors, and labels.
* Event Handling: Simplified event listeners for seat interactions, allowing dynamic responses to user actions.
## Screenshot
[](https://alisaitteke.github.io/seatmap-canvas)
## Planned
- [x] React & React Native Integration
- [ ] Vue & Nuxt Integration
- [ ] Angular Integration
[LIVE DEMO](https://alisaitteke.github.io/seatmap-canvas/)
## What does it do?
#### In any organization
- Seat selection
- Seat categorizing
- Locating
- Turnstile and Gate information
## Installation
npm i @alisaitteke/seatmap-canvas --save
OR
yarn add @alisaitteke/seatmap-canvas --save
#### Example Config
```json
{
"resizable": true,
"seat_style": {
"radius": 12,
"color": "#6796ff",
"hover": "#5671ff",
"not_salable": "#424747",
"selected": "#56aa45",
"focus": "#435fa4",
"focus_out": "#56aa45"
},
"block_style": {
"fill": "#e2e2e2",
"stroke": "#e2e2e2"
},
"label_style": {
"color": "#000",
"radius": 12,
"font-size": "12px",
"bg": "#ffffff"
}
}
```
#### Usage
```js
var seatmap = new SeatmapCanvas(".seats_container",config);
```
#### Seat Model
```json
{
"id": 1,
"title": "49",
"x": 0,
"y": 0,
"salable": true,
"note": "note test",
"color":"#ffffff",
"custom_data": {
"any": "things"
}
}
```
#### Block Model
```json
{
"blocks": [
{
"id": 1,
"title": "Test Block 1",
"color": "#2c2828",
"labels": [
{
"title": "A",
"x": -30,
"y": 0
},
{
"title": "B",
"x": 120,
"y": 30
}
],
"seats": [
{
"id": 1,
"x": 0,
"y": 0,
"salable": true,
"note": "note test",
"title": "49"
},
{
"id": 2,
"x": 30,
"y": 0,
"salable": true,
"note": "note test",
"title": "47"
}
]
}
]
}
```
#### Set Block Data
```js
seatmap.setData(data);
```
#### Seat Click Trigger
```js
seatmap.addEventListener("seat_click", (seat) => {
console.log(seat);
if (seat.selected) {
seatmap.seatUnselect(seat);
} else {
seatmap.seatSelect(seat);
}
});
```
#### Activated unsalable seat click
##### click_enable_sold_seats param add to config object
```javascript
let config = {
click_enable_sold_seats: true // default false
}
```
#### Get selected seat
```javascript
seatmap.addEventListener("seat_click", (seat) => {
var selectedSeats = seatmap.getSelectedSeats();
});
```
#### Complete Example Code
```javascript
var config = {
"resizable": true,
"seat_style": {
"radius": 12,
"color": "#6796ff",
"hover": "#5671ff",
"not_salable": "#424747",
"selected": "#56aa45",
"focus": "#435fa4",
"focus_out": "#56aa45"
},
"block_style": {
"fill": "#e2e2e2",
"stroke": "#e2e2e2"
},
"label_style": {
"color": "#000",
"radius": 12,
"font-size": "12px",
"bg": "#ffffff"
}
}
var seatmap = new SeatmapCanvas(".seats_container",config);
seatmap.addEventListener("seat_click", (seat) => {
console.log(seat);
if (seat.selected) {
seatmap.seatUnselect(seat);
} else {
seatmap.seatSelect(seat);
}
});
var data = {
"blocks": [
{
"id": 1,
"title": "Test Block 1",
"color": "#2c2828",
"labels": [
{
"title": "A",
"x": -30,
"y": 0
},
{
"title": "B",
"x": 120,
"y": 30
}
],
"seats": [
{
"id": 1,
"x": 0,
"y": 0,
"salable": true,
"note": "note test",
"title": "49"
},
{
"id": 2,
"x": 30,
"y": 0,
"salable": true,
"note": "note test",
"title": "47"
}
]
}
]
}
// SET SEATS DATA
seatmap.setData(data);
```
## Contributors
Ali Sait Teke