Skip to content

andyyou/xeats-sdk

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

225 Commits
.vscode
.vscode
 
 
dist
dist
 
 
src
src
 
 
tools
tools
 
 
.babelrc
.babelrc
 
 
.gitignore
.gitignore
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
README.md
README.md
 
 
bower.json
bower.json
 
 
iframe.html
iframe.html
 
 
index.html
index.html
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
webpack.config.js
webpack.config.js
 
 

Repository files navigation

xeats.io sdk

What is xeats-sdk

xeats-sdk is the sdk provided by xeats.io.

  • For seats managers, this is for managing the seats map, setting tickets and categorizing seats for an activity.
  • For seats users, this is for participants who want to enroll an activity to book their seats.

Getting started

  1. Sign up in https://xeats.io.
  2. Use email and password to get access_key and secret. Visit documents for more. NOTE: use this SDK require access_key and secret.
  3. Put HTML into your page or watch - Demo (creating seats) and Demo (booking seats) directly.
<div id="seat-map"></div>
  1. Add sdk and scripts.
<script src="https://unpkg.com/xeats-sdk/"></script>

Use on the Web

For User to Create Manager:

<script>
// NOTICE: For User to create Manager
(function () {
  var xeat = new Xeats.ManagerMap({
    endPoint: 'https://xeats.io/v1.0',
    el: '#seat-map',
    accessKey: '70abb94c-0a4e-4b60-b228-d3e17f2eb4ad',
    secret: '2a669a9ec56ae69bd0be2de0c3c81b79',
    /**
     * The unique key for create a seats.
     * You can name it as hash or event name.
     * NOTE: it decide which seats you use.
     * Each time you make a new name will create another seats.
     */
    seatsKey: 'create',
    categories: ['A', 'B', 'C', 'D'],
    zoomMax: 4,         // default is 2
    zoomMin: 0.5,       // default is 0.5
    disableWheel: true,  // default is false
    width: 'auto',      // For responsive set value to `auto`
    height: 800         // Height can not set to auto
  })
})()
</script>

For User to Book Seats:

<script>
// NOTICE:For user to book seats
(function () {
  var xeat = new Xeats.UserMap({
    endPoint: 'https://xeats.io/v1.0',
    el: '#seat-map',
    accessKey: '70abb94c-0a4e-4b60-b228-d3e17f2eb4ad',
    seatsKey: 'create',
    zoomMax: 4,
    zoomMin: 0.5,
    width: 'auto',    // For responsive set value to `auto`
    height: 800,      // Height can not set to auto
    amountMax: 4,     // Limit selection amount
    disableWheel: true,  // default is false
    readOnly: true,   // default is false
  })
})()
</script>

Use with Node

npm install --save xeats-sdk

We support using ES2015+/Commonjs

// ES 2015+
import Xeats from 'xeats-sdk'

// Commonjs
const Xeat = require('xeats-sdk')

new Xeats.ManagerMap({...})
new Xeats.UserMap({...})

Feature

Manager Map

When setting category on seats, manager now can pick multiple seats through Cmd/Alt Key.

API Documentation

ManagerMap

endPoint
  • Type: String
  • Description: The end point of the sdk
  • Usage:
endPoint: 'https://xeats.io/v1.0',
el
  • Type: String
  • Description: The Dom element ID for xeats to mount.
  • Usage:
el: '#seat-map',
accessKey
  • Type: String
  • Description: After registering on xeats.io, you can use xeats.io API to get the accessKey.
secrete
  • Type: String
  • Description: After registering on xeats.io, you can use xeats.io API to get the secrete.
seatsKey
  • Type: String
  • Description: The unique key for create a seats map. You can name it as hash or event name. This decides which seats you use. Each time you make a new name will create a new seats.
  • Usage:
seatsKey: 'sandbox',
categories
  • Type: Array
  • Description: Set seat related information, such as ticket type, ticketId, or ticket pirce.
  • Usage: Simply put an array of string to create different categories of seats:
categories: ['Normal', 'Early Bird', 'Special', 'Free']

For setting detail of seats, put an array of object. Notice that the comment property can only accept String. If you want to put more seat related information, you can put in info property, which accept an Object.

categories: [
    {
        name: 'Free',
        info: {
            ticketId: 'free',
            price: 0
        },
        comment:"This is for student",
    },
    {
        name: 'Early-Bird',
        info: {
            ticketId: 'earlyBird',
            price: 200
        },
        comment:"This is for student",
    }
]
zoomMax
  • Type: Number
  • Description: The maximum scale level to zoom in for the seats map. Larger value can scale in a larger level. Default is 2.
