roll-maker/index.html at master · meeple142/roll-maker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>

<head>
    <title>Roll Maker</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="settings">
        <h1>Roll Maker</h1>
        <h3>General Instructions</h3>
        <p>ONLY CHROME, saves input, keep editing until you like what you see</p>
        <h3>Reset Inputs</h3>
        <p>If you want to reset the inputs to the defauts, click the button below.</p>
        <button id="resetInputs">Reset Inputs</button>

        <h3>People</h3>
        <p>Put one student on each line. You do not need to sort by name or days they attend, the program will do that.</p>
        <p>Type their name and then a comma and then either "m-f", "mwf", "tth" (can use upper or lower case).</p>
        <textarea id="names"></textarea>

        <h3>Date Format for Days Off and Comment Days</h3>
        <p>Put one day on each line. You do not need to sort at all, the program will do that.</p>
        <p>Type the name of the event then type a comma and then the date in this format "M-D-YY".</p>
        <p>Example: First Day, 8-29-17</p>
        <p>If there are multiple days with events of the same name then just add another comma and then next date in the same format "M-D-YY". You can add as many dates as you want this way.</p>
        <p>Example: Fun Day, 8-29-17, 8-31-17</p>
        <p>If there is an event that spans multiple days, like Christmas Break, you can enter it in with three dashes between the start and end date.</p>
        <p>Example: Christmas Break, 12-18-17---1-3-18</p>
        <p>Also keep in mind, if you have an event that has single days and spans days, you can mix the two as well for something like this.</p>
        <p>Example: PD Day, 10-12-17---10-16-17, 10-19-17, 10-24-17---11-1-17</p>

        <h3>Days Off</h3>
        <p>These are days off. Make sure you folow the format decribed above.</p>
        <textarea id="daysOff"></textarea>

        <h3>Comment Days</h3>
        <p>These days will show with a title above it. Only one title can be displayed. The day's title listed highest on the list will display if there is an overlap. Make sure you folow the format decribed above.</p>
        <textarea id="commentDays"></textarea>

        <h3>Date Range</h3>
        <p>Must have both dates and need to be in the format "M-D-YY".</p>
        <label>Start Date:
            <input type="text" id="dateStart">
        </label>
        <label>End Date:
            <input type="text" id="dateEnd">
        </label>

        <h3>Can't Be Here Highlighting</h3>
        <p>With the box checked, boxes where students can't be here will be darkened.</p>
        <label>I want Highlighting:
        <input type="checkbox" id="wantHightlighting">
    </label>
        <h3>Go!</h3>
        <p>Click the "Make Rolls" button to make the rolls.</p>
        <button id="makeRolls">Make Rolls</button>
        <h3>Print</h3>
        <p>After you have clicked the "Make Rolls" Button and you like what you see, click the "Print" button to bring up the print dialog.</p>
        <p>Or you can push ctrl-p or use the three dot menu at the top right then click print.</p>
        <button id="print">Print</button>
    </div>
    <div id="rollmakerOutput">
    </div>

    <!--  template  -->
    <script id="template" type="text/x-handlebars-template">
        <h2>Young Toddlers' Class Roll</h2>
        <h1>{{monthName weeks}}</h1>
        <table{{#if wantHightlighting}} class="wantHighlighing" {{/if}}>
            <!--  comment day -->
            <tr>
                <td></td>
                <td></td>
                {{#each weeks as |week|}} {{#each week as |day|}} {{#if @first}}
                <td class="weekendBorder">{{else}}
                    <td>{{/if}} {{#if comment}}
                        <div>{{comment}}</div>{{/if}}

                    </td>
                    {{/each}} {{/each}}
            </tr>
            <!--  days of week -->
            <tr>
                <td></td>
                <td></td>
                {{#each weeks as |week|}} {{#each week as |day|}} {{#if @first}}
                <td class="weekendBorder">{{else}}
                    <td>{{/if}} {{dayLetter day}}</td>
                    {{/each}} {{/each}}
            </tr>
            <!--  day of month -->
            <tr>
                <td></td>
                <td></td>
                {{#each weeks as |week|}} {{#each week as |day|}} {{#if @first}}
                <td class="weekendBorder">{{else}}
                    <td>{{/if}} {{dayNumber day}}</td>
                    {{/each}} {{/each}}
            </tr>
            <!--  a row for each person -->
            {{#each peopleGroups as |group|}} {{#each people}}
            <tr class='{{group.name}} {{#if @first}}peopleGroup{{/if}}'>
                <td>{{name}}</td>
                <td>{{daysPresent}}</td>
                {{#each ../../weeks as |week|}} {{#each week as |day|}} {{td}} {{/each}} {{/each}}

            </tr>
            {{/each}} {{/each}}

            </table>

    </script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/3.0.3/moment-range.min.js"></script>
    <script src="roll-maker.js"></script>
</body>

</html>