[MEF]+script

vnext
Paul Schneider 8 years ago
parent 48c7a163d0
commit b68a5274a0
17 changed files with 600 additions and 64 deletions

@ -4,35 +4,50 @@
ViewData["Title"] = "Edition du profile coiffeu(se|r)";
}
@section header {
<link rel="stylesheet" href="~/lib/jquery-timepicker/jquery.timepicker.css"></style>
}
@section scripts {
<script src="~/lib/jquery-timepicker/jquery.timepicker.min.js"></script>
<script src="~/lib/jonthornton-Datepair/datepair.min.js"></script>
<script src="~/lib/jonthornton-Datepair/jquery.datepair.min.js"></script>
<script>
$(document).ready(function(){
$('.timepicker').timepicker();
$('#datepair').datepair();
})
</script>
}
<h1>@ViewData["Title"]</h1>
<form asp-action="Edit">
<div class="form-horizontal">
<hr />
@Html.ValidationSummary()
<environment names="Development">
<fieldset><legend>Disponibilité</legend>
<div class="form-group">
<label asp-for="StartOfTheDay" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="StartOfTheDay" class="form-control" />
<span asp-validation-for="StartOfTheDay" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="StartOfTheDay" class="col-md-2 control-label"></label>
<label asp-for="EndOfTheDay" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="EndOfTheDay" class="form-control" />
<span asp-validation-for="EndOfTheDay" class="text-danger" />
<div class="col-md-10" id="datepair">
<input id="StartOfTheDay" name="aStartOfTheDay" class="timepicker form-control" />
<span asp-validation-for="StartOfTheDay" class="text-danger" ></span>
<input id="EndOfTheDay" name="aEndOfTheDay" class="timepicker form-control" />
<span asp-validation-for="EndOfTheDay" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="ActionDistance" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ActionDistance" class="form-control" />
<span asp-validation-for="ActionDistance" class="text-danger" />
<span asp-validation-for="ActionDistance" class="text-danger" ></span>
</div>
</div>
</fieldset>
</environment>
<fieldset><legend>Grille tarifaire</legend>
<h2>Divers</h2>
@ -43,14 +58,14 @@
<label asp-for="CarePrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="CarePrice" class="form-control" />
<span asp-validation-for="CarePrice" class="text-danger" />
<span asp-validation-for="CarePrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="ShampooPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ShampooPrice" class="form-control" />
<span asp-validation-for="ShampooPrice" class="text-danger" />
<span asp-validation-for="ShampooPrice" class="text-danger" ></span>
</div>
</div>
<h2>Techniques</h2>
@ -62,21 +77,21 @@
<label asp-for="HalfColorPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="HalfColorPrice" class="form-control" />
<span asp-validation-for="HalfColorPrice" class="text-danger" />
<span asp-validation-for="HalfColorPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="LongColorPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="LongColorPrice" class="form-control" />
<span asp-validation-for="LongColorPrice" class="text-danger" />
<span asp-validation-for="LongColorPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="ShortColorPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ShortColorPrice" class="form-control" />
<span asp-validation-for="ShortColorPrice" class="text-danger" />
<span asp-validation-for="ShortColorPrice" class="text-danger"></span>
</div>
</div>
@ -85,7 +100,7 @@
<label asp-for="HalfMultiColorPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="HalfMultiColorPrice" class="form-control" />
<span asp-validation-for="HalfMultiColorPrice" class="text-danger" />
<span asp-validation-for="HalfMultiColorPrice" class="text-danger" ></span>
</div>
</div>
@ -93,14 +108,14 @@
<label asp-for="LongMultiColorPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="LongMultiColorPrice" class="form-control" />
<span asp-validation-for="LongMultiColorPrice" class="text-danger" />
<span asp-validation-for="LongMultiColorPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="ShortMultiColorPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ShortMultiColorPrice" class="form-control" />
<span asp-validation-for="ShortMultiColorPrice" class="text-danger" />
<span asp-validation-for="ShortMultiColorPrice" class="text-danger" ></span>
</div>
</div>
@ -110,21 +125,21 @@
<label asp-for="HalfBalayagePrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="HalfBalayagePrice" class="form-control" />
<span asp-validation-for="HalfBalayagePrice" class="text-danger" />
<span asp-validation-for="HalfBalayagePrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="LongBalayagePrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="LongBalayagePrice" class="form-control" />
<span asp-validation-for="LongBalayagePrice" class="text-danger" />
<span asp-validation-for="LongBalayagePrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="ShortBalayagePrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ShortBalayagePrice" class="form-control" />
<span asp-validation-for="ShortBalayagePrice" class="text-danger" />
<span asp-validation-for="ShortBalayagePrice" class="text-danger" ></span>
</div>
</div>
<h2>Coiffage</h2>
@ -134,21 +149,21 @@
<label asp-for="HalfBrushingPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="HalfBrushingPrice" class="form-control" />
<span asp-validation-for="HalfBrushingPrice" class="text-danger" />
<span asp-validation-for="HalfBrushingPrice" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="LongBrushingPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="LongBrushingPrice" class="form-control" />
<span asp-validation-for="LongBrushingPrice" class="text-danger" />
<span asp-validation-for="LongBrushingPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="ShortBrushingPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ShortBrushingPrice" class="form-control" />
<span asp-validation-for="ShortBrushingPrice" class="text-danger" />
<span asp-validation-for="ShortBrushingPrice" class="text-danger" ></span>
</div>
</div>
<h4>Pour l'homme</h4>
@ -156,31 +171,31 @@
<label asp-for="ManBrushPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ManBrushPrice" class="form-control" />
<span asp-validation-for="ManBrushPrice" class="text-danger" />
<span asp-validation-for="ManBrushPrice" class="text-danger" ></span>
</div>
</div>
<h3>Mise en plis</h3>
<div class="form-group">
<label asp-for="LongFoldingPrice" class="col-md-2 control-label"></label>
<label asp-for="HalfFoldingPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="LongFoldingPrice" class="form-control" />
<span asp-validation-for="LongFoldingPrice" class="text-danger" />
<input asp-for="HalfFoldingPrice" class="form-control" />
<span asp-validation-for="HalfFoldingPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="HalfFoldingPrice" class="col-md-2 control-label"></label>
<label asp-for="LongFoldingPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="HalfFoldingPrice" class="form-control" />
<span asp-validation-for="HalfFoldingPrice" class="text-danger" />
<input asp-for="LongFoldingPrice" class="form-control" />
<span asp-validation-for="LongFoldingPrice" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="ShortFoldingPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ShortFoldingPrice" class="form-control" />
<span asp-validation-for="ShortFoldingPrice" class="text-danger" />
<span asp-validation-for="ShortFoldingPrice" class="text-danger"></span>
</div>
</div>
@ -190,21 +205,21 @@
<label asp-for="HalfDefrisPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="HalfDefrisPrice" class="form-control" />
<span asp-validation-for="HalfDefrisPrice" class="text-danger" />
<span asp-validation-for="HalfDefrisPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="LongDefrisPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="LongDefrisPrice" class="form-control" />
<span asp-validation-for="LongDefrisPrice" class="text-danger" />
<span asp-validation-for="LongDefrisPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="ShortDefrisPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ShortDefrisPrice" class="form-control" />
<span asp-validation-for="ShortDefrisPrice" class="text-danger" />
<span asp-validation-for="ShortDefrisPrice" class="text-danger" ></span>
</div>
</div>
@ -214,21 +229,21 @@
<label asp-for="HalfMechPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="HalfMechPrice" class="form-control" />
<span asp-validation-for="HalfMechPrice" class="text-danger" />
<span asp-validation-for="HalfMechPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="LongMechPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="LongMechPrice" class="form-control" />
<span asp-validation-for="LongMechPrice" class="text-danger" />
<span asp-validation-for="LongMechPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="ShortMechPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ShortMechPrice" class="form-control" />
<span asp-validation-for="ShortMechPrice" class="text-danger" />
<span asp-validation-for="ShortMechPrice" class="text-danger"></span>
</div>
</div>
@ -238,21 +253,21 @@
<label asp-for="HalfPermanentPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="HalfPermanentPrice" class="form-control" />
<span asp-validation-for="HalfPermanentPrice" class="text-danger" />
<span asp-validation-for="HalfPermanentPrice" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="LongPermanentPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="LongPermanentPrice" class="form-control" />
<span asp-validation-for="LongPermanentPrice" class="text-danger" />
<span asp-validation-for="LongPermanentPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="ShortPermanentPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ShortPermanentPrice" class="form-control" />
<span asp-validation-for="ShortPermanentPrice" class="text-danger" />
<span asp-validation-for="ShortPermanentPrice" class="text-danger"></span>
</div>
</div>
@ -262,21 +277,21 @@
<label asp-for="WomenHalfCutPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="WomenHalfCutPrice" class="form-control" />
<span asp-validation-for="WomenHalfCutPrice" class="text-danger" />
<span asp-validation-for="WomenHalfCutPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="WomenLongCutPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="WomenLongCutPrice" class="form-control" />
<span asp-validation-for="WomenLongCutPrice" class="text-danger" />
<span asp-validation-for="WomenLongCutPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="WomenShortCutPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="WomenShortCutPrice" class="form-control" />
<span asp-validation-for="WomenShortCutPrice" class="text-danger" />
<span asp-validation-for="WomenShortCutPrice" class="text-danger"></span>
</div>
</div>
<h3>Homme et enfant</h3>
@ -284,14 +299,14 @@
<label asp-for="KidCutPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="KidCutPrice" class="form-control" />
<span asp-validation-for="KidCutPrice" class="text-danger" />
<span asp-validation-for="KidCutPrice" class="text-danger" ></span>
</div>
</div>
<div class="form-group">
<label asp-for="ManCutPrice" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="ManCutPrice" class="form-control" />
<span asp-validation-for="ManCutPrice" class="text-danger" />
<span asp-validation-for="ManCutPrice" class="text-danger" ></span>
</div>
</div>
<h2>Le forfait</h2>
@ -299,7 +314,7 @@
<label asp-for="FlatFeeDiscount" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="FlatFeeDiscount" class="form-control" />
<span asp-validation-for="FlatFeeDiscount" class="text-danger" />
<span asp-validation-for="FlatFeeDiscount" class="text-danger" ></span>
</div>
</div>