zoomMin
  • Type: Number
  • Description: The minimum scale level to zoom out for the seats map. Smaller value can scale in a smaller level. Default is 0.5.
width
  • Type: Number | String
  • Description: Set the width of the seats map to show. For responsive, set value to auto.
  • Usage:
width: 'auto',
// width: 720
height
  • Type: Number
  • Description: Set the height of the seats map to show. This value can not set to auto
disableWheel
  • Type: Boolean
  • Description: Disable the function of zooming on mouse wheel in seats map. Default is false.
info
  • Type: Object
  • Description: You can put any information wanted to save in database.
  info: {
    environment: 'development'
  }

UserMap

endPoint
  • Type: String
  • Description: The end point of the sdk
  • Usage:
endPoint: 'https://xeats.io/v1.0',
el
  • Type: String
  • Description: The Dom element ID for xeats to mount.
  • Usage:
el: '#seat-map',
accessKey
  • Type: String
  • Description: After registering on xeats.io, you can use xeats.io API to get the accessKey.
seatsKey
  • Type: String
  • Description: The unique key to get the seats map.
  • Usage:
seatsKey: 'sandbox',
zoomMax
  • Type: Number(optional)
  • Description: The maximum scale level to zoom in for the seats map. Larger value can scale in a lagrer level. Default is 2.
zoomMin
  • Type: Number(optional)
  • Description: The minimum scale level to zoom out for the seats map. Smaller value can scale in a smaller level. Default is 0.5.
width
  • Type: Number | String
  • Description: Set the width of the seats map to show. For responsive, set value to auto.
  • Usage:
width: 'auto',
// width: 720
height
  • Type: Number
  • Description: Set the height of the seats map to show. This value can not set to auto
amountMax
  • Type: Number
  • Description: Maximum quantity of seats to book.

readOnly

  • Type: Boolean(optional)
  • Description: Setting this option to true can make seats on map unclickable. Default is False.
limitCategory
  • Type: Object(optional)
  • Description: This property is to limit the booking amount for each cateogry of seats. When setting this property, user can not book any seats when the amount is bigger than the limit.
limitCategory: {
  'Free': {
    amountMax: 2
  },
  'Normal': {
    amountMax: 3
  },
  'Early Bird': {
    amountMax: 6
}
disableWheel
  • Type: Boolean(optional)
  • Description: Disable the function of zooming on mouse wheel in seats map. Default is false.

Development

Run npm run dev to start the webpack-dev-server on your local device. Run npm run build to bundle a xeats-sdk.js for production.

There are currently four VUE components in the package.

  • user-booking: This component will show the seats map and seats information for user to book the seat.
  • management: This component is for managers to choose spots, create seats, change seats status, change seats shape, also to categorize seats.
  • spots-list: This component is embedded in management component, which will get the list of authorized spots for user to change current spots.
  • v-frame: This component is for embedding other components in an iframe.

Close iframe for developers to debug

Since embedded components in iframe would cause browser can not display log message in the console and Vue inspection tool. Therefore, you can disable the vframe component manually.

There are two steps to disable the vframe component:

  1. In index.js, each Vue render function has two different createElement. You can find it by search the term NOTICE: This is for production and NOTICE: This is for development. Comment out the createElement in product and uncomment the createElement in development.
  2. In the components user-booking.vue and management.vue, you can search the term vframe by editor in the modifiers object and set it to false. This will close the vframe components.

After debugging, remember to comment out development code and uncomment production code in index.js, and set vframe to true in user-booking.vue and management.vue.

Change log

  • 2017-09-07 Extract end point from component as a new API
  • 2017-07-25 Include disabilities when assigning sn.
  • 2017-07-18 Add new feature for Manager to pick multiple keys through Cmd Key
  • 2017-06-28 Add new feature to automatically assign sn for seats in management.vue"
  • 2017-05-25 Add new argument 'disableWheel' for user to disable zooming on wheel.
  • 2017-05-23 Accept array of objects for category property in ManagerMap. Display the legend in UserMap.
  • 2017-05-19 Accomplish changing seats shape.
  • 2017-05-03 Accomplish APIs with a document of API.(Alpha/Draft)
  • 2017-03-24 Accomplish v-pan-zoom.
  • 2017-03-21 Finish zoom in out and pick plugins.

Contributors

Issues

Road map

About

xeats API system client sdk

Resources

Readme
Activity

Stars

1 star

Watchers

2 watching

Forks

1 fork
Report repository

Releases

1 tags

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages