Finished initial version of the client-side UI.
Also moved to an automated build using make.
This commit is contained in:
Jonathan Bernard
parent
fd0e937eeb
commit
3b0632a151
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
*.sw?
|
||||||
|
.sass-cache
|
||||||
|
build/
|
||||||
14
Makefile
Normal file
14
Makefile
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
build :
|
||||||
|
mkdir -p build/css
|
||||||
|
cp src/www/*.* build
|
||||||
|
cp -r src/www/js build
|
||||||
|
# cp -r resources/* build/.
|
||||||
|
sass src/www/css/nursery-schedule.scss build/css/nursery-schedule.css
|
||||||
|
sass src/www/css/schedule-maker.scss build/css/schedule-maker.css
|
||||||
|
|
||||||
|
clean :
|
||||||
|
-rm -r build
|
||||||
|
|
||||||
|
local-deploy: build
|
||||||
|
cp -r build ~/temp/server
|
||||||
|
ssh jdb-server 'rm -r ~/public_html/nursery-schedule; mv temp/build ~/public_html/nursery-schedule'
|
||||||
177
index.html
177
index.html
@ -1,177 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" type="text/css" href="nursery-schedule.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<section class=sundays>
|
|
||||||
<div class=first>
|
|
||||||
<h3>First Sunday, <span class=date>Oct. 6th<span></h3>
|
|
||||||
<div class=am>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Toddlers</h5></li>
|
|
||||||
<li>Sara Bernard</li>
|
|
||||||
<li>Priscilla Reid</li>
|
|
||||||
<li>Becca Torres</li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Infants</h5></li>
|
|
||||||
<li>Latonya Kirton</li>
|
|
||||||
<li>Susan Vacca</li>
|
|
||||||
<li>Brandie Kristoff</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class=pm>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Evening Service</h5></li>
|
|
||||||
<li>Susan Miller</li>
|
|
||||||
<li><em>TBD</em></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=second>
|
|
||||||
<h3>Second Sunday, <span class=date>Oct. 13th</span></h3>
|
|
||||||
<div class=am>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Toddlers</h5></li>
|
|
||||||
<li>Sara Bernard</li>
|
|
||||||
<li>Priscilla Reid</li>
|
|
||||||
<li>Rebecca Dombroski</li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Infants</h5></li>
|
|
||||||
<li>Latonya Kirton</li>
|
|
||||||
<li>Susan Vacca</li>
|
|
||||||
<li>Mila Hill</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class=pm>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Evening Service</h5></li>
|
|
||||||
<li>Zoe Torres</li>
|
|
||||||
<li>Hannah Torres</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=third>
|
|
||||||
<h3>Third Sunday, <span class=date>Oct. 20th</span></h3>
|
|
||||||
<div class=am>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Toddlers</h5></li>
|
|
||||||
<li>Sara Bernard</li>
|
|
||||||
<li>Priscilla Reid</li>
|
|
||||||
<li>Della Borrego</li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Infants</h5></li>
|
|
||||||
<li>Latonya Kirton</li>
|
|
||||||
<li>Susan Vacca</li>
|
|
||||||
<li>Deborah McDonald</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class=pm>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Evening Service</h5></li>
|
|
||||||
<li><em>TBD</em></li>
|
|
||||||
<li>Alayna Robert</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=fourth>
|
|
||||||
<h3>Fourth Sunday, <span class=date>Oct. 27th</span></h3>
|
|
||||||
<div class=am>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Toddlers</h5></li>
|
|
||||||
<li>Sara Bernard</li>
|
|
||||||
<li>Priscilla Reid</li>
|
|
||||||
<li><em>TBD</em></li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Infants</h5></li>
|
|
||||||
<li>Latonya Kirton</li>
|
|
||||||
<li>Susan Vacca</li>
|
|
||||||
<li>Crystal Johnson</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class=pm>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Evening Service</h5></li>
|
|
||||||
<li>Deidra Dawson<li>
|
|
||||||
<li>Shekinah Dawson</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=fifth>
|
|
||||||
<h3>Fifth Sunday</h3>
|
|
||||||
<div class=am>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Toddlers</h5></li>
|
|
||||||
<li>Sara Bernard</li>
|
|
||||||
<li>Priscilla Reid</li>
|
|
||||||
<li>Julie Froese</li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Infants</h5></li>
|
|
||||||
<li>Latonya Kirton</li>
|
|
||||||
<li>Susan Vacca</li>
|
|
||||||
<li><em>TBD</em></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class=pm>
|
|
||||||
<ul>
|
|
||||||
<li><h5>Evening Service</h5></li>
|
|
||||||
<li><em>TBD</em><li>
|
|
||||||
<li><em>TBD</em></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class=wednesdays>
|
|
||||||
<div class=first>
|
|
||||||
<h3>First Wednesday, <span class=date>Oct. 2nd</span></h3>
|
|
||||||
<ul>
|
|
||||||
<li>Courtney or Bryan Bootka</li>
|
|
||||||
<li>Gabby Galvez</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=second>
|
|
||||||
<h3>Second Wednesday, <span class=date>Oct. 9th</span></h3>
|
|
||||||
<ul>
|
|
||||||
<li>Reeta or Lionel Aguilar</li>
|
|
||||||
<li>Stephanie Langley</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=third>
|
|
||||||
<h3>Third Wednesday, <span class=date>Oct. 16th</span></h3>
|
|
||||||
<ul>
|
|
||||||
<li>Christina Grooms</li>
|
|
||||||
<li>Lanell Hanson</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=fourth>
|
|
||||||
<h3>Fourth Wednesday, <span class=date>Oct. 23rd</span></h3>
|
|
||||||
<ul>
|
|
||||||
<li>Cassie Hernandez</li>
|
|
||||||
<li>Regena Dumas</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class=fifth>
|
|
||||||
<h3>Fifth Wednesday, <span class=date>Oct. 30th</span></h3>
|
|
||||||
<ul>
|
|
||||||
<li>Regina Noble</li>
|
|
||||||
<li><em>TBD</em></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -3,6 +3,10 @@
|
|||||||
* @author Jonathan Bernard <jdbernard@gmail.com>
|
* @author Jonathan Bernard <jdbernard@gmail.com>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
// Fonts
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Abel|Lato|Josefin+Sans:400,600|Titillium+Web:400,300,600|Open+Sans|Raleway:400,600,500|Nunito:300,400|Oxygen:400,700);
|
||||||
|
|
||||||
|
|
||||||
/// Global Rules
|
/// Global Rules
|
||||||
* {
|
* {
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
@ -11,18 +15,34 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0; }
|
padding: 0; }
|
||||||
|
|
||||||
|
/* HTML5 elements */
|
||||||
|
article,aside,details,figcaption,figure,
|
||||||
|
footer,header,hgroup,menu,nav,section {
|
||||||
|
display:block; }
|
||||||
|
|
||||||
html { font-size: 90%; }
|
html { font-size: 90%; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Abel";
|
||||||
|
line-height: 1.1em; }
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: small;
|
||||||
|
font-weight: normal;
|
||||||
|
text-decoration: underline; }
|
||||||
|
|
||||||
|
body.alt {
|
||||||
|
font-family: "Nunito";
|
||||||
|
font-weight: 300;
|
||||||
|
|
||||||
|
h3 { font-weight: 400; }
|
||||||
|
h5 { font-weight: 300; } }
|
||||||
|
|
||||||
/*html {
|
/*html {
|
||||||
background-color: $bgColor;
|
background-color: $bgColor;
|
||||||
color: $fgColor;
|
color: $fgColor;
|
||||||
font-size: 150%; }*/
|
font-size: 150%; }*/
|
||||||
|
|
||||||
/* HTML5 elements */
|
|
||||||
article,aside,details,figcaption,figure,
|
|
||||||
footer,header,hgroup,menu,nav,section {
|
|
||||||
display:block; }
|
|
||||||
|
|
||||||
.sundays, .wednesdays { }
|
.sundays, .wednesdays { }
|
||||||
|
|
||||||
.first, .second, .third, .fourth, .fifth {
|
.first, .second, .third, .fourth, .fifth {
|
||||||
@ -31,16 +51,15 @@ footer,header,hgroup,menu,nav,section {
|
|||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
width: 20em; }
|
width: 20em; }
|
||||||
|
|
||||||
.date {
|
.date { }
|
||||||
float: right;
|
|
||||||
margin-right: 5rem; }
|
|
||||||
|
|
||||||
ul { list-style: none; }
|
ul { list-style: none; }
|
||||||
|
|
||||||
.am ul {
|
.toddlers, .infants {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
width: 9rem; }
|
width: 9rem; }
|
||||||
|
|
||||||
div.am, div.pm {
|
div.am, div.pm, .wednesdays ul {
|
||||||
margin-top: 0.5rem; }
|
margin-top: 0.5rem; }
|
||||||
|
|
||||||
108
src/www/css/schedule-maker.scss
Normal file
108
src/www/css/schedule-maker.scss
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
/**
|
||||||
|
* Nursery Schedule Maker
|
||||||
|
* @author Jonathan Bernard <jdbernard@gmail.com>
|
||||||
|
*/
|
||||||
|
|
||||||
|
/// Global Rules
|
||||||
|
* {
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
/* HTML5 elements */
|
||||||
|
article,aside,details,figcaption,figure,
|
||||||
|
footer,header,hgroup,menu,nav,section {
|
||||||
|
display:block; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
line-height: normal;
|
||||||
|
margin: 2rem; }
|
||||||
|
|
||||||
|
.header { position: relative; }
|
||||||
|
|
||||||
|
.load-dialog {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
bottom: 0;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
div {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 4rem;
|
||||||
|
|
||||||
|
span {
|
||||||
|
background: whitesmoke;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 1em;
|
||||||
|
|
||||||
|
#fileLoad { width: 30rem; } } } }
|
||||||
|
|
||||||
|
.tools {
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
input[type="date"] {
|
||||||
|
border: solid thin gray;
|
||||||
|
border-radius: 3px; }
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
display: inline-block; } }
|
||||||
|
|
||||||
|
.publish { text-decoration: line-through; } }
|
||||||
|
|
||||||
|
.sundays { border-right: solid thin lightgray; }
|
||||||
|
.wednesdays { padding-left: 2rem; }
|
||||||
|
|
||||||
|
.sundays, .wednesdays {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 1.1rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 49%;
|
||||||
|
|
||||||
|
.teacher-needed {
|
||||||
|
color: #A00;
|
||||||
|
font-style: italic; }
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
input.name {
|
||||||
|
display: none;
|
||||||
|
width: 8rem; }
|
||||||
|
|
||||||
|
.clone, .remove {
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
position: absolute; }
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.clone, .remove { display: inline-block; } }
|
||||||
|
|
||||||
|
&.editing {
|
||||||
|
input.name { display: inline-block; }
|
||||||
|
span.name { display: none; } }
|
||||||
|
|
||||||
|
&.editing:hover {
|
||||||
|
.clone, .remove { display: none; } } } }
|
||||||
|
|
||||||
|
.sundays {
|
||||||
|
.remove { left: 7.5rem; }
|
||||||
|
.clone { left: 6.5rem; } }
|
||||||
|
|
||||||
|
.wednesdays {
|
||||||
|
.remove { left: 11.5rem; }
|
||||||
|
.clone { left: 10.5rem; } }
|
||||||
197
src/www/index.html
Normal file
197
src/www/index.html
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/nursery-schedule.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class=sundays>
|
||||||
|
<div class=first>
|
||||||
|
<h3>First Sunday, <span class=date>Oct. 6th<span></h3>
|
||||||
|
<div class=am>
|
||||||
|
<div class=toddlers>
|
||||||
|
<h5>Toddlers</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Sara Bernard</li>
|
||||||
|
<li>Priscilla Reid</li>
|
||||||
|
<li>Becca Torres</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class=infants>
|
||||||
|
<h5>Infants</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Latonya Kirton</li>
|
||||||
|
<li>Susan Vacca</li>
|
||||||
|
<li>Brandie Kristoff</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=pm>
|
||||||
|
<h5>Evening Service</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Susan Miller</li>
|
||||||
|
<li><em>TBD</em></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=second>
|
||||||
|
<h3>Second Sunday, <span class=date>Oct. 13th</span></h3>
|
||||||
|
<div class=am>
|
||||||
|
<div class=toddlers>
|
||||||
|
<h5>Toddlers</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Sara Bernard</li>
|
||||||
|
<li>Priscilla Reid</li>
|
||||||
|
<li>Rebecca Dombroski</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class=infants>
|
||||||
|
<h5>Infants</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Latonya Kirton</li>
|
||||||
|
<li>Susan Vacca</li>
|
||||||
|
<li>Mila Hill</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=pm>
|
||||||
|
<h5>Evening Service</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Zoe Torres</li>
|
||||||
|
<li>Hannah Torres</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=third>
|
||||||
|
<h3>Third Sunday, <span class=date>Oct. 20th</span></h3>
|
||||||
|
<div class=am>
|
||||||
|
<div class=toddlers>
|
||||||
|
<h5>Toddlers</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Sara Bernard</li>
|
||||||
|
<li>Priscilla Reid</li>
|
||||||
|
<li>Della Borrego</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class=infants>
|
||||||
|
<h5>Infants</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Latonya Kirton</li>
|
||||||
|
<li>Susan Vacca</li>
|
||||||
|
<li>Deborah McDonald</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=pm>
|
||||||
|
<h5>Evening Service</h5>
|
||||||
|
<ul>
|
||||||
|
<li><em>TBD</em></li>
|
||||||
|
<li>Alayna Robert</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=fourth>
|
||||||
|
<h3>Fourth Sunday, <span class=date>Oct. 27th</span></h3>
|
||||||
|
<div class=am>
|
||||||
|
<div class=toddlers>
|
||||||
|
<h5>Toddlers</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Sara Bernard</li>
|
||||||
|
<li>Priscilla Reid</li>
|
||||||
|
<li><em>TBD</em></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class=infants>
|
||||||
|
<h5>Infants</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Latonya Kirton</li>
|
||||||
|
<li>Susan Vacca</li>
|
||||||
|
<li>Crystal Johnson</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=pm>
|
||||||
|
<h5>Evening Service</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Deidra Dawson</li>
|
||||||
|
<li>Shekinah Dawson</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=fifth>
|
||||||
|
<h3>Fifth Sunday</h3>
|
||||||
|
<div class=am>
|
||||||
|
<div class=toddlers>
|
||||||
|
<h5>Toddlers</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Sara Bernard</li>
|
||||||
|
<li>Priscilla Reid</li>
|
||||||
|
<li>Julie Froese</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class=infants>
|
||||||
|
<h5>Infants</h5>
|
||||||
|
<ul>
|
||||||
|
<li>Latonya Kirton</li>
|
||||||
|
<li>Susan Vacca</li>
|
||||||
|
<li><em>TBD</em></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=pm>
|
||||||
|
<h5>Evening Service</h5>
|
||||||
|
<ul>
|
||||||
|
<li><em>TBD</em></li>
|
||||||
|
<li><em>TBD</em></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class=wednesdays>
|
||||||
|
<div class=first>
|
||||||
|
<h3>First Wednesday, <span class=date>Oct. 2nd</span></h3>
|
||||||
|
<ul>
|
||||||
|
<li>Courtney or Bryan Bootka</li>
|
||||||
|
<li>Gabby Galvez</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=second>
|
||||||
|
<h3>Second Wednesday, <span class=date>Oct. 9th</span></h3>
|
||||||
|
<ul>
|
||||||
|
<li>Reeta or Lionel Aguilar</li>
|
||||||
|
<li>Stephanie Langley</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=third>
|
||||||
|
<h3>Third Wednesday, <span class=date>Oct. 16th</span></h3>
|
||||||
|
<ul>
|
||||||
|
<li>Christina Grooms</li>
|
||||||
|
<li>Lanell Hanson</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=fourth>
|
||||||
|
<h3>Fourth Wednesday, <span class=date>Oct. 23rd</span></h3>
|
||||||
|
<ul>
|
||||||
|
<li>Cassie Hernandez</li>
|
||||||
|
<li>Regena Dumas</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=fifth>
|
||||||
|
<h3>Fifth Wednesday, <span class=date>Oct. 30th</span></h3>
|
||||||
|
<ul>
|
||||||
|
<li>Regina Noble</li>
|
||||||
|
<li><em>TBD</em></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
254
src/www/js/schedule-maker.js
Normal file
254
src/www/js/schedule-maker.js
Normal file
@ -0,0 +1,254 @@
|
|||||||
|
(function() {
|
||||||
|
var root = this;
|
||||||
|
|
||||||
|
var SM = root.ScheduleMaker = {};
|
||||||
|
|
||||||
|
SM.minSunAmTeachers = 3;
|
||||||
|
SM.minSunPmTeachers = 2;
|
||||||
|
SM.minWedTeachers = 2;
|
||||||
|
|
||||||
|
SM.views = [];
|
||||||
|
|
||||||
|
SM.ServiceView = function(element) {
|
||||||
|
|
||||||
|
// #### Set properties
|
||||||
|
this.el = element;
|
||||||
|
this.$el = $(element);
|
||||||
|
var thisView = this;
|
||||||
|
|
||||||
|
this.$el.attr('viewId', SM.views.length)
|
||||||
|
SM.views.push(thisView);
|
||||||
|
|
||||||
|
// #### Set methods
|
||||||
|
this.findTeacherMinimum = function($ulEl) {
|
||||||
|
if ($ulEl.parents('.am').length > 0) {
|
||||||
|
return SM.minSunAmTeachers; }
|
||||||
|
else if ($ulEl.parents('.pm').length > 0) {
|
||||||
|
return SM.minSunPmTeachers; }
|
||||||
|
else return SM.minWedTeachers; };
|
||||||
|
|
||||||
|
this.volunteersAdded = function(event) {
|
||||||
|
// event.target should refer to the ul receiving the item.
|
||||||
|
var $ulEl = $(event.target);
|
||||||
|
|
||||||
|
if ($ulEl.find('li.teacher-needed').length > 0) {
|
||||||
|
$ulEl.find('li.teacher-needed').first().remove();
|
||||||
|
$ulEl.sortable("refresh"); } };
|
||||||
|
|
||||||
|
this.updatePlaceholders = function(event) {
|
||||||
|
// event.target should refer to the ul receiving the item.
|
||||||
|
var $ulEl = $(event.target);
|
||||||
|
|
||||||
|
while ($ulEl.find('li').length <
|
||||||
|
this.findTeacherMinimum($ulEl)) {
|
||||||
|
var $li = $(document.createElement('li'));
|
||||||
|
$li.addClass('teacher-needed');
|
||||||
|
$li.text('teacher needed');
|
||||||
|
$li.on('dblclick', this.editPlaceholder);
|
||||||
|
$ulEl.append($li[0]);
|
||||||
|
$ulEl.sortable("refresh"); } };
|
||||||
|
|
||||||
|
this.deleteName = function (event) {
|
||||||
|
// event.target is the ul > li > span element containing the 'X'
|
||||||
|
var ulEl = $(event.target).closest('ul')[0];
|
||||||
|
$(event.target).closest('li').remove();
|
||||||
|
this.updatePlaceholders({target: ulEl})};
|
||||||
|
|
||||||
|
this.copyName = function (event) {
|
||||||
|
// event.target is the ul > li > span element containing the 'C'
|
||||||
|
var $liEl = $(event.target).closest('li');
|
||||||
|
var $ulEl = $liEl.closest('ul');
|
||||||
|
$ulEl.append($liEl.clone(true));
|
||||||
|
this.volunteersAdded({target: $ulEl[0]}); };
|
||||||
|
|
||||||
|
this.editName = function(event) {
|
||||||
|
// event.target is the li > span.name element that was clicked.
|
||||||
|
var $spanEl = $(event.target);
|
||||||
|
var $liEl = $spanEl.parent();
|
||||||
|
$liEl.find('input.name').val($spanEl.text());
|
||||||
|
$liEl.addClass('editing');
|
||||||
|
$liEl.find('input.name').focus(); };
|
||||||
|
|
||||||
|
this.saveName = function(event) {
|
||||||
|
// event.target is the li > input.name element that was blurred.
|
||||||
|
var $inputEl = $(event.target);
|
||||||
|
var $liEl = $inputEl.parent();
|
||||||
|
$liEl.find('span.name').text($inputEl.val());
|
||||||
|
$liEl.removeClass('editing'); };
|
||||||
|
|
||||||
|
this.editPlaceholder = function(event) {
|
||||||
|
var liEl = this.newName(event);
|
||||||
|
this.editName({target: $(liEl).find('span.name')[0]}); };
|
||||||
|
|
||||||
|
this.newName = function(event) {
|
||||||
|
var $ulEl = $(event.target).closest('ul');
|
||||||
|
var $liEl = $(document.createElement('li'));
|
||||||
|
$liEl.append('<span class=name></span><input class=name>' +
|
||||||
|
'<span class=clone>C</span><span class=remove>X</span>');
|
||||||
|
$liEl.find('span.name').on('dblclick', this.editName);
|
||||||
|
$liEl.find('input.name').on('blur', this.saveName);
|
||||||
|
$liEl.find('.remove').on('click', this.deleteName);
|
||||||
|
$liEl.find('.clone').on('click', this.copyName);
|
||||||
|
|
||||||
|
$ulEl.append($liEl[0]);
|
||||||
|
|
||||||
|
this.volunteersAdded({target: $ulEl[0]});
|
||||||
|
$ulEl.sortable("refresh");
|
||||||
|
return $liEl[0]; };
|
||||||
|
|
||||||
|
var funs = ['newName', 'saveName', 'editName', 'deleteName',
|
||||||
|
'copyName', 'editPlaceholder', 'volunteersAdded',
|
||||||
|
'updatePlaceholders'];
|
||||||
|
funs.forEach(function(funName) {
|
||||||
|
thisView[funName] = thisView[funName].bind(thisView); });
|
||||||
|
|
||||||
|
// #### Initialize the existing view objects.
|
||||||
|
var $volunteerLists = this.$el.find('ul');
|
||||||
|
$volunteerLists.sortable({
|
||||||
|
connectWith: 'ul',
|
||||||
|
cancel: 'li.teacher-needed' });
|
||||||
|
|
||||||
|
// updatePlaceholders adds place-holders if there are not enough
|
||||||
|
// teachers. We call this once during initialization to pad out the
|
||||||
|
// lists to the minimums
|
||||||
|
$volunteerLists.each(function(idx) {
|
||||||
|
thisView.updatePlaceholders({target: this}); });
|
||||||
|
|
||||||
|
// #### Event handlers
|
||||||
|
|
||||||
|
// Handlers to refresh the missing teacher spots when someone is
|
||||||
|
// drag-and-dropped.
|
||||||
|
$volunteerLists.on("sortreceive", this.volunteersAdded);
|
||||||
|
$volunteerLists.on("sortremove", this.updatePlaceholders);
|
||||||
|
|
||||||
|
// Handler to remove names when the 'X' is clicked.
|
||||||
|
this.$el.find('.remove').on('click', this.deleteName);
|
||||||
|
|
||||||
|
// Handler to edit names when they are double-clicked.
|
||||||
|
this.$el.find('span.name').on('dblclick', this.editName);
|
||||||
|
|
||||||
|
// Handler to save the editing changes back to the li
|
||||||
|
this.$el.find('input.name').on('blur', this.saveName);
|
||||||
|
};
|
||||||
|
|
||||||
|
SM.saveSchedule = function() {
|
||||||
|
|
||||||
|
// Create the JSON object to serialize to the file.
|
||||||
|
var data = {};
|
||||||
|
|
||||||
|
// Save the date.
|
||||||
|
data.date = $('input[type=date]').val();
|
||||||
|
|
||||||
|
// Gather the sunday data
|
||||||
|
data.sundays = {};
|
||||||
|
$('.sundays > div').each(function() {
|
||||||
|
var divEl = this;
|
||||||
|
var $divEl = $(this);
|
||||||
|
|
||||||
|
data.sundays[divEl.className] = {};
|
||||||
|
|
||||||
|
// Save each of the service data.
|
||||||
|
$divEl.find('ul').each(function() {
|
||||||
|
var ulEl = this;
|
||||||
|
var $ulEl = $(this);
|
||||||
|
|
||||||
|
var roomName = 'pm';
|
||||||
|
if ($ulEl.parents('.toddlers').length > 0) roomName = 'toddlers';
|
||||||
|
else if ($ulEl.parents('.infants').length > 0) roomName = 'infants';
|
||||||
|
|
||||||
|
data.sundays[divEl.className][roomName] =
|
||||||
|
$ulEl.find('span.name').map(function() {
|
||||||
|
return $(this).text(); }).get();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Gather Wednesday data
|
||||||
|
data.wednesdays = {};
|
||||||
|
$('.wednesdays > div').each(function() {
|
||||||
|
var divEl = this;
|
||||||
|
var $divEl = $(this);
|
||||||
|
|
||||||
|
// Save the service data.
|
||||||
|
data.wednesdays[divEl.className] = $divEl.find('span.name').map(
|
||||||
|
function() { return $(this).text(); }).get(); });
|
||||||
|
|
||||||
|
var jsonData = JSON.stringify(data);
|
||||||
|
var jsonBlob = new Blob([jsonData], {type: 'text/plain'});
|
||||||
|
|
||||||
|
// Save the file to disk by presenting it as a download to the user.
|
||||||
|
var linkEl = document.createElement('a');
|
||||||
|
var $linkEl = $(linkEl);
|
||||||
|
linkEl.download = "nursery-schedule-" + $('input[type=date]').val();
|
||||||
|
linkEl.innerHTML = "Download Schedule Data"
|
||||||
|
|
||||||
|
if (window.webkitURL != null) {
|
||||||
|
linkEl.href = window.webkitURL.createObjectURL(jsonBlob); }
|
||||||
|
else {
|
||||||
|
linkEl.href = window.URL.createObjectURL(jsonBlob);
|
||||||
|
$(linkEl).on("click", function (e) { $(e.target).remove(); });
|
||||||
|
$(linkEl).css('display', 'none');
|
||||||
|
$('body').append(linkEl); }
|
||||||
|
linkEl.click(); };
|
||||||
|
|
||||||
|
SM.hideLoadDialog = function(e) {
|
||||||
|
if (e.target == $('#fileLoad')[0]) return;
|
||||||
|
$('.load-dialog').fadeOut(); };
|
||||||
|
|
||||||
|
SM.showLoadDialog = function() { $('.load-dialog').fadeIn(); };
|
||||||
|
|
||||||
|
SM.loadSchedule = function() {
|
||||||
|
// Remove exsting data.
|
||||||
|
$('.sundays ul li, .wednesdays ul li').remove()
|
||||||
|
|
||||||
|
var fileName = $('#fileLoad')[0].files[0];
|
||||||
|
var fileReader = new FileReader();
|
||||||
|
|
||||||
|
fileReader.onload = function(e) {
|
||||||
|
var fileText = e.target.result;
|
||||||
|
var data = JSON.parse(fileText);
|
||||||
|
|
||||||
|
// Restore the date.
|
||||||
|
$('input[type=date]').val(data.date);
|
||||||
|
|
||||||
|
// Restore Sunday services
|
||||||
|
for(var day in data.sundays) {
|
||||||
|
for(var roomName in data.sundays[day]) {
|
||||||
|
var $divEl = $('.sundays .' + day);
|
||||||
|
var $ulEl = $divEl.find('.' + roomName + ' ul');
|
||||||
|
var view = SM.views[parseInt($divEl.attr('viewId'))];
|
||||||
|
data.sundays[day][roomName].forEach(function(personName) {
|
||||||
|
var liEl = view.newName({target: $ulEl[0]});
|
||||||
|
$(liEl).find('span.name').text(personName); });
|
||||||
|
view.updatePlaceholders({target: $ulEl[0]}); } }
|
||||||
|
|
||||||
|
// Restore Wednesday services
|
||||||
|
for(var day in data.wednesdays) {
|
||||||
|
var $divEl = $('.wednesdays .' + day);
|
||||||
|
var $ulEl = $divEl.find('ul');
|
||||||
|
var view = SM.views[parseInt($divEl.attr('viewId'))];
|
||||||
|
data.wednesdays[day].forEach(function(personName) {
|
||||||
|
var liEl = view.newName({target: $ulEl[0]});
|
||||||
|
$(liEl).find('span.name').text(personName); });
|
||||||
|
view.updatePlaceholders({target: $ulEl[0]}); } }
|
||||||
|
|
||||||
|
fileReader.readAsText(fileName, "UTF-8");
|
||||||
|
};
|
||||||
|
|
||||||
|
SM.publicShedule = function() {
|
||||||
|
// TODO
|
||||||
|
};
|
||||||
|
|
||||||
|
SM.init = function() {
|
||||||
|
// Create our ServiceViews
|
||||||
|
$('.sundays > div, .wednesdays > div').each(function(idx, elem) {
|
||||||
|
var view = new SM.ServiceView(elem); });
|
||||||
|
|
||||||
|
// Wire up our toolbar
|
||||||
|
$('.save').on('click', SM.saveSchedule);
|
||||||
|
$('.load').on('click', SM.showLoadDialog);
|
||||||
|
$('.publish').on('click', SM.publishSchedule);
|
||||||
|
$('.load-dialog').on('click', SM.hideLoadDialog);
|
||||||
|
$('.load-dialog a').on('click', SM.loadSchedule);
|
||||||
|
};
|
||||||
|
|
||||||
|
}).call(this);
|
||||||
182
src/www/schedule-maker.html
Normal file
182
src/www/schedule-maker.html
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/nursery-schedule.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/schedule-maker.css">
|
||||||
|
|
||||||
|
<!-- PROD
|
||||||
|
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.3/jquery.min.js" defer></script>
|
||||||
|
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" defer></script>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- DEV
|
||||||
|
-->
|
||||||
|
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js" defer></script>
|
||||||
|
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js" defer></script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="js/schedule-maker.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class=header>
|
||||||
|
<h1>Nursery Schedule Maker</h1>
|
||||||
|
<div class=tools><ul>
|
||||||
|
<h4 class=month>Creating the schedule for the month of: <input type=date></h4>
|
||||||
|
<li><a href="#" class=save>Save Schedule Data</a></li>
|
||||||
|
<li><a href="#" class=load>Load Schedule Data</a></li>
|
||||||
|
<li><a href="#" class=publish>Publish Schedule</a></li>
|
||||||
|
</ul></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class=sundays>
|
||||||
|
<div class=first>
|
||||||
|
<h3>First Sunday</h3>
|
||||||
|
<div class=am>
|
||||||
|
<div class=toddlers>
|
||||||
|
<h5>Toddlers</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class=infants>
|
||||||
|
<h5>Infants</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=pm>
|
||||||
|
<h5>Evening Service</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=second>
|
||||||
|
<h3>Second Sunday</h3>
|
||||||
|
<div class=am>
|
||||||
|
<div class=toddlers>
|
||||||
|
<h5>Toddlers</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class=infants>
|
||||||
|
<h5>Infants</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=pm>
|
||||||
|
<h5>Evening Service</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=third>
|
||||||
|
<h3>Third Sunday</h3>
|
||||||
|
<div class=am>
|
||||||
|
<div class=toddlers>
|
||||||
|
<h5>Toddlers</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class=infants>
|
||||||
|
<h5>Infants</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=pm>
|
||||||
|
<h5>Evening Service</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=fourth>
|
||||||
|
<h3>Fourth Sunday</h3>
|
||||||
|
<div class=am>
|
||||||
|
<div class=toddlers>
|
||||||
|
<h5>Toddlers</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class=infants>
|
||||||
|
<h5>Infants</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=pm>
|
||||||
|
<h5>Evening Service</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=fifth>
|
||||||
|
<h3>Fifth Sunday</h3>
|
||||||
|
<div class=am>
|
||||||
|
<div class=toddlers>
|
||||||
|
<h5>Toddlers</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class=infants>
|
||||||
|
<h5>Infants</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=pm>
|
||||||
|
<h5>Evening Service</h5>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class=wednesdays>
|
||||||
|
<div class=first>
|
||||||
|
<h3>First Wednesday</h3>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=second>
|
||||||
|
<h3>Second Wednesday</h3>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=third>
|
||||||
|
<h3>Third Wednesday</h3>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=fourth>
|
||||||
|
<h3>Fourth Wednesday</h3>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=fifth>
|
||||||
|
<h3>Fifth Wednesday</h3>
|
||||||
|
<ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class=load-dialog>
|
||||||
|
<div>
|
||||||
|
<span><input type=file id=fileLoad><a href="#">Load It!</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.onload = function() { ScheduleMaker.init(); };
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user