@ -3,7 +3,6 @@
@{
ViewData["Title"] = "Profile coiffeur";
}
<h2>@ViewData["Title"]</h2>
<div>

@ -211,9 +211,10 @@
<span>Total: <span id="Total" class="total"></span>
</span>
<input asp-for="ClientId" type="hidden" />
<input type="submit" class="btn btn-success btn-submit" value="@SR["Validez ce choix, et prendre rendez-vous"] avec @Model.PerformerProfile.Performer.UserName, sans préciser ni lieu ni date (pour prendre rendez-vous la prise de contact)"/>
<input type="submit" class="btn btn-success btn-submit" value="@SR["Validez ce choix, et prendre rendez-vous"] avec @Model.PerformerProfile.Performer.UserName"/>
<environment names="Development">
<input type="submit" class="btn btn-success btn-submit" value="@SR["Validez ce choix, et prendre rendez-vous"] avec @Model.PerformerProfile.Performer.UserName [DEV+Location+Date]"/>
</environment>
</div>
<input type="hidden" name="performerId" value="@Model.PerformerProfile.PerformerId" />
<input type="hidden" name="activityCode" value="@ViewBag.Activity.Code" />

@ -1,9 +0,0 @@
#!/bin/bash
ssh root@localhost rm -rf /srv/www/yavscpre/approot/src
(cd bin/output/
rsync -ravu --exclude=.git --chown=www-data:www-data wwwroot approot root@localhost:/srv/www/yavscpre
ssh root@localhost service kestrel restart
)

