0.1.4 • Published 5 years ago
segel v0.1.4
Segel
Vue component for creating Gantt-like timeline charts for bookings.
Installation
Install using NPM:
npm install segel
Install using Yarn:
yarn add segel
Also available for use in browser through unpkg:
Usage
Basic usage:
<body>
<div id="app">
<Segel
v-bind:resources="resources"
v-bind:bookings="bookings"
v-on:bookings-create="handleCreate"
v-on:bookings-update="handleUpdate"
v-on:bookings-delete="handleDelete"
></Segel>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/interactjs"></script>
<script src="https://unpkg.com/segel"></script>
<script>
let today = new Date();
let app = new Vue({
el: "#app",
data: {
resources: [{ id: 1, name: "Conference Room A" }],
bookings: [
{
id: 1,
resource: 1,
start: today.setHours(8, 0, 0, 0) / 1000,
end: today.setHours(10, 0, 0, 0) / 1000
},
{
id: 2,
resource: 1,
start: today.setHours(11, 0, 0, 0) / 1000,
end: today.setHours(12, 0, 0, 0) / 1000
},
{
id: 3,
resource: 1,
start: today.setHours(13, 0, 0, 0) / 1000,
end: today.setHours(17, 0, 0, 0) / 1000
}
],
bookingID: 10
},
methods: {
handleCreate: function(booking) {
// Give booking a unique ID and append to array.
booking.id = ++this.bookingID;
this.bookings.push(booking);
},
handleUpdate: function(booking) {
// Find index of updated booking.
let index = this.bookings.findIndex(function(stored) {
return stored.id == booking.id;
});
this.bookings.splice(index, 1, booking);
},
handleDelete: function(booking) {
// Find index of deleted booking.
let index = this.bookings.findIndex(function(stored) {
return stored.id == booking.id;
});
// Remove booking from array.
this.bookings.splice(index, 1);
}
}
});
</script>
</body>
License
Segel is released under the MIT license.
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago