time_table 0.1.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.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +28 -0
- data/Rakefile +8 -0
- data/app/assets/config/time_table_manifest.js +3 -0
- data/app/assets/javascript/application.js +3 -0
- data/app/assets/javascript/controllers/application.js +9 -0
- data/app/assets/javascript/controllers/index.js +21 -0
- data/app/assets/javascript/controllers/time_table_controller.js +240 -0
- data/app/assets/stylesheets/time_table/application.css +15 -0
- data/app/assets/stylesheets/time_table/time_table.css +122 -0
- data/app/controllers/time_table/application_controller.rb +4 -0
- data/app/helpers/time_table/application_helper.rb +4 -0
- data/app/helpers/time_table/time_table_helper.rb +54 -0
- data/app/jobs/time_table/application_job.rb +4 -0
- data/app/mailers/time_table/application_mailer.rb +6 -0
- data/app/models/time_table/application_record.rb +5 -0
- data/app/views/layouts/time_table/application.html.erb +17 -0
- data/app/views/time_table/_time_table.html.erb +32 -0
- data/config/importmap.rb +1 -0
- data/config/routes.rb +2 -0
- data/lib/tasks/time_table_tasks.rake +4 -0
- data/lib/time_table/engine.rb +13 -0
- data/lib/time_table/version.rb +3 -0
- data/lib/time_table.rb +6 -0
- metadata +85 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 1bda0c68f374019f10bea2b170b92f2d42798b36c179f1d8491a8d681d0c63fa
|
4
|
+
data.tar.gz: e810ab3a44df984f542063ff739e565a2c8bc1d5f5e8e26b5d7d9f900b233058
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: f24d3b0708b9acf2cc94d019ca5cf5242375684d887051d8fa553264a2afe7470ec51e9d02f44f0792f02b0f537037d1b77cefd26b3994712e7161cbef96faaf
|
7
|
+
data.tar.gz: de30aaf777b89dbb3d5ade451f2a364102d72e7140cf2940b170a79a4bda0a2844a636a90f92210b96ef6edc1e0f7e7e02d471bd9dbd4200a5ba149c48c98ccc
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright Joshua Hadik
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
# TimeTable
|
2
|
+
Short description and motivation.
|
3
|
+
|
4
|
+
## Usage
|
5
|
+
How to use my plugin.
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
Add this line to your application's Gemfile:
|
9
|
+
|
10
|
+
```ruby
|
11
|
+
gem "time_table"
|
12
|
+
```
|
13
|
+
|
14
|
+
And then execute:
|
15
|
+
```bash
|
16
|
+
$ bundle
|
17
|
+
```
|
18
|
+
|
19
|
+
Or install it yourself as:
|
20
|
+
```bash
|
21
|
+
$ gem install time_table
|
22
|
+
```
|
23
|
+
|
24
|
+
## Contributing
|
25
|
+
Contribution directions go here.
|
26
|
+
|
27
|
+
## License
|
28
|
+
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
// Import and register all your controllers from the importmap under controllers/*
|
2
|
+
|
3
|
+
import { application } from "./application"
|
4
|
+
|
5
|
+
// Load all controllers one by one
|
6
|
+
// import EngineController from "./engine_controller"
|
7
|
+
// application.register("engine", EngineController)
|
8
|
+
|
9
|
+
// const controllers = ["editable_text", "search", "panel", "panel_manager", "resource_collection", "switch"];
|
10
|
+
|
11
|
+
const controllers = ["time_table"];
|
12
|
+
|
13
|
+
controllers.forEach((controller) => {
|
14
|
+
import(`./${controller}_controller.js`).then(( { default: module }) => {
|
15
|
+
application.register(controller.replace("_", "-"), module)
|
16
|
+
})
|
17
|
+
})
|
18
|
+
|
19
|
+
// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
|
20
|
+
// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
|
21
|
+
// lazyLoadControllersFrom("controllers", application)
|
@@ -0,0 +1,240 @@
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
2
|
+
|
3
|
+
// Connects to data-controller="dropdown"
|
4
|
+
export default class extends Controller {
|
5
|
+
static targets = ["canvas", "eventsList", "event", "eventName", "eventTime"]
|
6
|
+
|
7
|
+
connect() {
|
8
|
+
this.startTime = new Date(this.element.dataset.timetableStartTime);
|
9
|
+
this.endTime = new Date(this.element.dataset.timetableEndTime);
|
10
|
+
this.duration = (this.endTime - this.startTime) / 1000;
|
11
|
+
this.canvasArea = this.element.getBoundingClientRect();
|
12
|
+
this.clipSize = this.element.dataset.timetableClipSize;
|
13
|
+
this.scrollHeight = this.element.scrollHeight - 20; // -20 because of the padding
|
14
|
+
this.dragging = false;
|
15
|
+
this.dragEvent = {}
|
16
|
+
|
17
|
+
this.eventTargets.forEach((event) => {
|
18
|
+
this.#setSpecialClasses(event);
|
19
|
+
});
|
20
|
+
}
|
21
|
+
|
22
|
+
startDragEvent(event) {
|
23
|
+
event.preventDefault();
|
24
|
+
event.stopPropagation();
|
25
|
+
|
26
|
+
this.dragging = true;
|
27
|
+
|
28
|
+
this.dragEvent.type = event.params.dragEvent;
|
29
|
+
this.dragEvent.originY = this.dragEvent.originY = this.#relativeCursorPosition(event).y;
|
30
|
+
this.dragEvent.originYTime = this.#timeAtPosition(this.dragEvent.originY);
|
31
|
+
this.dragEvent.currentY = this.dragEvent.originY;
|
32
|
+
this.dragEvent.currentYTime = this.dragEvent.originYTime;
|
33
|
+
|
34
|
+
this.#setDragEventTarget(event.currentTarget.closest(".event"));
|
35
|
+
this.#setDragEventListeners();
|
36
|
+
}
|
37
|
+
|
38
|
+
stopDragEvent(event) {
|
39
|
+
event.preventDefault();
|
40
|
+
event.stopPropagation();
|
41
|
+
|
42
|
+
this.dragging = false;
|
43
|
+
this.dragEvent = {};
|
44
|
+
|
45
|
+
this.#removeDragEventListeners();
|
46
|
+
}
|
47
|
+
|
48
|
+
drag(event) {
|
49
|
+
if(this.dragging) {
|
50
|
+
this.dragEvent.currentY = this.#relativeCursorPosition(event).y;
|
51
|
+
this.dragEvent.currentYTime = this.#timeAtPosition(this.dragEvent.currentY);
|
52
|
+
|
53
|
+
this.#invokeDragMethodFor(this.dragEvent.type); // calls dragCreate, dragMove or dragResize
|
54
|
+
|
55
|
+
if(event.clientY > this.element.getBoundingClientRect().bottom && this.element.scrollTop < this.scrollHeight) {
|
56
|
+
this.element.scrollTop += 10;
|
57
|
+
}
|
58
|
+
if(event.clientY < this.element.getBoundingClientRect().top && this.element.scrollTop > 0) {
|
59
|
+
this.element.scrollTop -= 10;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
//////////////////
|
65
|
+
// Drag Methods //
|
66
|
+
//////////////////
|
67
|
+
|
68
|
+
|
69
|
+
dragCreate(event) {
|
70
|
+
let timeBoundaries = this.#timeBoundaries(this.dragEvent.currentYTime.clipped, this.dragEvent.originYTime.clipped);
|
71
|
+
let eventDiv = this.#createEventDiv(timeBoundaries.start, timeBoundaries.end);
|
72
|
+
this.#setDragEventTarget(eventDiv);
|
73
|
+
this.dragEvent.type = "resize";
|
74
|
+
}
|
75
|
+
|
76
|
+
dragResize(event) {
|
77
|
+
let timeBoundaries = this.#timeBoundaries(this.dragEvent.currentYTime.clipped, this.dragEvent.originEventStartTime.real);
|
78
|
+
this.#updateEventDiv(this.dragEvent.target, timeBoundaries.start, timeBoundaries.end);
|
79
|
+
}
|
80
|
+
|
81
|
+
dragMove(event) {
|
82
|
+
let timeChange = (this.dragEvent.currentYTime.clipped - this.dragEvent.originYTime.clipped);
|
83
|
+
|
84
|
+
let startTime = new Date(this.dragEvent.originEventStartTime.real.getTime() + timeChange);
|
85
|
+
let endTime = new Date(this.dragEvent.originEventEndTime.real.getTime() + timeChange);
|
86
|
+
|
87
|
+
this.#updateEventDiv(this.dragEvent.target, startTime, endTime);
|
88
|
+
}
|
89
|
+
|
90
|
+
/////////////////////
|
91
|
+
// Time & Position //
|
92
|
+
/////////////////////
|
93
|
+
|
94
|
+
#relativeCursorPosition(event) {
|
95
|
+
let canvasArea = this.element.getBoundingClientRect();
|
96
|
+
return {
|
97
|
+
x: event.clientX - canvasArea.left,
|
98
|
+
y: (event.clientY - canvasArea.top - 20) + this.element.scrollTop
|
99
|
+
};
|
100
|
+
}
|
101
|
+
|
102
|
+
#relativeElementPosition(element) {
|
103
|
+
let canvasArea = this.element.getBoundingClientRect();
|
104
|
+
let rect = element.getBoundingClientRect();
|
105
|
+
return {
|
106
|
+
x: rect.left - canvasArea.left,
|
107
|
+
y: (rect.top - canvasArea.top - 20) + this.element.scrollTop
|
108
|
+
};
|
109
|
+
}
|
110
|
+
|
111
|
+
#timeBoundaries(timeA, timeB) {
|
112
|
+
let startTime = new Date(Math.min(timeA, timeB));
|
113
|
+
let endTime = new Date(Math.max(timeA, timeB));
|
114
|
+
|
115
|
+
if (endTime - startTime < this.clipSize * 60 * 1000) {
|
116
|
+
endTime = new Date(startTime.getTime() + (this.clipSize * 60 * 1000));
|
117
|
+
}
|
118
|
+
|
119
|
+
return { start: startTime, end: endTime };
|
120
|
+
}
|
121
|
+
|
122
|
+
#timeAtPosition(y, roundUp = false) {
|
123
|
+
let realSecond = ((y / this.scrollHeight) * this.duration) + 1;
|
124
|
+
let clippedSecond = (Math.floor((realSecond / 60).toFixed(0) / this.clipSize) * this.clipSize) * 60;
|
125
|
+
|
126
|
+
// No need for seconds and minutes, should convert to one unit only, probably seconds or milliseconds
|
127
|
+
return {
|
128
|
+
real: new Date(this.startTime.getTime() + (realSecond * 1000)), // For some reason 1 second is added to real each time you change it.
|
129
|
+
clipped: new Date(this.startTime.getTime() + (clippedSecond * 1000)),
|
130
|
+
}
|
131
|
+
}
|
132
|
+
|
133
|
+
#positionOfTime(time) {
|
134
|
+
let positionInDuration = (time - this.startTime) / (this.endTime - this.startTime + 1000);
|
135
|
+
// console.log(positionInDuration);
|
136
|
+
// console.log(positionInDuration * 1440)
|
137
|
+
return positionInDuration * 1440;
|
138
|
+
}
|
139
|
+
|
140
|
+
/////////////////////////////////////////
|
141
|
+
// Event Methods //
|
142
|
+
// (eventually switch to use template) //
|
143
|
+
/////////////////////////////////////////
|
144
|
+
|
145
|
+
#createEventDiv(startTime, endTime){
|
146
|
+
const eventDiv = document.createElement("div");
|
147
|
+
|
148
|
+
eventDiv.classList.add("event");
|
149
|
+
eventDiv.setAttribute("data-timetable-target", "event");
|
150
|
+
eventDiv.setAttribute("data-action", "mousedown->time-table#startDragEvent");
|
151
|
+
eventDiv.setAttribute("data-time-table-drag-event-param", "move");
|
152
|
+
|
153
|
+
eventDiv.innerHTML = `
|
154
|
+
<div class="event-name"><span style="font-weight: 400; color: gray;">(No Title)</span></div>
|
155
|
+
<div class="event-time" data-action="mousedown->time-table#startDragEvent" data-time-table-drag-event-param="resize">
|
156
|
+
${ this.#durationString(startTime, endTime) }
|
157
|
+
</div>
|
158
|
+
`;
|
159
|
+
|
160
|
+
this.#updateEventDiv(eventDiv, startTime, endTime);
|
161
|
+
this.eventsListTarget.appendChild(eventDiv);
|
162
|
+
|
163
|
+
return eventDiv;
|
164
|
+
}
|
165
|
+
|
166
|
+
#updateEventDiv(target, startTime, endTime) {
|
167
|
+
let startLocation = this.#positionOfTime(startTime);
|
168
|
+
let endLocation = this.#positionOfTime(endTime);
|
169
|
+
|
170
|
+
target.style.setProperty("top", `${startLocation}px`);
|
171
|
+
target.style.setProperty("height", `${endLocation - startLocation}px`);
|
172
|
+
|
173
|
+
this.#setSpecialClasses(target);
|
174
|
+
|
175
|
+
target.querySelector(".event-time").innerHTML = this.#durationString(startTime, endTime);
|
176
|
+
}
|
177
|
+
|
178
|
+
#setSpecialClasses(eventDiv) {
|
179
|
+
eventDiv.classList.toggle("tiny", eventDiv.offsetHeight < 15);
|
180
|
+
eventDiv.classList.toggle("small", eventDiv.offsetHeight < 45);
|
181
|
+
}
|
182
|
+
|
183
|
+
/////////////////////
|
184
|
+
// Time Formatters //
|
185
|
+
/////////////////////
|
186
|
+
|
187
|
+
#timeString(date) {
|
188
|
+
let hours = date.getUTCHours();
|
189
|
+
let minutes = date.getUTCMinutes();
|
190
|
+
let ampm = hours >= 12 ? 'PM' : 'AM';
|
191
|
+
hours = hours % 12;
|
192
|
+
hours = hours ? hours : 12; // the hour '0' should be '12'
|
193
|
+
|
194
|
+
minutes = minutes < 10 ? '0' + minutes : minutes;
|
195
|
+
return hours + ':' + minutes + ' ' + ampm;
|
196
|
+
}
|
197
|
+
|
198
|
+
#durationString(startTime, endTime) {
|
199
|
+
return `${this.#timeString(startTime)} - ${this.#timeString(endTime)}`;
|
200
|
+
}
|
201
|
+
|
202
|
+
////////////////
|
203
|
+
// Invokation //
|
204
|
+
////////////////
|
205
|
+
|
206
|
+
#invokeDragMethodFor(type) {
|
207
|
+
let capitalizedType = type.charAt(0).toUpperCase() + type.slice(1);
|
208
|
+
|
209
|
+
if (this[`drag${capitalizedType}`]) {
|
210
|
+
this[`drag${capitalizedType}`]();
|
211
|
+
} else {
|
212
|
+
console.error(`No drag method found for type: ${type}`);
|
213
|
+
}
|
214
|
+
}
|
215
|
+
|
216
|
+
/////////////
|
217
|
+
// Helpers //
|
218
|
+
/////////////
|
219
|
+
|
220
|
+
#setDragEventTarget(target) {
|
221
|
+
if(target) {
|
222
|
+
this.dragEvent.target = target;
|
223
|
+
this.dragEvent.originEventPosition = this.#relativeElementPosition(target);
|
224
|
+
this.dragEvent.originEventStartTime = this.#timeAtPosition(this.dragEvent.originEventPosition.y);
|
225
|
+
this.dragEvent.originEventEndTime = this.#timeAtPosition(this.dragEvent.originEventPosition.y + target.offsetHeight);
|
226
|
+
}
|
227
|
+
}
|
228
|
+
|
229
|
+
#setDragEventListeners() {
|
230
|
+
document.addEventListener("mousemove", this.drag.bind(this));
|
231
|
+
document.addEventListener("mouseup", this.stopDragEvent.bind(this));
|
232
|
+
document.addEventListener("mouseleave", this.stopDragEvent.bind(this));
|
233
|
+
}
|
234
|
+
|
235
|
+
#removeDragEventListeners() {
|
236
|
+
document.removeEventListener("mousemove", this.drag.bind(this));
|
237
|
+
document.removeEventListener("mouseup", this.stopDragEvent.bind(this));
|
238
|
+
document.removeEventListener("mouseleave", this.stopDragEvent.bind(this));
|
239
|
+
}
|
240
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
/*
|
2
|
+
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
3
|
+
* listed below.
|
4
|
+
*
|
5
|
+
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
|
6
|
+
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
|
7
|
+
*
|
8
|
+
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
9
|
+
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
|
10
|
+
* files in this directory. Styles in this file should be added after the last require_* statement.
|
11
|
+
* It is generally better to create a new file per style scope.
|
12
|
+
*
|
13
|
+
*= require_tree .
|
14
|
+
*= require_self
|
15
|
+
*/
|
@@ -0,0 +1,122 @@
|
|
1
|
+
.timetable {
|
2
|
+
width: 100%;
|
3
|
+
position: relative;
|
4
|
+
overflow: scroll;
|
5
|
+
height: 100%;
|
6
|
+
padding-top: 20px;
|
7
|
+
display: flex;
|
8
|
+
|
9
|
+
/* padding-top: 20px; */
|
10
|
+
}
|
11
|
+
|
12
|
+
.timetable-canvas {
|
13
|
+
/* overflow: visible; */
|
14
|
+
/* margin-top: 0.5em; */
|
15
|
+
position: relative;
|
16
|
+
height: calc(100%);
|
17
|
+
flex-grow: 1;
|
18
|
+
}
|
19
|
+
|
20
|
+
.timetable .timestamps {
|
21
|
+
}
|
22
|
+
|
23
|
+
.timetable:hover {
|
24
|
+
/* cursor: crosshair; */
|
25
|
+
}
|
26
|
+
|
27
|
+
.timetable::-webkit-scrollbar {
|
28
|
+
display: none;
|
29
|
+
}
|
30
|
+
|
31
|
+
.timestamps {
|
32
|
+
position: absolute;
|
33
|
+
left: 5px;
|
34
|
+
right: 0;
|
35
|
+
display: flex;
|
36
|
+
flex-direction: column;
|
37
|
+
/* height: 2400px; */
|
38
|
+
/* gap: 50px; */
|
39
|
+
/* height: 50px; */
|
40
|
+
justify-content: space-between;
|
41
|
+
/* z-index: 100; */
|
42
|
+
overflow: visible;
|
43
|
+
}
|
44
|
+
|
45
|
+
.timestamps .timestamp {
|
46
|
+
font-size: 0.8em;
|
47
|
+
width: 100%;
|
48
|
+
position: relative;
|
49
|
+
height: calc(var(--hour-scale) * 1px);
|
50
|
+
/* z-index: 100; */
|
51
|
+
overflow: visible;
|
52
|
+
}
|
53
|
+
|
54
|
+
.timestamp .label {
|
55
|
+
margin-top: -0.5em;
|
56
|
+
/* z-index: 1000; */
|
57
|
+
}
|
58
|
+
|
59
|
+
|
60
|
+
.timestamps .timestamp::before {
|
61
|
+
content: "";
|
62
|
+
position: absolute;
|
63
|
+
/* top: 0.5em; */
|
64
|
+
right: 0;
|
65
|
+
left: 45px;
|
66
|
+
height: 1px;
|
67
|
+
background-color: #ccc;
|
68
|
+
opacity: 0.5;
|
69
|
+
}
|
70
|
+
|
71
|
+
.timestamps .quarters {
|
72
|
+
position: absolute;
|
73
|
+
top: 0;
|
74
|
+
right: 10px;
|
75
|
+
left: 55px;
|
76
|
+
bottom: 0;
|
77
|
+
display: flex;
|
78
|
+
flex-direction: column;
|
79
|
+
flex-grow: 1;
|
80
|
+
}
|
81
|
+
|
82
|
+
.timestamps .quarters .quarter {
|
83
|
+
flex-grow: 1;
|
84
|
+
max-height: 25%;
|
85
|
+
/* position: absolute;
|
86
|
+
top: 0;
|
87
|
+
right: 0;
|
88
|
+
left: 0;
|
89
|
+
bottom: 0; */
|
90
|
+
}
|
91
|
+
|
92
|
+
.timestamps .quarters .quarter:not(.selected):hover {
|
93
|
+
/* border: 1px solid black; */
|
94
|
+
/* cursor: pointer; */
|
95
|
+
/* background-color: #e5e5e5; */
|
96
|
+
}
|
97
|
+
|
98
|
+
.timestamps .quarters .quarter.selected {
|
99
|
+
border-left: 1px solid black;
|
100
|
+
border-right: 1px solid black;
|
101
|
+
background-color: #e5e5e5;
|
102
|
+
}
|
103
|
+
|
104
|
+
.timestamps .quarters .quarter.selected.first-selection {
|
105
|
+
border-top: 1px solid black;
|
106
|
+
}
|
107
|
+
|
108
|
+
.timestamps .quarters .quarter.selected.last-selection {
|
109
|
+
border-bottom: 1px solid black;
|
110
|
+
}
|
111
|
+
|
112
|
+
.timestamps .quarters .quarter .hover-content {
|
113
|
+
display: none;
|
114
|
+
padding: 4px;
|
115
|
+
|
116
|
+
/* height: 100%; */
|
117
|
+
}
|
118
|
+
|
119
|
+
.timestamps .quarters .quarter.first-selection .hover-content,
|
120
|
+
.timestamps .quarters .quarter.last-selection .hover-content {
|
121
|
+
display: initial;
|
122
|
+
}
|
@@ -0,0 +1,54 @@
|
|
1
|
+
module TimeTable
|
2
|
+
module TimeTableHelper
|
3
|
+
def time_table(date = nil, scale: 100, events: [], &block)
|
4
|
+
# @time_table = TimeTable.new
|
5
|
+
# @time_table.scale = scale
|
6
|
+
timetable = Timetable.new(date, scale: scale)
|
7
|
+
render "time_table/time_table", timetable: timetable, events: events, &block
|
8
|
+
end
|
9
|
+
|
10
|
+
def hours_in_day
|
11
|
+
end
|
12
|
+
|
13
|
+
|
14
|
+
class Timetable
|
15
|
+
attr_accessor :start_time, :end_time, :segment_size, :segment_scale, :clip_size, :clock_type
|
16
|
+
|
17
|
+
def initialize(date = nil, **options)
|
18
|
+
@start_time = options[:start_time] || 0
|
19
|
+
@end_time = options[:end_time] || 1440
|
20
|
+
@start_time = date.beginning_of_day if date
|
21
|
+
@end_time = date.end_of_day if date
|
22
|
+
@segment_size = options[:segment_size] || 60
|
23
|
+
@segment_scale = options[:scale] || 100
|
24
|
+
@clip_size = options[:clip_size] || 15
|
25
|
+
@clock_type = options[:clock_type] || :meridian
|
26
|
+
end
|
27
|
+
|
28
|
+
def segments
|
29
|
+
@start_time.step(@end_time, @segment_size).map do |time|
|
30
|
+
if @clock_type == :meridian
|
31
|
+
time_in_meridian(time)
|
32
|
+
else
|
33
|
+
time_in_24_hour(time)
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
37
|
+
|
38
|
+
def time_in_meridian(time)
|
39
|
+
hour = time / 60
|
40
|
+
minute = time % 60
|
41
|
+
period = hour < 12 ? "AM" : "PM"
|
42
|
+
hour = hour % 12
|
43
|
+
hour = 12 if hour == 0
|
44
|
+
"#{hour}:#{format('%02d', minute)} #{period}"
|
45
|
+
end
|
46
|
+
|
47
|
+
def time_in_24_hour(time)
|
48
|
+
hour = time / 60
|
49
|
+
minute = time % 60
|
50
|
+
"#{format('%02d', hour)}:#{format('%02d', minute)}"
|
51
|
+
end
|
52
|
+
end
|
53
|
+
end
|
54
|
+
end
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title>Time table</title>
|
5
|
+
<%= csrf_meta_tags %>
|
6
|
+
<%= csp_meta_tag %>
|
7
|
+
|
8
|
+
<%= yield :head %>
|
9
|
+
|
10
|
+
<%= stylesheet_link_tag "time_table/application", media: "all" %>
|
11
|
+
</head>
|
12
|
+
<body>
|
13
|
+
|
14
|
+
<%= yield %>
|
15
|
+
|
16
|
+
</body>
|
17
|
+
</html>
|
@@ -0,0 +1,32 @@
|
|
1
|
+
<%= content_tag(:div, class: "timetable", data: {
|
2
|
+
controller: "time-table",
|
3
|
+
action: "
|
4
|
+
mousedown->time-table#startDragEvent
|
5
|
+
mouseup->time-table#stopDragEvent
|
6
|
+
mousemove->time-table#drag
|
7
|
+
",
|
8
|
+
time_table_drag_event_param: "create",
|
9
|
+
timetable_clip_size: timetable.clip_size,
|
10
|
+
timetable_scale: timetable.segment_scale,
|
11
|
+
timetable_start_time: timetable.start_time.iso8601,
|
12
|
+
timetable_end_time: timetable.end_time.iso8601,
|
13
|
+
}, style: "--hour-scale: #{timetable.segment_scale};") do %>
|
14
|
+
|
15
|
+
<div class="timestamps">
|
16
|
+
<% 24.times do |hour| %>
|
17
|
+
<div class="timestamp">
|
18
|
+
<div class="label">
|
19
|
+
<%= hour == 0 ? "12 AM" : (hour > 12 ? "#{hour - 12} PM" : "#{hour} AM") %>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
<% end %>
|
23
|
+
</div>
|
24
|
+
|
25
|
+
<div class="timetable-canvas" data-time-table-target="canvas">
|
26
|
+
<div class="timetable-events" data-time-table-target="eventsList">
|
27
|
+
<% events.each do |event| %>
|
28
|
+
<%= yield event %>
|
29
|
+
<% end %>
|
30
|
+
</div>
|
31
|
+
</div>
|
32
|
+
<% end %>
|
data/config/importmap.rb
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
pin "time_table/application", preload: true
|
data/config/routes.rb
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
module TimeTable
|
2
|
+
class Engine < ::Rails::Engine
|
3
|
+
isolate_namespace TimeTable
|
4
|
+
|
5
|
+
config.to_prepare do
|
6
|
+
helper_files = Dir.entries(TimeTable::Engine.root.join('app/helpers/time_table')).each do |file|
|
7
|
+
if file =~ /_helper.rb$/
|
8
|
+
::ApplicationController.helper("time_table/#{file.gsub('.rb', '')}".camelize.constantize)
|
9
|
+
end
|
10
|
+
end
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
data/lib/time_table.rb
ADDED
metadata
ADDED
@@ -0,0 +1,85 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: time_table
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Joshua Hadik
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2025-04-27 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: rails
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 8.0.2
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ">="
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: 8.0.2
|
27
|
+
description: Rails gem for creating time tables.
|
28
|
+
email:
|
29
|
+
- josh.hadik@gmail.com
|
30
|
+
executables: []
|
31
|
+
extensions: []
|
32
|
+
extra_rdoc_files: []
|
33
|
+
files:
|
34
|
+
- MIT-LICENSE
|
35
|
+
- README.md
|
36
|
+
- Rakefile
|
37
|
+
- app/assets/config/time_table_manifest.js
|
38
|
+
- app/assets/javascript/application.js
|
39
|
+
- app/assets/javascript/controllers/application.js
|
40
|
+
- app/assets/javascript/controllers/index.js
|
41
|
+
- app/assets/javascript/controllers/time_table_controller.js
|
42
|
+
- app/assets/stylesheets/time_table/application.css
|
43
|
+
- app/assets/stylesheets/time_table/time_table.css
|
44
|
+
- app/controllers/time_table/application_controller.rb
|
45
|
+
- app/helpers/time_table/application_helper.rb
|
46
|
+
- app/helpers/time_table/time_table_helper.rb
|
47
|
+
- app/jobs/time_table/application_job.rb
|
48
|
+
- app/mailers/time_table/application_mailer.rb
|
49
|
+
- app/models/time_table/application_record.rb
|
50
|
+
- app/views/layouts/time_table/application.html.erb
|
51
|
+
- app/views/time_table/_time_table.html.erb
|
52
|
+
- config/importmap.rb
|
53
|
+
- config/routes.rb
|
54
|
+
- lib/tasks/time_table_tasks.rake
|
55
|
+
- lib/time_table.rb
|
56
|
+
- lib/time_table/engine.rb
|
57
|
+
- lib/time_table/version.rb
|
58
|
+
homepage: https://github.com/JoshHadik/TimeTable
|
59
|
+
licenses:
|
60
|
+
- MIT
|
61
|
+
metadata:
|
62
|
+
allowed_push_host: https://rubygems.org
|
63
|
+
homepage_uri: https://github.com/JoshHadik/TimeTable
|
64
|
+
source_code_uri: https://github.com/JoshHadik/TimeTable
|
65
|
+
changelog_uri: https://github.com/JoshHadik/TimeTable
|
66
|
+
post_install_message:
|
67
|
+
rdoc_options: []
|
68
|
+
require_paths:
|
69
|
+
- lib
|
70
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
71
|
+
requirements:
|
72
|
+
- - ">="
|
73
|
+
- !ruby/object:Gem::Version
|
74
|
+
version: '0'
|
75
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
76
|
+
requirements:
|
77
|
+
- - ">="
|
78
|
+
- !ruby/object:Gem::Version
|
79
|
+
version: '0'
|
80
|
+
requirements: []
|
81
|
+
rubygems_version: 3.2.3
|
82
|
+
signing_key:
|
83
|
+
specification_version: 4
|
84
|
+
summary: Rails gem for creating time tables.
|
85
|
+
test_files: []
|