@ -0,0 +1,12 @@
#!/bin/bash
FSPATH=/srv/www/yavscpre
ssh root@localhost rm -rf $FSPATH/approot/src
(
set -e
cd bin/output/
rsync -ravu wwwroot approot root@localhost:$FSPATH
ssh root@localhost service kestrel restart
)

@ -0,0 +1,13 @@
#!/bin/bash
FSPATH=/srv/www/yavsc
ssh root@localhost rm -rf $FSPATH/approot/src
(
set -e
cd bin/output/
rsync -ravu wwwroot approot root@localhost:$FSPATH
ssh root@localhost service kestrel restart
)

@ -57,7 +57,7 @@ gulp.task("min", ["min:js", "min:css"]);
gulp.task('build', shell.task(['dnu build']));
gulp.task('buildrelease', shell.task(['dnu build --configuration=Release']));
gulp.task('publish', shell.task(['dnu publish']));
gulp.task('postpublish', shell.task(['contrib/postPublish.sh']));
gulp.task('postpublish', shell.task(['contrib/rsync-to-pre.sh']));
gulp.task("default", ["watch"]);

@ -159,7 +159,7 @@
"prerestore": "echo before restoring packages",
"postrestore": "echo after restoring packages",
"prepublish": "gulp min",
"postpublish": "echo \" . ./contrib/postPublish.sh # to push in prod.\""
"postpublish": "echo \"Use contrib/rsync-to-pre.sh # to push in prod.\""
},
"embed": "Views/**/*.cshtml"
}

File diff suppressed because one or more lines are too long

@ -1 +1 @@
.discussion,.notif,.pv{font-family:monospace}.smalltofhol,tr.visiblepost{max-height:3em}.blog a:active,.blog a:hover,a:active,a:hover{outline:0}#discussion,.blogphoto{float:left}.performer{padding-left:1em;background-repeat:no-repeat;background-image:url(/images/lis.svg);background-attachment:local;background-size:contain}.performer ul{margin-left:2.5em}.smalltofhol{max-width:3em;float:left;margin:.5em}.price,.total{font-weight:700;padding:.2em;margin:.2em}.price{font-size:x-large;border:2px solid #000;border-radius:1em}.total{font-size:xx-large;background-color:#f8f;border:3px solid #000;border-radius:1em}.blog,.panel{padding:1em}.blog a{font-weight:900}.discussion{color:#000}.notif{color:#006}.pv{color:#251;font-style:bold}#targets{display:block}tr.hiddenpost{background-color:#888;font-size:smaller;max-height:2em}a.bloglink{font-weight:700;text-shadow:0 0 8px #000}a{font-weight:900}.panel{display:inline-block;margin:1em;color:#000;background-color:inherit;border:1px solid #000}button,input,select,textarea{background-color:#bbb;color:#000}.jumbotron{padding:.5em}.carousel .item .btn{-webkit-transition:-webkit-transform 2s;transition:transform 2s;transform:scale3d(0,0,0);-webkit-transform:scale3d(0,0,0)}.carousel .active .btn{-webkit-transform:initial;transform:initial}.container{-webkit-transition:background-color 2s color 1s;-moz-transition:background-color 2s color 1s;transition:background-color 2s color 1s}.disabled{color:#999;background-color:#555}.carousel-caption-s p{font-family:jubilat;font-weight:600;font-size:large;line-height:1.1;text-decoration:overline;text-decoration-line:overline;text-shadow:3px 3px 7px #000;-webkit-text-shadow:inset 0 3px 5px #000;color:#000;margin:.5em;padding:.5em;animation:mymove 3s infinite;background-color:rgba(256,256,256,.6)}.carousel-caption-s{right:3em;top:1em;left:3em;z-index:10;padding-top:20px;padding-bottom:20px;text-align:center;text-shadow:0 4px 8px rgba(0,0,0,.6);min-height:16em;overflow:auto}.carousel-inner .item{padding-left:15%;padding-right:15%}.carousel-indicators{position:absolute;z-index:15;padding:0;text-align:center;list-style:none;top:.1em;height:1em}main.container{padding-right:1em;padding-left:1em;margin-left:1em;margin-right:1em}@-webkit-keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}@keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}ul.actiongroup li{display:inline}ul.actiongroup li a:hover{background-color:rgba(200,200,200,.6);color:#400}footer{vertical-align:bottom;padding:1.5em}.display-field{font-kerning:none;display:inline-flex;color:#008}.display-label{font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;font-stretch:condensed;display:inline-flex;color:#ff8;padding:.1em;border-radius:.5em;background-color:#210912}footer{color:grey;font-weight:bolder;font-size:x-small}.meta{color:#444;font-style:italic;font-size:smaller}.activity{font-family:fantasy}.blogtitle{display:inline-block;font-size:x-large}.blogphoto{margin:1em}
.discussion,.notif,.pv{font-family:monospace}.smalltofhol,tr.visiblepost{max-height:3em}.blog a:active,.blog a:hover,a:active,a:hover{outline:0}#discussion,.blogphoto{float:left}.performer{padding-left:1em;background-repeat:no-repeat;background-image:url(/images/lis.svg);background-attachment:local;background-size:contain}.performer ul{margin-left:2.5em}.smalltofhol{max-width:3em;float:left;margin:.5em}.price,.total{font-weight:700;padding:.2em;margin:.2em}.price{font-size:x-large;border:2px solid #000;border-radius:1em}.total{font-size:xx-large;background-color:#f8f;border:3px solid #000;border-radius:1em}.blog,.panel{padding:1em}.blog a{font-weight:900}.discussion{color:#000}.notif{color:#006}.pv{color:#251;font-style:bold}#targets{display:block}tr.hiddenpost{background-color:#888;font-size:smaller;max-height:2em}a.bloglink{font-weight:700;text-shadow:0 0 8px #000}a{font-weight:900}.panel{display:inline-block;margin:1em;color:#000;background-color:inherit;border:1px solid #000}button,input,select,textarea{background-color:#bbb;color:#000}.jumbotron{padding:.5em}.carousel .item .btn{-webkit-transition:-webkit-transform 2s;transition:transform 2s background-color 1s color 1s;transform:scale3d(0,0,0);-webkit-transform:scale3d(0,0,0)}.carousel .active .btn{-webkit-transform:inherit;transform:inherit}.container{-webkit-transition:background-color 2s color 1s;-moz-transition:background-color 2s color 1s;transition:background-color 2s color 1s}.disabled{color:#999;background-color:#555}.carousel-caption-s p{font-family:jubilat;font-weight:600;font-size:large;line-height:1.1;text-decoration:overline;text-decoration-line:overline;text-shadow:3px 3px 7px #000;-webkit-text-shadow:inset 0 3px 5px #000;color:#000;margin:.5em;padding:.5em;animation:mymove 3s infinite;background-color:rgba(256,256,256,.6)}.carousel-caption-s{right:3em;top:1em;left:3em;z-index:10;padding-top:20px;padding-bottom:20px;text-align:center;text-shadow:0 4px 8px rgba(0,0,0,.6);min-height:16em;overflow:auto}.carousel-inner .item{padding-left:15%;padding-right:15%}.carousel-indicators{position:absolute;z-index:15;padding:0;text-align:center;list-style:none;top:.1em;height:1em}main.container{padding-right:1em;padding-left:1em;margin-left:1em;margin-right:1em}@-webkit-keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}@keyframes mymove{from,to{text-decoration-color:red}50%{text-decoration-color:#00f}}ul.actiongroup li{display:inline}ul.actiongroup li a:hover{background-color:rgba(200,200,200,.6);color:#400}footer{vertical-align:bottom;padding:1.5em}.display-field{font-kerning:none;display:inline-flex;color:#008}.display-label{font-family:'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,sans-serif;font-stretch:condensed;display:inline-flex;color:#ff8;padding:.1em;border-radius:.5em;background-color:#210912}footer{color:grey;font-weight:bolder;font-size:x-small}.meta{color:#444;font-style:italic;font-size:smaller}.activity{font-family:fantasy}.blogtitle{display:inline-block;font-size:x-large}.blogphoto{margin:1em}

@ -0,0 +1,361 @@
/*!
* datepair.js v0.4.15 - A javascript plugin for intelligently selecting date and time ranges inspired by Google Calendar.
* Copyright (c) 2016 Jon Thornton - http://jonthornton.github.com/Datepair.js
* License: MIT
*/
(function(window, document) {
'use strict';
var _ONE_DAY = 86400000;
var jq = window.Zepto || window.jQuery;
function simpleExtend(obj1, obj2) {
var out = obj2 || {};
for (var i in obj1) {
if (!(i in out)) {
out[i] = obj1[i];
}
}
return out;
}
// IE's custom event support is totally borked.
// Use jQuery if possible
function triggerSimpleCustomEvent(el, eventName) {
if (jq) {
jq(el).trigger(eventName);
} else {
var event = document.createEvent('CustomEvent');
event.initCustomEvent(eventName, true, true, {});
el.dispatchEvent(event);
}
}
// el.classList not supported by < IE10
// use jQuery if available
function hasClass(el, className) {
if (jq) {
return jq(el).hasClass(className);
} else {
return el.classList.contains(className);
}
}
function Datepair(container, options) {
this.dateDelta = null;
this.timeDelta = null;
this._defaults = {
startClass: 'start',
endClass: 'end',
timeClass: 'time',
dateClass: 'date',
defaultDateDelta: 0,
defaultTimeDelta: 3600000,
anchor: 'start',
// defaults for jquery-timepicker; override when using other input widgets
parseTime: function(input){
return jq(input).timepicker('getTime');
},
updateTime: function(input, dateObj){
jq(input).timepicker('setTime', dateObj);
},
setMinTime: function(input, dateObj){
jq(input).timepicker('option', 'minTime', dateObj);
},
// defaults for bootstrap datepicker; override when using other input widgets
parseDate: function(input){
return input.value && jq(input).datepicker('getDate');
},
updateDate: function(input, dateObj){
jq(input).datepicker('update', dateObj);
}
};
this.container = container;
this.settings = simpleExtend(this._defaults, options);
this.startDateInput = this.container.querySelector('.'+this.settings.startClass+'.'+this.settings.dateClass);
this.endDateInput = this.container.querySelector('.'+this.settings.endClass+'.'+this.settings.dateClass);
this.startTimeInput = this.container.querySelector('.'+this.settings.startClass+'.'+this.settings.timeClass);
this.endTimeInput = this.container.querySelector('.'+this.settings.endClass+'.'+this.settings.timeClass);
// initialize date and time deltas
this.refresh();
// init starts here
this._bindChangeHandler();
}
Datepair.prototype = {
constructor: Datepair,
option: function(key, value)
{
if (typeof key == 'object') {
this.settings = simpleExtend(this.settings, key);
} else if (typeof key == 'string' && typeof value != 'undefined') {
this.settings[key] = value;
} else if (typeof key == 'string') {
return this.settings[key];
}
this._updateEndMintime();
},
getTimeDiff: function()
{
// due to the fact that times can wrap around, timeDiff for any
// time-only pair will always be >= 0
var delta = this.dateDelta + this.timeDelta;
if (delta < 0 && (!this.startDateInput || !this.endDateInput) ) {
delta += _ONE_DAY;
}
return delta;
},
refresh: function()
{
if (this.startDateInput && this.startDateInput.value && this.endDateInput && this.endDateInput.value) {
var startDate = this.settings.parseDate(this.startDateInput);
var endDate = this.settings.parseDate(this.endDateInput);
if (startDate && endDate) {
this.dateDelta = endDate.getTime() - startDate.getTime();
}
}
if (this.startTimeInput && this.startTimeInput.value && this.endTimeInput && this.endTimeInput.value) {
var startTime = this.settings.parseTime(this.startTimeInput);
var endTime = this.settings.parseTime(this.endTimeInput);
if (startTime && endTime) {
this.timeDelta = endTime.getTime() - startTime.getTime();
this._updateEndMintime();
}
}
},
remove: function()
{
this._unbindChangeHandler();
},
_bindChangeHandler: function(){
// addEventListener doesn't work with synthetic "change" events
// fired by jQuery's trigger() functioin. If jQuery is present,
// use that for event binding
if (jq) {
jq(this.container).on('change.datepair', jq.proxy(this.handleEvent, this));
} else {
this.container.addEventListener('change', this, false);
}
},
_unbindChangeHandler: function(){
if (jq) {
jq(this.container).off('change.datepair');
} else {
this.container.removeEventListener('change', this, false);
}
},
// This function will be called when passing 'this' to addEventListener
handleEvent: function(e){
// temporarily unbind the change handler to prevent triggering this
// if we update other inputs
this._unbindChangeHandler();
if (hasClass(e.target, this.settings.dateClass)) {
if (e.target.value != '') {
this._dateChanged(e.target);
this._timeChanged(e.target);
} else {
this.dateDelta = null;
}
} else if (hasClass(e.target, this.settings.timeClass)) {
if (e.target.value != '') {
this._timeChanged(e.target);
} else {
this.timeDelta = null;
}
}
this._validateRanges();
this._updateEndMintime();
this._bindChangeHandler();
},
_dateChanged: function(target){
if (!this.startDateInput || !this.endDateInput) {
return;
}
var startDate = this.settings.parseDate(this.startDateInput);
var endDate = this.settings.parseDate(this.endDateInput);
if (!startDate || !endDate) {
if (this.settings.defaultDateDelta !== null) {
if (startDate) {
var newEnd = new Date(startDate.getTime() + this.settings.defaultDateDelta * _ONE_DAY);
this.settings.updateDate(this.endDateInput, newEnd);
} else if (endDate) {
var newStart = new Date(endDate.getTime() - this.settings.defaultDateDelta * _ONE_DAY);
this.settings.updateDate(this.startDateInput, newStart);
}
this.dateDelta = this.settings.defaultDateDelta * _ONE_DAY;
} else {
this.dateDelta = null;
}
return;
}
if (this.settings.anchor == 'start' && hasClass(target, this.settings.startClass)) {
var newDate = new Date(startDate.getTime() + this.dateDelta);
this.settings.updateDate(this.endDateInput, newDate);
} else if (this.settings.anchor == 'end' && hasClass(target, this.settings.endClass)) {
var newDate = new Date(endDate.getTime() - this.dateDelta);
this.settings.updateDate(this.startDateInput, newDate);
} else {
if (endDate < startDate) {
var otherInput = hasClass(target, this.settings.startClass) ? this.endDateInput : this.startDateInput;
var selectedDate = this.settings.parseDate(target);
this.dateDelta = 0;
this.settings.updateDate(otherInput, selectedDate);
} else {
this.dateDelta = endDate.getTime() - startDate.getTime();
}
}
},
_timeChanged: function(target){
if (!this.startTimeInput || !this.endTimeInput) {
return;
}
var startTime = this.settings.parseTime(this.startTimeInput);
var endTime = this.settings.parseTime(this.endTimeInput);
if (!startTime || !endTime) {
if (this.settings.defaultTimeDelta !== null) {
if (startTime) {
var newEnd = new Date(startTime.getTime() + this.settings.defaultTimeDelta);
this.settings.updateTime(this.endTimeInput, newEnd);
} else if (endTime) {
var newStart = new Date(endTime.getTime() - this.settings.defaultTimeDelta);
this.settings.updateTime(this.startTimeInput, newStart);
}
this.timeDelta = this.settings.defaultTimeDelta;
} else {
this.timeDelta = null;
}
return;
}
if (this.settings.anchor == 'start' && hasClass(target, this.settings.startClass)) {
var newTime = new Date(startTime.getTime() + this.timeDelta);
this.settings.updateTime(this.endTimeInput, newTime);
endTime = this.settings.parseTime(this.endTimeInput);
this._doMidnightRollover(startTime, endTime);
} else if (this.settings.anchor == 'end' && hasClass(target, this.settings.endClass)) {
var newTime = new Date(endTime.getTime() - this.timeDelta);
this.settings.updateTime(this.startTimeInput, newTime);
startTime = this.settings.parseTime(this.startTimeInput);
this._doMidnightRollover(startTime, endTime);
} else {
this._doMidnightRollover(startTime, endTime);
var startDate, endDate;
if (this.startDateInput && this.endDateInput) {
startDate = this.settings.parseDate(this.startDateInput);
endDate = this.settings.parseDate(this.endDateInput);
}
if ((+startDate == +endDate) && (endTime < startTime)) {
var thisInput = hasClass(target, this.settings.endClass) ? this.endTimeInput : this.startTimeInput;
var otherInput = hasClass(target, this.settings.startClass) ? this.endTimeInput : this.startTimeInput;
var selectedTime = this.settings.parseTime(thisInput);
this.timeDelta = 0;
this.settings.updateTime(otherInput, selectedTime);
} else {
this.timeDelta = endTime.getTime() - startTime.getTime();
}
}
},
_doMidnightRollover: function(startTime, endTime) {
if (!this.startDateInput || !this.endDateInput) {
return;
}
var endDate = this.settings.parseDate(this.endDateInput);
var startDate = this.settings.parseDate(this.startDateInput);
var newDelta = endTime.getTime() - startTime.getTime();
var offset = (endTime < startTime) ? _ONE_DAY : -1 * _ONE_DAY;
if (this.dateDelta !== null
&& this.dateDelta + this.timeDelta <= _ONE_DAY
&& this.dateDelta + newDelta != 0
&& (offset > 0 || this.dateDelta != 0)
&& ((newDelta >= 0 && this.timeDelta < 0) || (newDelta < 0 && this.timeDelta >= 0))) {
if (this.settings.anchor == 'start') {
this.settings.updateDate(this.endDateInput, new Date(endDate.getTime() + offset));
this._dateChanged(this.endDateInput);
} else if (this.settings.anchor == 'end') {
this.settings.updateDate(this.startDateInput, new Date(startDate.getTime() - offset));
this._dateChanged(this.startDateInput);
}
}
this.timeDelta = newDelta;
},
_updateEndMintime: function(){
if (typeof this.settings.setMinTime != 'function') return;
var baseTime = null;
if (this.settings.anchor == 'start' && (!this.dateDelta || this.dateDelta < _ONE_DAY || (this.timeDelta && this.dateDelta + this.timeDelta < _ONE_DAY))) {
baseTime = this.settings.parseTime(this.startTimeInput);
}
this.settings.setMinTime(this.endTimeInput, baseTime);
},
_validateRanges: function(){
if (this.startTimeInput && this.endTimeInput && this.timeDelta === null) {
triggerSimpleCustomEvent(this.container, 'rangeIncomplete');
return;
}
if (this.startDateInput && this.endDateInput && this.dateDelta === null) {
triggerSimpleCustomEvent(this.container, 'rangeIncomplete');
return;
}
// due to the fact that times can wrap around, any time-only pair will be considered valid
if (!this.startDateInput || !this.endDateInput || this.dateDelta + this.timeDelta >= 0) {
triggerSimpleCustomEvent(this.container, 'rangeSelected');
} else {
triggerSimpleCustomEvent(this.container, 'rangeError');
}
}
};
window.Datepair = Datepair;
}(window, document));

File diff suppressed because one or more lines are too long

@ -0,0 +1,51 @@
/*!
* datepair.js v0.4.15 - A javascript plugin for intelligently selecting date and time ranges inspired by Google Calendar.
* Copyright (c) 2016 Jon Thornton - http://jonthornton.github.com/Datepair.js
* License: MIT
*/
(function($) {
if(!$) {
return;
}
////////////
// Plugin //
////////////
$.fn.datepair = function(option) {
var out;
this.each(function() {
var $this = $(this);
var data = $this.data('datepair');
var options = typeof option === 'object' && option;
if (!data) {
data = new Datepair(this, options);
$this.data('datepair', data);
}
if (option === 'remove') {
out = data['remove']();
$this.removeData('datepair', data);
}
if (typeof option === 'string') {
out = data[option]();
}
});
return out || this;
};
//////////////
// Data API //
//////////////
$('[data-datepair]').each(function() {
var $this = $(this);
$this.datepair($this.data());
});
}(window.Zepto || window.jQuery));

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

@ -0,0 +1,72 @@
.ui-timepicker-wrapper {
overflow-y: auto;
height: 150px;
width: 6.5em;
background: #fff;
border: 1px solid #ddd;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
outline: none;
z-index: 10001;
margin: 0;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration {
width: 13em;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
width: 11em;
}
.ui-timepicker-list {
margin: 0;
padding: 0;
list-style: none;
}
.ui-timepicker-duration {
margin-left: 5px; color: #888;
}
.ui-timepicker-list:hover .ui-timepicker-duration {
color: #888;
}
.ui-timepicker-list li {
padding: 3px 0 3px 5px;
cursor: pointer;
white-space: nowrap;
color: #000;
list-style: none;
margin: 0;
}
.ui-timepicker-list:hover .ui-timepicker-selected {
background: #fff; color: #000;
}
li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
background: #1980EC; color: #fff;
}
li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
color: #ccc;
}
.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
color: #888;
cursor: default;
}
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
background: #f2f2f2;
}

File diff suppressed because one or more lines are too long
Loading…