Talenttic_survey/CATI_Tool
2
0
Fork 0
mirror of https://github.com/ACSPRI/queXS synced 2024-04-02 12:12:16 +00:00
Code Issues Releases Activity

updated admin panel files

Browse Source 
added 'clockpicker'  library (could replace jquerry-ui timepicker later on in some files)
modified functions.display.php to handle external classes
modified addrow-v2.js to display cloned values and init clockpicker
This commit is contained in:
Alex
2015-03-05 13:25:46 +03:00
parent 08297ea098
commit 7f80ad71e1
18 changed files with 2567 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
admin/assignsample.php
View File

@@ -55,9 +55,25 @@ include("../functions/functions.display.php");
*/
include("../functions/functions.input.php");
$css = array(
"../include/bootstrap-3.3.2/css/bootstrap.min.css",
"../include/bootstrap-3.3.2/css/bootstrap-theme.min.css",
"../include/font-awesome-4.3.0/css/font-awesome.css",
"../css/bootstrap-switch.min.css",
"../css/custom.css"
);
$js_head = array(
"../js/jquery-2.1.3.min.js",
"../include/bootstrap-3.3.2/js/bootstrap.min.js",
"../js/bootstrap-switch.min.js",
"../js/window.js"
);
$js_foot = array(
"../js/bootstrap-confirmation.js",
"../js/custom.js"
);
global $db;
if (isset($_GET['questionnaire_id']) && isset($_GET['sample']) && isset($_GET['call_max']) && isset($_GET['call_attempt_max']))
{
//need to add sample to questionnaire
@@ -76,13 +92,11 @@ if (isset($_GET['questionnaire_id']) && isset($_GET['sample']) && isset($_GET['
VALUES('$questionnaire_id','$sid','$cm','$cam','$selecttype','$am', '$an')";
$db->Execute($sql);
}
if (isset($_POST['edit']))
{
//need to add sample to questionnaire
$questionnaire_id = bigintval($_POST['questionnaire_id']);
$sid = bigintval($_POST['sample_import_id']);
$cm = bigintval($_POST['call_max']);
@@ -93,8 +107,6 @@ if (isset($_POST['edit']))
$an = 0;
if (isset($_POST['allownew'])) $an = 1;
$sql = "UPDATE questionnaire_sample
SET call_max = '$cm',
call_attempt_max = '$cam',
@@ -105,7 +117,6 @@ if (isset($_POST['edit']))
AND sample_import_id = '$sid'";
$db->Execute($sql);
}
@@ -117,7 +128,8 @@ if (isset($_GET['questionnaire_id']) && isset($_GET['rsid']))
if (isset($_GET['edit']))
{
xhtml_head(T_("Assign Sample: Select sample to assign"),true,array("../css/table.css"),array("../js/window.js"));
$subtitle = T_("Edit assignment parameters");
xhtml_head(T_("Assign samples to questionnaire: "),true,$css,$js_head,false,false,false,$subtitle);//array("../css/table.css"),array("../js/window.js")
$sql = "SELECT si.description as description,
qr.description as qdescription,
@@ -134,31 +146,36 @@ if (isset($_GET['questionnaire_id']) && isset($_GET['rsid']))
$qs = $db->GetRow($sql);
print "<h1>" . T_("Edit sample details") . "<h1>";
print "<h2>" . T_("Questionnaire") . ": " . $qs['qdescription'] . "</h2>";
print "<h2>" . T_("Sample") . ": " . $qs['description'] . "</h2>";
print "<p><a href='?questionnaire_id=$questionnaire_id'>" . T_("Go back") . "</a></p>";
//print "<h1>" . T_("Edit sample details") . "<h1>";
print " <p><a href='?questionnaire_id=$questionnaire_id' class='btn btn-default '><i class='fa fa-chevron-left fa-lg text-primary'></i>&emsp;" . T_("Go back") . "</a></p>
<h2 class='col-sm-6'>" . T_("Questionnaire") . ": <span class='text-primary'>" . $qs['qdescription'] . "</span></h2>
<h2 class='col-sm-6'>" . T_("Sample") . ": <span class='text-primary'>" . $qs['description'] . "</span></h2>
<div class='panel-body form-group'>";
$allownew = $selected ="";
if ($qs['random_select'] == 1)
$selected = "checked=\"checked\"";
if ($qs['allow_new'] == 1)
$allownew = "checked=\"checked\"";
?>
<form action="?questionnaire_id=<?php echo $questionnaire_id;?>" method="post">
<label for="call_max"><?php echo T_("Max calls (0 for unlimited)"); ?></label><input type="text" name="call_max" id="call_max" value="<?php echo $qs['call_max'];?>"/><br/>
<label for="call_attempt_max"><?php echo T_("Max call attempts (0 for unlimited)"); ?></label><input type="text" name="call_attempt_max" id="call_attempt_max" value="<?php echo $qs['call_attempt_max'];?>"/> <br/>
<label for="answering_machine_messages"><?php echo T_("Number of answering machine messages to leave per case (0 for never)"); ?></label><input type="text" name="answering_machine_messages" id="answering_machine_messages" value="<?php echo $qs['answering_machine_messages'];?>"/> <br/>
<label for="selecttype"><?php echo T_("Select from sample randomly? (otherwise sequentially)"); ?></label><input type="checkbox" id = "selecttype" name="selecttype" <?php echo $selected;?> /> <br/>
<label for="allownew"><?php echo T_("Allow new numbers to be drawn?"); ?></label><input type="checkbox" id = "allownew" name="allownew" <?php echo $allownew;?> /> <br/>
<form action="?questionnaire_id=<?php echo $questionnaire_id;?>" method="post" class="form-horizontal">
<label for="call_max" class="control-label col-sm-4"><?php echo T_("Max calls");?></label><div class="col-sm-1"><input type="text" name="call_max" id="call_max" value="<?php echo $qs['call_max'];?>" class="form-control"/></div><label class="control-label text-info"><?php echo "0 = " . T_("Unlimited");?></label><br/><br/>
<label for="call_attempt_max" class="control-label col-sm-4"><?php echo T_("Max call attempts");?></label><div class="col-sm-1"><input type="text" name="call_attempt_max" id="call_attempt_max" value="<?php echo $qs['call_attempt_max'];?>" class="form-control"/></div><label class="control-label text-info"><?php echo "0 = " . T_("Unlimited");?></label><br/><br/>
<label for="answering_machine_messages" class="control-label col-sm-4"><?php echo T_("Number of answering machine messages to leave per case");?></label><div class="col-sm-1"> <input type="text" name="answering_machine_messages" id="answering_machine_messages" value="<?php echo $qs['answering_machine_messages'];?>" class="form-control"/></div><label class="control-label text-info"><?php echo "0 = " . T_("Never");?></label><br/><br/>
<label for="selecttype" class="control-label col-sm-4"><?php echo T_("Select from sample randomly?");?></label><div class="col-sm-1"><input type="checkbox" id = "selecttype" name="selecttype" <?php echo $selected;?> switch="yes" data-size="small" data-on-text="<?php echo T_("Yes");?>" data-off-text="<?php echo T_("No");?>"/></div><label class="control-label text-info"><?php echo T_("No") ." = ". T_("Sequentially");?></label><br/><br/>
<label for="allownew" class="control-label col-sm-4"><?php echo T_("Allow new numbers to be drawn?");?></label><div class="col-sm-1"><input type="checkbox" id = "allownew" name="allownew" <?php echo $allownew;?> class="col-sm-1" switch="yes" data-size="small" data-on-text="<?php echo T_("Yes");?>" data-off-text="<?php echo T_("No");?>"/></div><br/><br/>
<input type="hidden" name="questionnaire_id" value="<?php print($questionnaire_id); ?>"/>
<input type="hidden" name="sample_import_id" value="<?php print($sid); ?>"/>
<input type="submit" name="edit" value="<?php echo T_("Edit"); ?>"/></p>
</form>
<div class="col-sm-12 text-center"><button type="submit" name="edit" class="btn btn-primary"><i class="fa fa-floppy-o fa-lg"></i>&emsp;<?php echo T_("Save changes");?></button></div>
</form></div>
<script type="text/javascript">
$('[switch="yes"]').bootstrapSwitch();
</script>
<?php
xhtml_foot();
xhtml_foot($js_foot);
die();
}
else
@@ -172,27 +189,29 @@ if (isset($_GET['questionnaire_id']) && isset($_GET['rsid']))
}
}
$questionnaire_id = false;
if (isset($_GET['questionnaire_id'])) $questionnaire_id = bigintval($_GET['questionnaire_id']);
$subtitle = T_("List & Add Sample");
xhtml_head(T_("Assign samples to questionnaire: "),true,$css,$js_head,false,false,false,$subtitle);//array("../css/table.css"),array("../js/window.js")
xhtml_head(T_("Assign Sample: Select sample to assign"),true,array("../css/table.css"),array("../js/window.js"));
print "<h1>" . T_("Select a questionnaire from the list below") . "</h1>";
display_questionnaire_chooser($questionnaire_id);
print "<a href='' onclick='history.back();return false;' class='btn btn-default pull-left'><i class='fa fa-chevron-left fa-lg text-primary'></i>&emsp;" . T_("Go back") . "</a>";
print "<h3 class='col-sm-4 text-right'>" . T_("Select a questionnaire") . ":</h3>";
display_questionnaire_chooser($questionnaire_id,false, "pull-left", "form-control");
if ($questionnaire_id != false)
{
print "<h1>" . T_("Samples selected for this questionnaire") . "</h1>";
print "<div class='clearfix '></div><div class='panel-body'>
<h3 class='text-primary'>". T_("Samples selected for this questionnaire") .":</h3>";
$sql = "SELECT si.description as description,
CASE WHEN q.call_max = 0 THEN '" . TQ_("Unlimited") . "' ELSE q.call_max END as call_max,
CASE WHEN q.call_attempt_max = 0 THEN '" . TQ_("Unlimited") . "' ELSE q.call_attempt_max END AS call_attempt_max,
CASE WHEN q.random_select = 0 THEN '" . TQ_("Sequential") . "' ELSE '". TQ_("Random") . "' END as random_select,
CASE WHEN q.answering_machine_messages = 0 THEN '" . TQ_("Never") . "' ELSE q.answering_machine_messages END as answering_machine_messages,
CASE WHEN q.allow_new = 0 THEN '" . TQ_("No") . "' ELSE '".TQ_("Yes")."' END as allow_new,
CONCAT('<a href=\"?edit=edit&amp;questionnaire_id=$questionnaire_id&amp;rsid=', si.sample_import_id ,'\">" . TQ_("Edit") ."</a>') as edit,
CONCAT('<a href=\"?questionnaire_id=$questionnaire_id&amp;rsid=', si.sample_import_id ,'\">" . TQ_("Click to unassign") ."</a>') as unassign
CASE WHEN q.call_max = 0 THEN '". TQ_("Unlimited") ."' ELSE q.call_max END as call_max,
CASE WHEN q.call_attempt_max = 0 THEN '". TQ_("Unlimited") . "' ELSE q.call_attempt_max END AS call_attempt_max,
CASE WHEN q.random_select = 0 THEN '". TQ_("Sequential") ."' ELSE '". TQ_("Random") . "' END as random_select,
CASE WHEN q.answering_machine_messages = 0 THEN '". TQ_("Never") . "' ELSE q.answering_machine_messages END as answering_machine_messages,
CASE WHEN q.allow_new = 0 THEN '". TQ_("No") ."' ELSE '".TQ_("Yes")."' END as allow_new,
CONCAT('<a href=\"?edit=edit&amp;questionnaire_id=$questionnaire_id&amp;rsid=', si.sample_import_id ,'\" data-toggle=\'tooltip\' title=\'". TQ_("Edit") ."\' class=\'btn center-block\'><i class=\'fa fa-pencil-square-o fa-lg\'></i></a>') as edit,
CONCAT('<a href=\'\' data-toggle=\'confirmation\' data-placement=\'top\' data-href=\"?questionnaire_id=$questionnaire_id&amp;rsid=', si.sample_import_id ,'\" class=\'btn center-block\'><i class=\'fa fa-chain-broken fa-lg\' data-toggle=\'tooltip\' title=\'". TQ_("Click to unassign") ."\'></i></a>') as unassign
FROM questionnaire_sample as q, sample_import as si
WHERE q.sample_import_id = si.sample_import_id
AND q.questionnaire_id = '$questionnaire_id'";
@@ -200,9 +219,9 @@ if ($questionnaire_id != false)
$qs = $db->GetAll($sql);
if (!empty($qs))
xhtml_table($qs,array("description","call_max","call_attempt_max","answering_machine_messages","random_select","allow_new","edit","unassign"),array(T_("Sample"), T_("Max calls"), T_("Max call attempts"), T_("Answering machine messages"), T_("Selection type"), T_("Allow new numbers to be drawn?"), T_("Edit"), T_("Unassign sample") ));
xhtml_table($qs,array("description","call_max","call_attempt_max","answering_machine_messages","random_select","allow_new","edit","unassign"),array(T_("Sample"), T_("Max calls"), T_("Max call attempts"), T_("Answering machine messages"), T_("Selection type"), T_("Allow new numbers to be drawn?"), T_("Edit"), T_("Unassign sample")));
else
print "<p>" . T_("No samples selected for this questionnaire") . "</p>";
print "<div class='alert text-danger'><h4>". T_("No samples selected for this questionnaire") ."</h4></div>";
$sql = "SELECT si.sample_import_id,si.description
FROM sample_import as si
@@ -211,36 +230,38 @@ if ($questionnaire_id != false)
AND si.enabled = 1";
$qs = $db->GetAll($sql);
print"</div>";
if (!empty($qs))
{
print "<h1>" . T_("Add a sample to this questionnaire:") . "</h1>";
print "<div class='clearfix '></div>";
print "<div class='panel-body form-group'><h3 class='text-primary'>" . T_("Add a sample to this questionnaire:") . "</h3>";
?>
<form action="" method="get">
<p><label for="sample"><?php echo T_("Select sample:"); ?></label><select name="sample" id="sample">
<?php
<form action="" method="get" class="form-horizontal">
<label for="sample" class="control-label col-sm-4"><?php echo T_("Select sample:");?></label><div class="col-sm-3"><select name="sample" id="sample" class="form-control " >
<?php foreach($qs as $q) { print "<option value=\"{$q['sample_import_id']}\">{$q['description']}</option>"; } ?> </select></div><br/><br/>
foreach($qs as $q)
{
print "<option value=\"{$q['sample_import_id']}\">{$q['description']}</option>";
}
<label for="call_max" class="control-label col-sm-4"><?php echo T_("Max calls");?></label><div class="col-sm-1"><input type="text" name="call_max" id="call_max" value="0" class="form-control"/></div><label class="control-label text-info"><?php echo "0 = " . T_("Unlimited");?></label><br/><br/>
?>
</select><br/>
<label for="call_max"><?php echo T_("Max calls (0 for unlimited)"); ?></label><input type="text" name="call_max" id="call_max" value="0"/><br/>
<label for="call_attempt_max"><?php echo T_("Max call attempts (0 for unlimited)"); ?></label><input type="text" name="call_attempt_max" id="call_attempt_max" value="0"/> <br/>
<label for="answering_machine_messages"><?php echo T_("Number of answering machine messages to leave per case (0 for never)"); ?></label><input type="text" name="answering_machine_messages" id="answering_machine_messages" value="1"/> <br/>
<label for="selecttype"><?php echo T_("Select from sample randomly? (otherwise sequentially)"); ?></label><input type="checkbox" id = "selecttype" name="selecttype" /> <br/>
<label for="allownew"><?php echo T_("Allow new numbers to be drawn?"); ?></label><input type="checkbox" id = "allownew" name="allownew" checked="checked" /> <br/>
<input type="hidden" name="questionnaire_id" value="<?php print($questionnaire_id); ?>"/>
<input type="submit" name="add_sample" value="<?php echo T_("Add sample");?>"/></p>
</form>
<label for="call_attempt_max" class="control-label col-sm-4"><?php echo T_("Max call attempts");?></label><div class="col-sm-1"><input type="text" name="call_attempt_max" id="call_attempt_max" value="0" class="form-control"/></div><label class="control-label text-info"><?php echo "0 = " . T_("Unlimited");?></label><br/><br/>
<label for="answering_machine_messages" class="control-label col-sm-4"><?php echo T_("Number of answering machine messages to leave per case");?></label><div class="col-sm-1"> <input type="text" name="answering_machine_messages" id="answering_machine_messages" value="0" class="form-control"/></div><label class="control-label text-info"><?php echo "0 = " . T_("Never");?></label><br/><br/>
<label for="selecttype" class="control-label col-sm-4"><?php echo T_("Select from sample randomly?");?></label><div class="col-sm-1"><input type="checkbox" id = "selecttype" name="selecttype" switch="yes" data-size="small" data-on-text="<?php echo T_("Yes");?>" data-off-text="<?php echo T_("No");?>"/></div><label class="control-label text-info"><?php echo T_("No") ." = ". T_("Sequentially");?></label><br/><br/>
<label for="allownew" class="control-label col-sm-4"><?php echo T_("Allow new numbers to be drawn?");?></label><div class="col-sm-1"><input type="checkbox" id = "allownew" name="allownew" checked="checked" class="col-sm-1" switch="yes" data-size="small" data-on-text="<?php echo T_("Yes");?>" data-off-text="<?php echo T_("No");?>"/></div><br/><br/>
<input type="hidden" name="questionnaire_id" value="<?php print($questionnaire_id);?>"/>
<div class="col-sm-12 text-center"><button type="submit" name="add_sample" class="btn btn-primary"><i class="fa fa-plus-circle fa-lg"></i>&emsp;<?php echo T_("Add sample");?></button></div>
</form></div>
<?php
}
}
xhtml_foot();
xhtml_foot($js_foot);
?>
<script type="text/javascript">
$('[switch="yes"]').bootstrapSwitch();
$('[data-toggle="confirmation"]').confirmation()
</script>

67
admin/availability.php
View File

@@ -44,6 +44,22 @@ include ("../db.inc.php");
*/
include ("../functions/functions.xhtml.php");
$css = array(
"../include/bootstrap-3.3.2/css/bootstrap.min.css",
//"../include/bootstrap-3.3.2/css/bootstrap-theme.min.css",
"../include/clockpicker/dist/bootstrap-clockpicker.min.css",
"../css/custom.css"
);
$js_head = array(
"../js/jquery-2.1.3.min.js",
"../include/bootstrap-3.3.2/js/bootstrap.min.js",
"../js/addrow-v2.js",
);
$js_foot = array(
"../include/clockpicker/dist/bootstrap-clockpicker.js",
"../js/custom.js"
);
global $db;
$year="2008";
@@ -63,7 +79,6 @@ if (isset($_POST['day']))
$sql = "DELETE FROM availability
WHERE availability_group_id = $availability_group";
$db->Execute($sql);
foreach($_POST['day'] as $key => $val)
@@ -78,7 +93,6 @@ if (isset($_POST['day']))
$sql = "INSERT INTO availability (day_of_week,start,end,availability_group_id)
VALUES ('$val',$start,$end,$availability_group)";
$db->Execute($sql);
}
}
@@ -86,27 +100,25 @@ if (isset($_POST['day']))
$sql = "UPDATE availability_group
SET description = " . $db->qstr($_POST['description']) . "
WHERE availability_group_id= $availability_group";
$db->Execute($sql);
$db->CompleteTrans();
}
xhtml_head(T_("Modify time slots"),true,array("../css/shifts.css"),array("../js/addrow-v2.js"));
xhtml_head(T_("Modify time slots"),true,$css,$js_head);//,true,array("../css/shifts.css"),array("../js/addrow-v2.js")
/**
* Display warning if timezone data not installed
*
*/
$sql = "SELECT CONVERT_TZ(NOW(),'Australia/Victoria','UTC') as t";
$sql = "SELECT CONVERT_TZ(NOW(),'" . DEFAULT_TIME_ZONE . "','UTC') as t";//'Australia/Victoria'
$rs = $db->GetRow($sql);
if (empty($rs) || !$rs || empty($rs['t']))
print "<div class='warning'><a href='http://dev.mysql.com/doc/mysql/en/time-zone-support.html'>" . T_("Your database does not have timezones installed, please see here for details") . "</a></div>";
print "<div class='alert alert-danger'><a href='http://dev.mysql.com/doc/mysql/en/time-zone-support.html'>" . T_("Your database does not have timezones installed, please see here for details") . "</a></div>";
print "<div><a href='availabilitygroup.php'>" . T_("Go back") . "</a></div>";
print "<div><a class='btn btn-default' href='availabilitygroup.php'>" . T_("Go back") . "</a></div>";
$sql = "SELECT description
@@ -117,9 +129,9 @@ $rs = $db->GetRow($sql);
$description = $rs['description'];
print "<h2>" . $rs['description'] . "</h2>";
print "<h3>" . T_("Time slot name") . " :&emsp;<span class = 'text-primary'>" . $rs['description'] . "</span></h3>";
print "<h3>" . T_("Enter the start and end times for each day of the week to restrict calls within") . "</h3>";
print "<div class='well'>" . T_("Enter the start and end times for each day of the week to restrict calls within") . "</div>";
/**
* Begin displaying currently loaded restriction times
*/
@@ -138,36 +150,39 @@ $daysofweek = $db->GetAll($sql);
translate_array($daysofweek,array("description"));
?>
<form method="post" action="">
<table>
<div class=" panel-body col-sm-4"><form method="post" action="">
<p><label class="control-label"for="description"><?php echo T_("Time slot group name"); ?>: </label><input class="form-control" type="text" name="description" id="description" value="<?php echo $description;?>"/></p>
<table class="table-hover table-condensed "><thead class="highlight">
<?php
print "<tr><th>" . T_("Day") . "</th><th>" . T_("Start") . "</th><th>" . T_("End") . "</th></tr>";
print "<tr><th>" . T_("Day") . "</th><th>" . T_("Start") . "</th><th>" . T_("End") . "</th></tr></thead><tbody>";
$count = 0;
foreach($availabilitys as $availability)
{
print "<tr id='row-$count' class='row_to_clone'><td>";
print "<tr id='row-$count' ><td>";//class='row_to_clone'
display_chooser($daysofweek, "day[$count]", false, true, false, false, false, array("description",$availability['dt']));
print "</td><td><input size=\"8\" name=\"start[$count]\" maxlength=\"8\" type=\"text\" value=\"{$availability['start']}\"/></td><td><input name=\"end[$count]\" type=\"text\" size=\"8\" maxlength=\"8\" value=\"{$availability['end']}\"/></td></tr>";
print "</td><td><input class=\"form-control clockpicker\" size=\"8\" name=\"start[$count]\" maxlength=\"8\" type=\"text\" value=\"{$availability['start']}\"/></td><td><input class=\"form-control clockpicker\" name=\"end[$count]\" type=\"text\" size=\"8\" maxlength=\"8\" value=\"{$availability['end']}\"/></td></tr>";
$count++;
}
print "<tr class='row_to_clone' id='row-$count'><td>";
display_chooser($daysofweek, "day[$count]", false, true, false, false, false, false);
print "</td><td><input size=\"8\" name=\"start[$count]\" maxlength=\"8\" type=\"text\" value=\"00:00:00\"/></td><td><input name=\"end[$count]\" type=\"text\" size=\"8\" maxlength=\"8\" value=\"00:00:00\"/></td></tr>";
print "</td><td><input class=\"form-control clockpicker\" size=\"8\" name=\"start[$count]\" maxlength=\"8\" type=\"text\" value=\"08:00:00\"/></td><td><input class=\"form-control clockpicker\" name=\"end[$count]\" type=\"text\" size=\"8\" maxlength=\"8\" value=\"20:00:00\"/></td></tr>";
?>
</table>
<p><a onclick="addRow(); return false;" href="#"><?php echo T_("Add row"); ?></a></p>
<p><label for="description"><?php echo T_("Time slot group name"); ?>: </label><input type="text" name="description" id="description" value="<?php echo $description;?>"/></p>
<p><input type="submit" name="submit" value="<?php echo T_("Save changes to time slot group"); ?>"/></p>
</tbody></table>
<a class="btn btn-default btn-sm" onclick="addRow(); return false;" href="#"><?php echo T_("Add row"); ?></a><br/><br/>
<input class="btn btn-primary" type="submit" name="submit" value="<?php echo T_("Save changes to time slot group"); ?>"/>
<input type="hidden" name="availability_group" value="<?php echo $availability_group;?>"/>
</form>
</form><br/><br/>
<form method="post" action="availabilitygroup.php">
<p><input type="submit" name="subdel" value="<?php echo T_("Delete this time slot group"); ?>"/></p>
<input class="btn btn-danger pull-right" type="submit" name="subdel" value="<?php echo T_("Delete this time slot group"); ?>"/>
<input type="hidden" name="availability_group" value="<?php echo $availability_group;?>"/>
</form>
</form></div>
<?php
xhtml_foot();
xhtml_foot($js_foot);
?>
<script type="text/javascript">
$('.clockpicker').clockpicker({
autoclose: true
});
</script>

45
admin/availabilitygroup.php
View File

@@ -65,9 +65,19 @@ include("../functions/functions.operator.php");
*/
include("../functions/functions.input.php");
$css = array(
"../include/bootstrap-3.3.2/css/bootstrap.min.css",
"../css/custom.css"
);
$js_head = array(
);
$js_foot = array(
"../js/window.js",
"../js/custom.js"
);
global $db;
xhtml_head(T_("Time slots"),true,array("../css/table.css"),array("../js/window.js"));
xhtml_head(T_("Time slots"),true,$css,$js_head);//array("../css/table.css"),array("../js/window.js")
if (isset($_POST['subdel']))
{
@@ -109,27 +119,26 @@ $sql = "SELECT description,
$rs = $db->GetAll($sql);
print "<h3>" . T_("Time slots")."</h3>";
//print "<h3>" . T_("Time slots")."</h3>";
print "<p>" . T_("Time slots define periods of time during particular days of the week. These are used for the availability function and also the call attempt time slot function.") . "</p>";
print "<div class='well'>" . T_("Time slots define periods of time during particular days of the week. These are used for the availability function and also the call attempt time slot function.") . "</div>";
if (empty($rs))
print "<p>" . T_("No time slots") . "</p>";
else
xhtml_table($rs,array("description","link"),array(T_("Time slot"),T_("Modify")));
print "<div class='alert alert-danger'>" . T_("No time slots") . "</div>";
else{
print "<div class='panel-body col-sm-4'>";
// print "<h3>" . T_("Time slots")."</h3>";
xhtml_table($rs,array("description","link"),array(T_("Time slot"),T_("Modify")));
print "</div>";
}
//add an availablity group
print "<h3>" . T_("Add time slot") . "</h3>";
//add an availablity group <label for="availability_group"><?php echo T_("Time slot name"); : </label>
?>
<form method="post" action="?">
<p><label for="availability_group"><?php echo T_("Time slot name"); ?>: </label><input type="text" class="textclass" name="availability_group" id="availability_group"/></p>
<p><input class="submitclass" type="submit" name="submit" value="<?php echo T_("Add time slot"); ?>"/>
</p>
</form>
<div class=" panel-body col-sm-4"><form method="post" action="?">
<h3><?php echo T_("Add time slot")," :";?></h3>
<p><input type="text" class="textclass form-control" name="availability_group" id="availability_group" placeholder="<?php echo T_("Enter"),"&ensp;",T_("new"),"&ensp;",T_("Time slot name"); ?>"/></p>
<p><input class="submitclass btn btn-default" type="submit" name="submit" value="<?php echo T_("Add time slot"); ?>"/></p>
</form></div>
<?php
xhtml_foot();
xhtml_foot($js_foot);
?>

53
admin/callrestrict.php
View File

@@ -44,6 +44,22 @@ include ("../db.inc.php");
*/
include ("../functions/functions.xhtml.php");
$css = array(
"../include/bootstrap-3.3.2/css/bootstrap.min.css",
//"../include/bootstrap-3.3.2/css/bootstrap-theme.min.css",
"../include/clockpicker/dist/bootstrap-clockpicker.min.css",
"../css/custom.css"
);
$js_head = array(
"../js/jquery-2.1.3.min.js",
"../include/bootstrap-3.3.2/js/bootstrap.min.js",
"../js/addrow-v2.js",
);
$js_foot = array(
"../include/clockpicker/dist/bootstrap-clockpicker.js",
"../js/custom.js"
);
global $db;
$year="2008";
@@ -79,21 +95,21 @@ if (isset($_POST['day']))
$db->CompleteTrans();
}
xhtml_head(T_("Modify call restriction times"),true,array("../css/shifts.css"),array("../js/addrow-v2.js"));
xhtml_head(T_("Set call restriction times"),true,$css,$js_head);//,array("../css/shifts.css"),array("../js/addrow-v2.js")
/**
* Display warning if timezone data not installed
*
*/
$sql = "SELECT CONVERT_TZ(NOW(),'Australia/Victoria','UTC') as t";
$sql = "SELECT CONVERT_TZ(NOW(),'" . DEFAULT_TIME_ZONE . "','UTC') as t";//'Australia/Victoria'
$rs = $db->GetRow($sql);
if (empty($rs) || !$rs || empty($rs['t']))
print "<div class='warning'><a href='http://dev.mysql.com/doc/mysql/en/time-zone-support.html'>" . T_("Your database does not have timezones installed, please see here for details") . "</a></div>";
print "<div class='alert alert-danger'><a href='http://dev.mysql.com/doc/mysql/en/time-zone-support.html'>" . T_("Your database does not have timezones installed, please see here for details") . "</a></div>";
print "<h2>" . T_("Enter the start and end times for each day of the week to restrict calls within") . "</h2>";
print "<div class='well'>" . T_("Enter the start and end times for each day of the week to restrict calls within") . "</div>";
/**
* Begin displaying currently loaded restriction times
@@ -112,30 +128,33 @@ $daysofweek = $db->GetAll($sql);
translate_array($daysofweek,array("description"));
?>
<form method="post" action="">
<table>
<div class=" panel-body col-sm-4"><form method="post" action="">
<table class="table-hover table-condensed " id="restrict"><thead class="highlight">
<?php
print "<tr><th>" . T_("Day") . "</th><th>" . T_("Start") . "</th><th>" . T_("End") . "</th></tr>";
print "<tr><th>" . T_("Day") . "</th><th>" . T_("Start") . "</th><th>" . T_("End") . "</th></tr></thead><tbody>";
$count = 0;
foreach($shifts as $shift)
{
print "<tr id='row-$count' class='row_to_clone'><td>";
print "<tr id='row-$count' ><td>";//class='row_to_clone' /* these are not the rows to clone...*/
display_chooser($daysofweek, "day[$count]", false, true, false, false, false, array("description",$shift['dt']));
print "</td><td><input size=\"8\" name=\"start[$count]\" maxlength=\"8\" type=\"text\" value=\"{$shift['start']}\"/></td><td><input name=\"end[$count]\" type=\"text\" size=\"8\" maxlength=\"8\" value=\"{$shift['end']}\"/></td></tr>";
print "</td><td><input class=\"form-control clockpicker\" size=\"8\" name=\"start[$count]\" maxlength=\"8\" type=\"text\" value=\"{$shift['start']}\"/></td><td><input class=\"form-control clockpicker\" name=\"end[$count]\" type=\"text\" size=\"8\" maxlength=\"8\" value=\"{$shift['end']}\"/></td></tr>";
$count++;
}
print "<tr class='row_to_clone' id='row-$count'><td>";
display_chooser($daysofweek, "day[$count]", false, true, false, false, false, false);
print "</td><td><input size=\"8\" name=\"start[$count]\" maxlength=\"8\" type=\"text\" value=\"00:00:00\"/></td><td><input name=\"end[$count]\" type=\"text\" size=\"8\" maxlength=\"8\" value=\"00:00:00\"/></td></tr>";
print "</td><td><input class=\"form-control clockpicker\" size=\"8\" name=\"start[$count]\" maxlength=\"8\" type=\"text\" value=\"08:00:00\"/></td><td><input class=\"form-control clockpicker\" name=\"end[$count]\" type=\"text\" size=\"8\" maxlength=\"8\" value=\"20:00:00\"/></td></tr>";
?>
</table>
<div><a onclick="addRow(); return false;" href="#"><?php echo T_("Add row"); ?></a></div>
<p><input type="submit" name="submit" value="<?php echo T_("Save changes to restriction times"); ?>"/></p>
</form>
</tbody></table>
<a class="btn btn-default btn-sm" onclick="addRow(); return false;" href=""><?php echo T_("Add row"); ?></a><br/><br/>
<input class="btn btn-default " type="submit" name="submit" value="<?php echo T_("Save changes to restriction times"); ?>"/>
</form></div>
<?php
xhtml_foot();
xhtml_foot($js_foot);
?>
<script type="text/javascript">
$('.clockpicker').clockpicker({
autoclose: true
});
</script>

77
admin/shifttemplate.php
View File

@@ -44,19 +44,33 @@ include ("../db.inc.php");
*/
include ("../functions/functions.xhtml.php");
$css = array(
"../include/bootstrap-3.3.2/css/bootstrap.min.css",
//"../include/bootstrap-3.3.2/css/bootstrap-theme.min.css",
"../include/clockpicker/dist/bootstrap-clockpicker.min.css",
"../css/custom.css"
);
$js_head = array(
"../js/jquery-2.1.3.min.js",
"../include/bootstrap-3.3.2/js/bootstrap.min.js",
"../js/addrow-v2.js",
);
$js_foot = array(
"../include/clockpicker/dist/bootstrap-clockpicker.js",
"../js/custom.js"
);
global $db;
$year="2008";
$woy="1";
if (isset($_POST['day']))
{
$db->StartTrans();
$sql = "DELETE FROM shift_template
WHERE 1";
$db->Execute($sql);
foreach($_POST['day'] as $key => $val)
@@ -71,71 +85,76 @@ if (isset($_POST['day']))
$sql = "INSERT INTO shift_template (day_of_week,start,end)
VALUES ('$val',$start,$end)";
$db->Execute($sql);
}
}
$db->CompleteTrans();
}
xhtml_head(T_("Modify shift template"),true,array("../css/shifts.css"),array("../js/addrow-v2.js"));
xhtml_head(T_("Set default shift times"),true,$css,$js_head);//T_("Modify shift template"),array("../css/shifts.css"),array("../js/addrow-v2.js")
/**
* Display warning if timezone data not installed
*
*/
$sql = "SELECT CONVERT_TZ(NOW(),'" . DEFAULT_TIME_ZONE . "','UTC') as t";//'Australia/Victoria'
$sql = "SELECT CONVERT_TZ(NOW(),'Australia/Victoria','UTC') as t";
$rs = $db->GetRow($sql);
if (empty($rs) || !$rs || empty($rs['t']))
print "<div class='warning'><a href='http://dev.mysql.com/doc/mysql/en/time-zone-support.html'>" . T_("Your database does not have timezones installed, please see here for details") . "</a></div>";
print "<div class='alert alert-danger'><a href='http://dev.mysql.com/doc/mysql/en/time-zone-support.html'>" . T_("Your database does not have timezones installed, please see here for details") . "</a></div>";
/**
* Display warning if timezone data not installed
print "<h2>" . T_("Enter standard shift start and end times for each day of the week in local time") . "</h2>";
*/
//print "<h1>" . T_("Set default shift times") . "</h1>";
print "<div class='well'><t>" . T_("Enter standard shift start and end times for each day of the week in local time") . "</t></div>";
/**
* Begin displaying currently loaded shifts
*/
$sql = "SELECT DATE_FORMAT( STR_TO_DATE( CONCAT( '$year', ' ', '$woy', ' ', day_of_week -1 ) , '%x %v %w' ) , '%W' ) AS dt,day_of_week,start,end
$sql = "SELECT DATE_FORMAT(STR_TO_DATE(CONCAT('$year',' ','$woy',' ',day_of_week -1),'%x %v %w' ), '%W' ) AS dt,day_of_week,start,end
FROM shift_template";
$shifts = $db->GetAll($sql);
translate_array($shifts,array("dt"));
$sql = "SELECT DATE_FORMAT(STR_TO_DATE(CONCAT($year, ' ',$woy,' ',day_of_week - 1),'%x %v %w'), '%W') as description, day_of_week as value, '' as selected
$sql = "SELECT DATE_FORMAT(STR_TO_DATE(CONCAT($year,' ',$woy,' ',day_of_week - 1),'%x %v %w'), '%W') as description, day_of_week as value, '' as selected
FROM day_of_week";
$daysofweek = $db->GetAll($sql);
translate_array($daysofweek,array("description"));
?>
<form method="post" action="">
<table>
<div class="panel-body col-sm-4"><form method="post" action="" class="form-horizontal">
<table class="table-hover table-condensed " id="shifts"><thead class="text-center highlight">
<?php
print "<tr><th>" . T_("Day") . "</th><th>" . T_("Start") . "</th><th>" . T_("End") . "</th></tr>";
print "<tr ><th >" . T_("Day") . "</th><th >" . T_("Start") . "</th><th >" . T_("End") . "</th></tr></thead><tbody>";
$count = 0;
foreach($shifts as $shift)
{
print "<tr id='row-$count' class='row_to_clone'><td>";
print "<tr id='row-$count'><td>";// class='row_to_clone' /* these are not the rows to clone...*/
display_chooser($daysofweek, "day[$count]", false, true, false, false, false, array("description",$shift['dt']));
print "</td><td><input size=\"8\" name=\"start[$count]\" maxlength=\"8\" type=\"text\" value=\"{$shift['start']}\"/></td><td><input name=\"end[$count]\" type=\"text\" size=\"8\" maxlength=\"8\" value=\"{$shift['end']}\"/></td></tr>";
print "</td>
<td> <input class=\"form-control clockpicker\" size=\"8\" maxlength=\"8\" name=\"start[$count]\" type=\"text\" value=\"{$shift['start']}\"/></td>
<td> <input class=\"form-control clockpicker\" size=\"8\" maxlength=\"8\" name=\"end[$count]\" type=\"text\" value=\"{$shift['end']}\"/></td>
</tr>";
$count++;
}
print "<tr class='row_to_clone' id='row-$count'><td>";
print "<tr class='row_to_clone' id='row-$count'><td>";
display_chooser($daysofweek, "day[$count]", false, true, false, false, false, false);
print "</td><td><input size=\"8\" name=\"start[$count]\" maxlength=\"8\" type=\"text\" value=\"00:00:00\"/></td><td><input name=\"end[$count]\" type=\"text\" size=\"8\" maxlength=\"8\" value=\"00:00:00\"/></td></tr>";
print " </td> <td><input class=\"form-control clockpicker\" size=\"8\" maxlength=\"8\" name=\"start[$count]\" type=\"text\" value=\"08:00:00\"/></td>
<td><input class=\"form-control clockpicker\" size=\"8\" maxlength=\"8\" name=\"end[$count]\" type=\"text\" value=\"20:00:00\"/></td></tr>";
?>
</table>
<div><a onclick="addRow(); return false;" href="#"><?php echo T_("Add row"); ?></a></div>
<p><input type="submit" name="submit" value="<?php echo T_("Save changes to shifts"); ?>"/></p>
</form>
</tbody></table>
<a class="btn btn-default btn-sm" onclick="addRow(); return false;" href=""><?php echo T_("Add row"); ?></a><br/><br/>
<input class="btn btn-default " type="submit" name="submit" value="<?php echo T_("Save changes to shifts"); ?>"/>
</form></div>
<?php
xhtml_foot();
xhtml_foot($js_foot);
?>
<script type="text/javascript">
$('.clockpicker').clockpicker({
autoclose: true
});
</script>

2
css/custom.css
View File

@@ -73,5 +73,5 @@ text-shadow: 1px 2px 1px #ababab;
}
.h1, .h2, .h3, h1, h2, h3 {
margin-bottom: 0.4em;
margin-top: 0.4em;
margin-top: 0.25em;
}

32
functions/functions.display.php
View File

@@ -3,8 +3,6 @@
* Functions relating to displaying for XHTML
*
*
*
*
* This file is part of queXS
*
* queXS is free software; you can redistribute it and/or modify
@@ -31,7 +29,6 @@
*
*/
/**
* Configuration file
*/
@@ -43,30 +40,23 @@ include_once(dirname(__FILE__).'/../config.inc.php');
include_once(dirname(__FILE__).'/../db.inc.php');
/**
* Display a list of questionnaires to choose from in a drop down list
*
* @param int|bool $questionnaire_id The questionnaire id or false if none selecetd
*
*/
function display_questionnaire_chooser($questionnaire_id = false, $overall = false)
function display_questionnaire_chooser($questionnaire_id = false, $overall = false, $divclass=false, $selectclass=false)
{
global $db;
$sql = "SELECT questionnaire_id,description,CASE WHEN questionnaire_id = '$questionnaire_id' THEN 'selected=\'selected\'' ELSE '' END AS selected
FROM questionnaire
WHERE enabled = 1";
$rs = $db->GetAll($sql);
print "<div><select id='questionnaire' name='questionnaire' onchange=\"LinkUp('questionnaire')\"><option value='?'></option>";
print "<div class='$divclass'><select class='$selectclass' id='questionnaire' name='questionnaire' onchange=\"LinkUp('questionnaire')\"><option value='?'></option>";
if (!empty($rs))
{
if (is_array($overall))
@@ -92,7 +82,7 @@ function display_questionnaire_chooser($questionnaire_id = false, $overall = fal
* @param int $questionnaire_id The questionnaire id
* @param int|bool $shift_id The shift id or false if none selected
*/
function display_shift_chooser($questionnaire_id, $shift_id = false)
function display_shift_chooser($questionnaire_id, $shift_id = false, $divclass=false, $selectclass=false)
{
global $db;
@@ -103,7 +93,7 @@ function display_shift_chooser($questionnaire_id, $shift_id = false)
$rs = $db->GetAll($sql);
print "<div><select id='shift' name='shift' onchange=\"LinkUp('shift')\"><option value='?questionnaire_id=$questionnaire_id'></option>";
print "<div class='$divclass'><select class='$selectclass' id='shift' name='shift' onchange=\"LinkUp('shift')\"><option value='?questionnaire_id=$questionnaire_id'></option>";
if (!empty($rs))
{
foreach($rs as $r)
@@ -121,13 +111,13 @@ function display_shift_chooser($questionnaire_id, $shift_id = false)
* @param int|bool $sample_import_id The sample import id or false if none selected
* @param bool $disabled Display disabled samples? (default is true)
*/
function display_sample_chooser($questionnaire_id, $sample_import_id = false, $disabled = true)
function display_sample_chooser($questionnaire_id, $sample_import_id = false, $disabled = true, $divclass=false, $selectclass=false)
{
global $db;
$s = "";
$s = "";
if (!$disabled)
if (!$disabled)
$s = " AND si.enabled = 1 ";
$sql = "SELECT s.sample_import_id,si.description,CASE WHEN s.sample_import_id = '$sample_import_id' THEN 'selected=\'selected\'' ELSE '' END AS selected
@@ -137,7 +127,7 @@ function display_sample_chooser($questionnaire_id, $sample_import_id = false, $d
$rs = $db->GetAll($sql);
print "<div><select id='sample' name='sample' onchange=\"LinkUp('sample')\"><option value='?questionnaire_id=$questionnaire_id'></option>";
print "<div class='$divclass'><select class='$selectclass' id='sample' name='sample' onchange=\"LinkUp('sample')\"><option value='?questionnaire_id=$questionnaire_id'></option>";
if (!empty($rs))
{
foreach($rs as $r)
@@ -155,7 +145,7 @@ function display_sample_chooser($questionnaire_id, $sample_import_id = false, $d
* @param int $sample_import_id The sample import id
* @param int|bool $qsqri The sample import id or false if none selected
*/
function display_quota_chooser($questionnaire_id, $sample_import_id, $qsqri = false)
function display_quota_chooser($questionnaire_id, $sample_import_id, $qsqri = false, $divclass=false, $selectclass=false)
{
global $db;
@@ -166,7 +156,7 @@ function display_quota_chooser($questionnaire_id, $sample_import_id, $qsqri = fa
$rs = $db->GetAll($sql);
print "<div><select id='questionnaire_sample_quota_row_id' name='questionnaire_sample_quota_row_id' onchange=\"LinkUp('questionnaire_sample_quota_row_id')\"><option value='?questionnaire_id=$questionnaire_id&amp;sample_import_id=$sample_import_id'></option>";
print "<div class='$divclass'><select class='$selectclass' id='questionnaire_sample_quota_row_id' name='questionnaire_sample_quota_row_id' onchange=\"LinkUp('questionnaire_sample_quota_row_id')\"><option value='?questionnaire_id=$questionnaire_id&amp;sample_import_id=$sample_import_id'></option>";
if (!empty($rs))
{
foreach($rs as $r)
@@ -177,6 +167,4 @@ function display_quota_chooser($questionnaire_id, $sample_import_id, $qsqri = fa
print "</select></div>";
}
?>

10
functions/functions.xhtml.php
View File

@@ -146,10 +146,10 @@ function xhtml_table($content,$fields,$head = false,$class = "tclass",$highlight
print "<tr>";
foreach ($fields as $e)
{
print "<td>";
print "<td><b>";
if (in_array($e,$total))
print $tot[$e];
print "</td>";
print "</b></td>";
}
print "</tr>";
}
@@ -176,11 +176,11 @@ function xhtml_table($content,$fields,$head = false,$class = "tclass",$highlight
* @param bool $print Default is true, print the chooser otherwise return as a string
*
*/
function display_chooser($elements, $selectid, $var, $useblank = true, $pass = false, $js = true, $indiv = true, $selected = false, $print = true, $class=false)
function display_chooser($elements, $selectid, $var, $useblank = true, $pass = false, $js = true, $indiv = true, $selected = false, $print = true, $divclass=false, $selectclass="form-control")
{
$out = "";
if ($indiv) $out .= "<div class='$class'>";
$out .= "<select id='$selectid' name='$selectid' class='form-control'" ;
if ($indiv) $out .= "<div class='$divclass'>";
$out .= "<select id='$selectid' name='$selectid' class='$selectclass'" ;
if ($js) $out .= "onchange=\"LinkUp('$selectid')\"";
$out .= ">";
if ($useblank)

21
include/clockpicker/LICENSE Normal file
View File

@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2014 Wang Shenwei
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

168
include/clockpicker/dist/bootstrap-clockpicker.css vendored Normal file
View File

@@ -0,0 +1,168 @@
/*!
* ClockPicker v0.0.7 for Bootstrap (http://weareoutman.github.io/clockpicker/)
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
*/
.clockpicker .input-group-addon {
cursor: pointer;
}
.clockpicker-moving {
cursor: move;
}
.clockpicker-align-left.popover > .arrow {
left: 25px;
}
.clockpicker-align-top.popover > .arrow {
top: 17px;
}
.clockpicker-align-right.popover > .arrow {
left: auto;
right: 25px;
}
.clockpicker-align-bottom.popover > .arrow {
top: auto;
bottom: 6px;
}
.clockpicker-popover .popover-title {
background-color: #fff;
color: #999;
font-size: 24px;
font-weight: bold;
line-height: 30px;
text-align: center;
}
.clockpicker-popover .popover-title span {
cursor: pointer;
}
.clockpicker-popover .popover-content {
background-color: #f8f8f8;
padding: 12px;
}
.popover-content:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.clockpicker-plate {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
overflow: visible;
position: relative;
/* Disable text selection highlighting. Thanks to Hermanya */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.clockpicker-canvas,
.clockpicker-dial {
width: 200px;
height: 200px;
position: absolute;
left: -1px;
top: -1px;
}
.clockpicker-minutes {
visibility: hidden;
}
.clockpicker-tick {
border-radius: 50%;
color: #666;
line-height: 26px;
text-align: center;
width: 26px;
height: 26px;
position: absolute;
cursor: pointer;
}
.clockpicker-tick.active,
.clockpicker-tick:hover {
background-color: rgb(192, 229, 247);
background-color: rgba(0, 149, 221, .25);
}
.clockpicker-button {
background-image: none;
background-color: #fff;
border-width: 1px 0 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin: 0;
padding: 10px 0;
}
.clockpicker-button:hover {
background-image: none;
background-color: #ebebeb;
}
.clockpicker-button:focus {
outline: none!important;
}
.clockpicker-dial {
-webkit-transition: -webkit-transform 350ms, opacity 350ms;
-moz-transition: -moz-transform 350ms, opacity 350ms;
-ms-transition: -ms-transform 350ms, opacity 350ms;
-o-transition: -o-transform 350ms, opacity 350ms;
transition: transform 350ms, opacity 350ms;
}
.clockpicker-dial-out {
opacity: 0;
}
.clockpicker-hours.clockpicker-dial-out {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
.clockpicker-minutes.clockpicker-dial-out {
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
-ms-transform: scale(.8, .8);
-o-transform: scale(.8, .8);
transform: scale(.8, .8);
}
.clockpicker-canvas {
-webkit-transition: opacity 175ms;
-moz-transition: opacity 175ms;
-ms-transition: opacity 175ms;
-o-transition: opacity 175ms;
transition: opacity 175ms;
}
.clockpicker-canvas-out {
opacity: 0.25;
}
.clockpicker-canvas-bearing,
.clockpicker-canvas-fg {
stroke: none;
fill: rgb(0, 149, 221);
}
.clockpicker-canvas-bg {
stroke: none;
fill: rgb(192, 229, 247);
}
.clockpicker-canvas-bg-trans {
fill: rgba(0, 149, 221, .25);
}
.clockpicker-canvas line {
stroke: rgb(0, 149, 221);
stroke-width: 1;
stroke-linecap: round;
/*shape-rendering: crispEdges;*/
}
.clockpicker-button.am-button {
margin: 1px;
padding: 5px;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 4px;
}
.clockpicker-button.pm-button {
margin: 1px 1px 1px 136px;
padding: 5px;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 4px;
}

729
include/clockpicker/dist/bootstrap-clockpicker.js vendored Normal file
View File

@@ -0,0 +1,729 @@
/*!
* ClockPicker v0.0.7 (http://weareoutman.github.io/clockpicker/)
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
*/
;(function(){
var $ = window.jQuery,
$win = $(window),
$doc = $(document),
$body;
// Can I use inline svg ?
var svgNS = 'http://www.w3.org/2000/svg',
svgSupported = 'SVGAngle' in window && (function(){
var supported,
el = document.createElement('div');
el.innerHTML = '<svg/>';
supported = (el.firstChild && el.firstChild.namespaceURI) == svgNS;
el.innerHTML = '';
return supported;
})();
// Can I use transition ?
var transitionSupported = (function(){
var style = document.createElement('div').style;
return 'transition' in style ||
'WebkitTransition' in style ||
'MozTransition' in style ||
'msTransition' in style ||
'OTransition' in style;
})();
// Listen touch events in touch screen device, instead of mouse events in desktop.
var touchSupported = 'ontouchstart' in window,
mousedownEvent = 'mousedown' + ( touchSupported ? ' touchstart' : ''),
mousemoveEvent = 'mousemove.clockpicker' + ( touchSupported ? ' touchmove.clockpicker' : ''),
mouseupEvent = 'mouseup.clockpicker' + ( touchSupported ? ' touchend.clockpicker' : '');
// Vibrate the device if supported
var vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
function createSvgElement(name) {
return document.createElementNS(svgNS, name);
}
function leadingZero(num) {
return (num < 10 ? '0' : '') + num;
}
// Get a unique id
var idCounter = 0;
function uniqueId(prefix) {
var id = ++idCounter + '';
return prefix ? prefix + id : id;
}
// Clock size
var dialRadius = 100,
outerRadius = 80,
// innerRadius = 80 on 12 hour clock
innerRadius = 54,
tickRadius = 13,
diameter = dialRadius * 2,
duration = transitionSupported ? 350 : 1;
// Popover template
var tpl = [
'<div class="popover clockpicker-popover">',
'<div class="arrow"></div>',
'<div class="popover-title">',
'<span class="clockpicker-span-hours text-primary"></span>',
' : ',
'<span class="clockpicker-span-minutes"></span>',
'<span class="clockpicker-span-am-pm"></span>',
'</div>',
'<div class="popover-content">',
'<div class="clockpicker-plate">',
'<div class="clockpicker-canvas"></div>',
'<div class="clockpicker-dial clockpicker-hours"></div>',
'<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>',
'</div>',
'<span class="clockpicker-am-pm-block">',
'</span>',
'</div>',
'</div>'
].join('');
// ClockPicker
function ClockPicker(element, options) {
var popover = $(tpl),
plate = popover.find('.clockpicker-plate'),
hoursView = popover.find('.clockpicker-hours'),
minutesView = popover.find('.clockpicker-minutes'),
amPmBlock = popover.find('.clockpicker-am-pm-block'),
isInput = element.prop('tagName') === 'INPUT',
input = isInput ? element : element.find('input'),
addon = element.find('.input-group-addon'),
self = this,
timer;
this.id = uniqueId('cp');
this.element = element;
this.options = options;
this.isAppended = false;
this.isShown = false;
this.currentView = 'hours';
this.isInput = isInput;
this.input = input;
this.addon = addon;
this.popover = popover;
this.plate = plate;
this.hoursView = hoursView;
this.minutesView = minutesView;
this.amPmBlock = amPmBlock;
this.spanHours = popover.find('.clockpicker-span-hours');
this.spanMinutes = popover.find('.clockpicker-span-minutes');
this.spanAmPm = popover.find('.clockpicker-span-am-pm');
this.amOrPm = "PM";
// Setup for for 12 hour clock if option is selected
if (options.twelvehour) {
var amPmButtonsTemplate = ['<div class="clockpicker-am-pm-block">',
'<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-am-button">',
'AM</button>',
'<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-pm-button">',
'PM</button>',
'</div>'].join('');
var amPmButtons = $(amPmButtonsTemplate);
//amPmButtons.appendTo(plate);
////Not working b/c they are not shown when this runs
//$('clockpicker-am-button')
// .on("click", function() {
// self.amOrPm = "AM";
// $('.clockpicker-span-am-pm').empty().append('AM');
// });
//
//$('clockpicker-pm-button')
// .on("click", function() {
// self.amOrPm = "PM";
// $('.clockpicker-span-am-pm').empty().append('PM');
// });
$('<button type="button" class="btn btn-sm btn-default clockpicker-button am-button">' + "AM" + '</button>')
.on("click", function() {
self.amOrPm = "AM";
$('.clockpicker-span-am-pm').empty().append('AM');
}).appendTo(this.amPmBlock);
$('<button type="button" class="btn btn-sm btn-default clockpicker-button pm-button">' + "PM" + '</button>')
.on("click", function() {
self.amOrPm = 'PM';
$('.clockpicker-span-am-pm').empty().append('PM');
}).appendTo(this.amPmBlock);
}
if (! options.autoclose) {
// If autoclose is not setted, append a button
$('<button type="button" class="btn btn-sm btn-default btn-block clockpicker-button">' + options.donetext + '</button>')
.click($.proxy(this.done, this))
.appendTo(popover);
}
// Placement and arrow align - make sure they make sense.
if ((options.placement === 'top' || options.placement === 'bottom') && (options.align === 'top' || options.align === 'bottom')) options.align = 'left';
if ((options.placement === 'left' || options.placement === 'right') && (options.align === 'left' || options.align === 'right')) options.align = 'top';
popover.addClass(options.placement);
popover.addClass('clockpicker-align-' + options.align);
this.spanHours.click($.proxy(this.toggleView, this, 'hours'));
this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
// Show or toggle
input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
addon.on('click.clockpicker', $.proxy(this.toggle, this));
// Build ticks
var tickTpl = $('<div class="clockpicker-tick"></div>'),
i, tick, radian, radius;
// Hours view
if (options.twelvehour) {
for (i = 1; i < 13; i += 1) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
radius = outerRadius;
tick.css('font-size', '120%');
tick.css({
left: dialRadius + Math.sin(radian) * radius - tickRadius,
top: dialRadius - Math.cos(radian) * radius - tickRadius
});
tick.html(i === 0 ? '00' : i);
hoursView.append(tick);
tick.on(mousedownEvent, mousedown);
}
} else {
for (i = 0; i < 24; i += 1) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
var inner = i > 0 && i < 13;
radius = inner ? innerRadius : outerRadius;
tick.css({
left: dialRadius + Math.sin(radian) * radius - tickRadius,
top: dialRadius - Math.cos(radian) * radius - tickRadius
});
if (inner) {
tick.css('font-size', '120%');
}
tick.html(i === 0 ? '00' : i);
hoursView.append(tick);
tick.on(mousedownEvent, mousedown);
}
}
// Minutes view
for (i = 0; i < 60; i += 5) {
tick = tickTpl.clone();
radian = i / 30 * Math.PI;
tick.css({
left: dialRadius + Math.sin(radian) * outerRadius - tickRadius,
top: dialRadius - Math.cos(radian) * outerRadius - tickRadius
});
tick.css('font-size', '120%');
tick.html(leadingZero(i));
minutesView.append(tick);
tick.on(mousedownEvent, mousedown);
}
// Clicking on minutes view space
plate.on(mousedownEvent, function(e){
if ($(e.target).closest('.clockpicker-tick').length === 0) {
mousedown(e, true);
}
});
// Mousedown or touchstart
function mousedown(e, space) {
var offset = plate.offset(),
isTouch = /^touch/.test(e.type),
x0 = offset.left + dialRadius,
y0 = offset.top + dialRadius,
dx = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
dy = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0,
z = Math.sqrt(dx * dx + dy * dy),
moved = false;
// When clicking on minutes view space, check the mouse position
if (space && (z < outerRadius - tickRadius || z > outerRadius + tickRadius)) {
return;
}
e.preventDefault();
// Set cursor style of body after 200ms
var movingTimer = setTimeout(function(){
$body.addClass('clockpicker-moving');
}, 200);
// Place the canvas to top
if (svgSupported) {
plate.append(self.canvas);
}
// Clock
self.setHand(dx, dy, ! space, true);
// Mousemove on document
$doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
e.preventDefault();
var isTouch = /^touch/.test(e.type),
x = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
y = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0;
if (! moved && x === dx && y === dy) {
// Clicking in chrome on windows will trigger a mousemove event
return;
}
moved = true;
self.setHand(x, y, false, true);
});
// Mouseup on document
$doc.off(mouseupEvent).on(mouseupEvent, function(e){
$doc.off(mouseupEvent);
e.preventDefault();
var isTouch = /^touch/.test(e.type),
x = (isTouch ? e.originalEvent.changedTouches[0] : e).pageX - x0,
y = (isTouch ? e.originalEvent.changedTouches[0] : e).pageY - y0;
if ((space || moved) && x === dx && y === dy) {
self.setHand(x, y);
}
if (self.currentView === 'hours') {
self.toggleView('minutes', duration / 2);
} else {
if (options.autoclose) {
self.minutesView.addClass('clockpicker-dial-out');
setTimeout(function(){
self.done();
}, duration / 2);
}
}
plate.prepend(canvas);
// Reset cursor style of body
clearTimeout(movingTimer);
$body.removeClass('clockpicker-moving');
// Unbind mousemove event
$doc.off(mousemoveEvent);
});
}
if (svgSupported) {
// Draw clock hands and others
var canvas = popover.find('.clockpicker-canvas'),
svg = createSvgElement('svg');
svg.setAttribute('class', 'clockpicker-svg');
svg.setAttribute('width', diameter);
svg.setAttribute('height', diameter);
var g = createSvgElement('g');
g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
var bearing = createSvgElement('circle');
bearing.setAttribute('class', 'clockpicker-canvas-bearing');
bearing.setAttribute('cx', 0);
bearing.setAttribute('cy', 0);
bearing.setAttribute('r', 2);
var hand = createSvgElement('line');
hand.setAttribute('x1', 0);
hand.setAttribute('y1', 0);
var bg = createSvgElement('circle');
bg.setAttribute('class', 'clockpicker-canvas-bg');
bg.setAttribute('r', tickRadius);
var fg = createSvgElement('circle');
fg.setAttribute('class', 'clockpicker-canvas-fg');
fg.setAttribute('r', 3.5);
g.appendChild(hand);
g.appendChild(bg);
g.appendChild(fg);
g.appendChild(bearing);
svg.appendChild(g);
canvas.append(svg);
this.hand = hand;
this.bg = bg;
this.fg = fg;
this.bearing = bearing;
this.g = g;
this.canvas = canvas;
}
raiseCallback(this.options.init);
}
function raiseCallback(callbackFunction) {
if (callbackFunction && typeof callbackFunction === "function") {
callbackFunction();
}
}
// Default options
ClockPicker.DEFAULTS = {
'default': '', // default time, 'now' or '13:14' e.g.
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
placement: 'bottom', // clock popover placement
align: 'left', // popover arrow align
donetext: '完成', // done button text
autoclose: false, // auto close when minute is selected
twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
vibrate: true // vibrate the device when dragging clock hand
};
// Show or hide popover
ClockPicker.prototype.toggle = function(){
this[this.isShown ? 'hide' : 'show']();
};
// Set popover position
ClockPicker.prototype.locate = function(){
var element = this.element,
popover = this.popover,
offset = element.offset(),
width = element.outerWidth(),
height = element.outerHeight(),
placement = this.options.placement,
align = this.options.align,
styles = {},
self = this;
popover.show();
// Place the popover
switch (placement) {
case 'bottom':
styles.top = offset.top + height;
break;
case 'right':
styles.left = offset.left + width;
break;
case 'top':
styles.top = offset.top - popover.outerHeight();
break;
case 'left':
styles.left = offset.left - popover.outerWidth();
break;
}
// Align the popover arrow
switch (align) {
case 'left':
styles.left = offset.left;
break;
case 'right':
styles.left = offset.left + width - popover.outerWidth();
break;
case 'top':
styles.top = offset.top;
break;
case 'bottom':
styles.top = offset.top + height - popover.outerHeight();
break;
}
popover.css(styles);
};
// Show popover
ClockPicker.prototype.show = function(e){
// Not show again
if (this.isShown) {
return;
}
raiseCallback(this.options.beforeShow);
var self = this;
// Initialize
if (! this.isAppended) {
// Append popover to body
$body = $(document.body).append(this.popover);
// Reset position when resize
$win.on('resize.clockpicker' + this.id, function(){
if (self.isShown) {
self.locate();
}
});
this.isAppended = true;
}
// Get the time
var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':');
if (value[0] === 'now') {
var now = new Date(+ new Date() + this.options.fromnow);
value = [
now.getHours(),
now.getMinutes()
];
}
this.hours = + value[0] || 0;
this.minutes = + value[1] || 0;
this.spanHours.html(leadingZero(this.hours));
this.spanMinutes.html(leadingZero(this.minutes));
// Toggle to hours view
this.toggleView('hours');
// Set position
this.locate();
this.isShown = true;
// Hide when clicking or tabbing on any element except the clock, input and addon
$doc.on('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id, function(e){
var target = $(e.target);
if (target.closest(self.popover).length === 0 &&
target.closest(self.addon).length === 0 &&
target.closest(self.input).length === 0) {
self.hide();
}
});
// Hide when ESC is pressed
$doc.on('keyup.clockpicker.' + this.id, function(e){
if (e.keyCode === 27) {
self.hide();
}
});
raiseCallback(this.options.afterShow);
};
// Hide popover
ClockPicker.prototype.hide = function(){
raiseCallback(this.options.beforeHide);
this.isShown = false;
// Unbinding events on document
$doc.off('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id);
$doc.off('keyup.clockpicker.' + this.id);
this.popover.hide();
raiseCallback(this.options.afterHide);
};
// Toggle to hours or minutes view
ClockPicker.prototype.toggleView = function(view, delay){
var raiseAfterHourSelect = false;
if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
raiseCallback(this.options.beforeHourSelect);
raiseAfterHourSelect = true;
}
var isHours = view === 'hours',
nextView = isHours ? this.hoursView : this.minutesView,
hideView = isHours ? this.minutesView : this.hoursView;
this.currentView = view;
this.spanHours.toggleClass('text-primary', isHours);
this.spanMinutes.toggleClass('text-primary', ! isHours);
// Let's make transitions
hideView.addClass('clockpicker-dial-out');
nextView.css('visibility', 'visible').removeClass('clockpicker-dial-out');
// Reset clock hand
this.resetClock(delay);
// After transitions ended
clearTimeout(this.toggleViewTimer);
this.toggleViewTimer = setTimeout(function(){
hideView.css('visibility', 'hidden');
}, duration);
if (raiseAfterHourSelect) {
raiseCallback(this.options.afterHourSelect);
}
};
// Reset clock hand
ClockPicker.prototype.resetClock = function(delay){
var view = this.currentView,
value = this[view],
isHours = view === 'hours',
unit = Math.PI / (isHours ? 6 : 30),
radian = value * unit,
radius = isHours && value > 0 && value < 13 ? innerRadius : outerRadius,
x = Math.sin(radian) * radius,
y = - Math.cos(radian) * radius,
self = this;
if (svgSupported && delay) {
self.canvas.addClass('clockpicker-canvas-out');
setTimeout(function(){
self.canvas.removeClass('clockpicker-canvas-out');
self.setHand(x, y);
}, delay);
} else {
this.setHand(x, y);
}
};
// Set clock hand to (x, y)
ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging){
var radian = Math.atan2(x, - y),
isHours = this.currentView === 'hours',
unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
z = Math.sqrt(x * x + y * y),
options = this.options,
inner = isHours && z < (outerRadius + innerRadius) / 2,
radius = inner ? innerRadius : outerRadius,
value;
if (options.twelvehour) {
radius = outerRadius;
}
// Radian should in range [0, 2PI]
if (radian < 0) {
radian = Math.PI * 2 + radian;
}
// Get the round value
value = Math.round(radian / unit);
// Get the round radian
radian = value * unit;
// Correct the hours or minutes
if (options.twelvehour) {
if (isHours) {
if (value === 0) {
value = 12;
}
} else {
if (roundBy5) {
value *= 5;
}
if (value === 60) {
value = 0;
}
}
} else {
if (isHours) {
if (value === 12) {
value = 0;
}
value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
} else {
if (roundBy5) {
value *= 5;
}
if (value === 60) {
value = 0;
}
}
}
// Once hours or minutes changed, vibrate the device
if (this[this.currentView] !== value) {
if (vibrate && this.options.vibrate) {
// Do not vibrate too frequently
if (! this.vibrateTimer) {
navigator[vibrate](10);
this.vibrateTimer = setTimeout($.proxy(function(){
this.vibrateTimer = null;
}, this), 100);
}
}
}
this[this.currentView] = value;
this[isHours ? 'spanHours' : 'spanMinutes'].html(leadingZero(value));
// If svg is not supported, just add an active class to the tick
if (! svgSupported) {
this[isHours ? 'hoursView' : 'minutesView'].find('.clockpicker-tick').each(function(){
var tick = $(this);
tick.toggleClass('active', value === + tick.html());
});
return;
}
// Place clock hand at the top when dragging
if (dragging || (! isHours && value % 5)) {
this.g.insertBefore(this.hand, this.bearing);
this.g.insertBefore(this.bg, this.fg);
this.bg.setAttribute('class', 'clockpicker-canvas-bg clockpicker-canvas-bg-trans');
} else {
// Or place it at the bottom
this.g.insertBefore(this.hand, this.bg);
this.g.insertBefore(this.fg, this.bg);
this.bg.setAttribute('class', 'clockpicker-canvas-bg');
}
// Set clock hand and others' position
var cx = Math.sin(radian) * radius,
cy = - Math.cos(radian) * radius;
this.hand.setAttribute('x2', cx);
this.hand.setAttribute('y2', cy);
this.bg.setAttribute('cx', cx);
this.bg.setAttribute('cy', cy);
this.fg.setAttribute('cx', cx);
this.fg.setAttribute('cy', cy);
};
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
raiseCallback(this.options.beforeDone);
this.hide();
var last = this.input.prop('value'),
value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
if (this.options.twelvehour) {
value = value + this.amOrPm;
}
this.input.prop('value', value);
if (value !== last) {
this.input.triggerHandler('change');
if (! this.isInput) {
this.element.trigger('change');
}
}
if (this.options.autoclose) {
this.input.trigger('blur');
}
raiseCallback(this.options.afterDone);
};
// Remove clockpicker from input
ClockPicker.prototype.remove = function() {
this.element.removeData('clockpicker');
this.input.off('focus.clockpicker click.clockpicker');
this.addon.off('click.clockpicker');
if (this.isShown) {
this.hide();
}
if (this.isAppended) {
$win.off('resize.clockpicker' + this.id);
this.popover.remove();
}
};
// Extends $.fn.clockpicker
$.fn.clockpicker = function(option){
var args = Array.prototype.slice.call(arguments, 1);
return this.each(function(){
var $this = $(this),
data = $this.data('clockpicker');
if (! data) {
var options = $.extend({}, ClockPicker.DEFAULTS, $this.data(), typeof option == 'object' && option);
$this.data('clockpicker', new ClockPicker($this, options));
} else {
// Manual operatsions. show, hide, remove, e.g.
if (typeof data[option] === 'function') {
data[option].apply(data, args);
}
}
});
};
}());

5
include/clockpicker/dist/bootstrap-clockpicker.min.css vendored Normal file
View File

@@ -0,0 +1,5 @@
/*!
* ClockPicker v0.0.7 for Bootstrap (http://weareoutman.github.io/clockpicker/)
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
*/.clockpicker .input-group-addon{cursor:pointer}.clockpicker-moving{cursor:move}.clockpicker-align-left.popover>.arrow{left:25px}.clockpicker-align-top.popover>.arrow{top:17px}.clockpicker-align-right.popover>.arrow{left:auto;right:25px}.clockpicker-align-bottom.popover>.arrow{top:auto;bottom:6px}.clockpicker-popover .popover-title{background-color:#fff;color:#999;font-size:24px;font-weight:700;line-height:30px;text-align:center}.clockpicker-popover .popover-title span{cursor:pointer}.clockpicker-popover .popover-content{background-color:#f8f8f8;padding:12px}.popover-content:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.clockpicker-plate{background-color:#fff;border:1px solid #ccc;border-radius:50%;width:200px;height:200px;overflow:visible;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.clockpicker-canvas,.clockpicker-dial{width:200px;height:200px;position:absolute;left:-1px;top:-1px}.clockpicker-minutes{visibility:hidden}.clockpicker-tick{border-radius:50%;color:#666;line-height:26px;text-align:center;width:26px;height:26px;position:absolute;cursor:pointer}.clockpicker-tick.active,.clockpicker-tick:hover{background-color:#c0e5f7;background-color:rgba(0,149,221,.25)}.clockpicker-button{background-image:none;background-color:#fff;border-width:1px 0 0;border-top-left-radius:0;border-top-right-radius:0;margin:0;padding:10px 0}.clockpicker-button:hover{background-image:none;background-color:#ebebeb}.clockpicker-button:focus{outline:0!important}.clockpicker-dial{-webkit-transition:-webkit-transform 350ms,opacity 350ms;-moz-transition:-moz-transform 350ms,opacity 350ms;-ms-transition:-ms-transform 350ms,opacity 350ms;-o-transition:-o-transform 350ms,opacity 350ms;transition:transform 350ms,opacity 350ms}.clockpicker-dial-out{opacity:0}.clockpicker-hours.clockpicker-dial-out{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2)}.clockpicker-minutes.clockpicker-dial-out{-webkit-transform:scale(.8,.8);-moz-transform:scale(.8,.8);-ms-transform:scale(.8,.8);-o-transform:scale(.8,.8);transform:scale(.8,.8)}.clockpicker-canvas{-webkit-transition:opacity 175ms;-moz-transition:opacity 175ms;-ms-transition:opacity 175ms;-o-transition:opacity 175ms;transition:opacity 175ms}.clockpicker-canvas-out{opacity:.25}.clockpicker-canvas-bearing,.clockpicker-canvas-fg{stroke:none;fill:#0095dd}.clockpicker-canvas-bg{stroke:none;fill:#c0e5f7}.clockpicker-canvas-bg-trans{fill:rgba(0,149,221,.25)}.clockpicker-canvas line{stroke:#0095dd;stroke-width:1;stroke-linecap:round}.clockpicker-button.am-button{margin:1px;padding:5px;border:1px solid rgba(0,0,0,.2);border-radius:4px}.clockpicker-button.pm-button{margin:1px 1px 1px 136px;padding:5px;border:1px solid rgba(0,0,0,.2);border-radius:4px}

6
include/clockpicker/dist/bootstrap-clockpicker.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

370
include/clockpicker/dist/jquery-clockpicker.css vendored Normal file
View File

@@ -0,0 +1,370 @@
/*!
* ClockPicker v0.0.7 for jQuery (http://weareoutman.github.io/clockpicker/)
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
*
* Bootstrap v3.1.1 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/* Picked from bootstrap: .popover, .btn, .text-primary */
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
max-width: 276px;
padding: 1px;
text-align: left;
white-space: normal;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover.top {
margin-top: -10px;
}
.popover.right {
margin-left: 10px;
}
.popover.bottom {
margin-top: 10px;
}
.popover.left {
margin-left: -10px;
}
.popover-title {
padding: 8px 14px;
margin: 0;
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 9px 14px;
}
.popover > .arrow,
.popover > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
/* The following are set in WordPress (wp-admin/css/revisions.css) - reset them to initial values */
overflow:visible;
margin:0;
padding:0;
z-index:auto;
background-color:transparent;
-webkit-box-shadow:none;
box-shadow:none;
bottom:auto;
left:auto;
right:auto;
top:auto;
-webkit-transform:none;
-ms-transform:none;
transform:none;
}
.popover > .arrow {
border-width: 11px;
}
.popover > .arrow:after {
content: "";
border-width: 10px;
}
.popover.top > .arrow {
bottom: -11px;
left: 50%;
margin-left: -11px;
border-top-color: #999;
border-top-color: rgba(0, 0, 0, .25);
border-bottom-width: 0;
}
.popover.top > .arrow:after {
bottom: 1px;
margin-left: -10px;
content: " ";
border-top-color: #fff;
border-bottom-width: 0;
}
.popover.right > .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-right-color: #999;
border-right-color: rgba(0, 0, 0, .25);
border-left-width: 0;
}
.popover.right > .arrow:after {
bottom: -10px;
left: 1px;
content: " ";
border-right-color: #fff;
border-left-width: 0;
}
.popover.bottom > .arrow {
top: -11px;
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, .25);
}
.popover.bottom > .arrow:after {
top: 1px;
margin-left: -10px;
content: " ";
border-top-width: 0;
border-bottom-color: #fff;
}
.popover.left > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, .25);
}
.popover.left > .arrow:after {
right: 1px;
bottom: -10px;
content: " ";
border-right-width: 0;
border-left-color: #fff;
}
.btn {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover,
.btn:focus {
color: #333;
text-decoration: none;
}
.btn:active,
.btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
background-image: none;
}
.btn-block {
display: block;
width: 100%;
}
.text-primary {
color: #428bca;
}
/*!
* ClockPicker v{package.version} for Bootstrap (http://weareoutman.github.io/clockpicker/)
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
*/
.clockpicker .input-group-addon {
cursor: pointer;
}
.clockpicker-moving {
cursor: move;
}
.clockpicker-align-left.popover > .arrow {
left: 25px;
}
.clockpicker-align-top.popover > .arrow {
top: 17px;
}
.clockpicker-align-right.popover > .arrow {
left: auto;
right: 25px;
}
.clockpicker-align-bottom.popover > .arrow {
top: auto;
bottom: 6px;
}
.clockpicker-popover .popover-title {
background-color: #fff;
color: #999;
font-size: 24px;
font-weight: bold;
line-height: 30px;
text-align: center;
}
.clockpicker-popover .popover-title span {
cursor: pointer;
}
.clockpicker-popover .popover-content {
background-color: #f8f8f8;
padding: 12px;
}
.popover-content:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.clockpicker-plate {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
overflow: visible;
position: relative;
/* Disable text selection highlighting. Thanks to Hermanya */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.clockpicker-canvas,
.clockpicker-dial {
width: 200px;
height: 200px;
position: absolute;
left: -1px;
top: -1px;
}
.clockpicker-minutes {
visibility: hidden;
}
.clockpicker-tick {
border-radius: 50%;
color: #666;
line-height: 26px;
text-align: center;
width: 26px;
height: 26px;
position: absolute;
cursor: pointer;
}
.clockpicker-tick.active,
.clockpicker-tick:hover {
background-color: rgb(192, 229, 247);
background-color: rgba(0, 149, 221, .25);
}
.clockpicker-button {
background-image: none;
background-color: #fff;
border-width: 1px 0 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin: 0;
padding: 10px 0;
}
.clockpicker-button:hover {
background-image: none;
background-color: #ebebeb;
}
.clockpicker-button:focus {
outline: none!important;
}
.clockpicker-dial {
-webkit-transition: -webkit-transform 350ms, opacity 350ms;
-moz-transition: -moz-transform 350ms, opacity 350ms;
-ms-transition: -ms-transform 350ms, opacity 350ms;
-o-transition: -o-transform 350ms, opacity 350ms;
transition: transform 350ms, opacity 350ms;
}
.clockpicker-dial-out {
opacity: 0;
}
.clockpicker-hours.clockpicker-dial-out {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
.clockpicker-minutes.clockpicker-dial-out {
-webkit-transform: scale(.8, .8);
-moz-transform: scale(.8, .8);
-ms-transform: scale(.8, .8);
-o-transform: scale(.8, .8);
transform: scale(.8, .8);
}
.clockpicker-canvas {
-webkit-transition: opacity 175ms;
-moz-transition: opacity 175ms;
-ms-transition: opacity 175ms;
-o-transition: opacity 175ms;
transition: opacity 175ms;
}
.clockpicker-canvas-out {
opacity: 0.25;
}
.clockpicker-canvas-bearing,
.clockpicker-canvas-fg {
stroke: none;
fill: rgb(0, 149, 221);
}
.clockpicker-canvas-bg {
stroke: none;
fill: rgb(192, 229, 247);
}
.clockpicker-canvas-bg-trans {
fill: rgba(0, 149, 221, .25);
}
.clockpicker-canvas line {
stroke: rgb(0, 149, 221);
stroke-width: 1;
stroke-linecap: round;
/*shape-rendering: crispEdges;*/
}
.clockpicker-button.am-button {
margin: 1px;
padding: 5px;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 4px;
}
.clockpicker-button.pm-button {
margin: 1px 1px 1px 136px;
padding: 5px;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 4px;
}

729
include/clockpicker/dist/jquery-clockpicker.js vendored Normal file
View File

@@ -0,0 +1,729 @@
/*!
* ClockPicker v0.0.7 (http://weareoutman.github.io/clockpicker/)
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
*/
;(function(){
var $ = window.jQuery,
$win = $(window),
$doc = $(document),
$body;
// Can I use inline svg ?
var svgNS = 'http://www.w3.org/2000/svg',
svgSupported = 'SVGAngle' in window && (function(){
var supported,
el = document.createElement('div');
el.innerHTML = '<svg/>';
supported = (el.firstChild && el.firstChild.namespaceURI) == svgNS;
el.innerHTML = '';
return supported;
})();
// Can I use transition ?
var transitionSupported = (function(){
var style = document.createElement('div').style;
return 'transition' in style ||
'WebkitTransition' in style ||
'MozTransition' in style ||
'msTransition' in style ||
'OTransition' in style;
})();
// Listen touch events in touch screen device, instead of mouse events in desktop.
var touchSupported = 'ontouchstart' in window,
mousedownEvent = 'mousedown' + ( touchSupported ? ' touchstart' : ''),
mousemoveEvent = 'mousemove.clockpicker' + ( touchSupported ? ' touchmove.clockpicker' : ''),
mouseupEvent = 'mouseup.clockpicker' + ( touchSupported ? ' touchend.clockpicker' : '');
// Vibrate the device if supported
var vibrate = navigator.vibrate ? 'vibrate' : navigator.webkitVibrate ? 'webkitVibrate' : null;
function createSvgElement(name) {
return document.createElementNS(svgNS, name);
}
function leadingZero(num) {
return (num < 10 ? '0' : '') + num;
}
// Get a unique id
var idCounter = 0;
function uniqueId(prefix) {
var id = ++idCounter + '';
return prefix ? prefix + id : id;
}
// Clock size
var dialRadius = 100,
outerRadius = 80,
// innerRadius = 80 on 12 hour clock
innerRadius = 54,
tickRadius = 13,
diameter = dialRadius * 2,
duration = transitionSupported ? 350 : 1;
// Popover template
var tpl = [
'<div class="popover clockpicker-popover">',
'<div class="arrow"></div>',
'<div class="popover-title">',
'<span class="clockpicker-span-hours text-primary"></span>',
' : ',
'<span class="clockpicker-span-minutes"></span>',
'<span class="clockpicker-span-am-pm"></span>',
'</div>',
'<div class="popover-content">',
'<div class="clockpicker-plate">',
'<div class="clockpicker-canvas"></div>',
'<div class="clockpicker-dial clockpicker-hours"></div>',
'<div class="clockpicker-dial clockpicker-minutes clockpicker-dial-out"></div>',
'</div>',
'<span class="clockpicker-am-pm-block">',
'</span>',
'</div>',
'</div>'
].join('');
// ClockPicker
function ClockPicker(element, options) {
var popover = $(tpl),
plate = popover.find('.clockpicker-plate'),
hoursView = popover.find('.clockpicker-hours'),
minutesView = popover.find('.clockpicker-minutes'),
amPmBlock = popover.find('.clockpicker-am-pm-block'),
isInput = element.prop('tagName') === 'INPUT',
input = isInput ? element : element.find('input'),
addon = element.find('.input-group-addon'),
self = this,
timer;
this.id = uniqueId('cp');
this.element = element;
this.options = options;
this.isAppended = false;
this.isShown = false;
this.currentView = 'hours';
this.isInput = isInput;
this.input = input;
this.addon = addon;
this.popover = popover;
this.plate = plate;
this.hoursView = hoursView;
this.minutesView = minutesView;
this.amPmBlock = amPmBlock;
this.spanHours = popover.find('.clockpicker-span-hours');
this.spanMinutes = popover.find('.clockpicker-span-minutes');
this.spanAmPm = popover.find('.clockpicker-span-am-pm');
this.amOrPm = "PM";
// Setup for for 12 hour clock if option is selected
if (options.twelvehour) {
var amPmButtonsTemplate = ['<div class="clockpicker-am-pm-block">',
'<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-am-button">',
'AM</button>',
'<button type="button" class="btn btn-sm btn-default clockpicker-button clockpicker-pm-button">',
'PM</button>',
'</div>'].join('');
var amPmButtons = $(amPmButtonsTemplate);
//amPmButtons.appendTo(plate);
////Not working b/c they are not shown when this runs
//$('clockpicker-am-button')
// .on("click", function() {
// self.amOrPm = "AM";
// $('.clockpicker-span-am-pm').empty().append('AM');
// });
//
//$('clockpicker-pm-button')
// .on("click", function() {
// self.amOrPm = "PM";
// $('.clockpicker-span-am-pm').empty().append('PM');
// });
$('<button type="button" class="btn btn-sm btn-default clockpicker-button am-button">' + "AM" + '</button>')
.on("click", function() {
self.amOrPm = "AM";
$('.clockpicker-span-am-pm').empty().append('AM');
}).appendTo(this.amPmBlock);
$('<button type="button" class="btn btn-sm btn-default clockpicker-button pm-button">' + "PM" + '</button>')
.on("click", function() {
self.amOrPm = 'PM';
$('.clockpicker-span-am-pm').empty().append('PM');
}).appendTo(this.amPmBlock);
}
if (! options.autoclose) {
// If autoclose is not setted, append a button
$('<button type="button" class="btn btn-sm btn-default btn-block clockpicker-button">' + options.donetext + '</button>')
.click($.proxy(this.done, this))
.appendTo(popover);
}
// Placement and arrow align - make sure they make sense.
if ((options.placement === 'top' || options.placement === 'bottom') && (options.align === 'top' || options.align === 'bottom')) options.align = 'left';
if ((options.placement === 'left' || options.placement === 'right') && (options.align === 'left' || options.align === 'right')) options.align = 'top';
popover.addClass(options.placement);
popover.addClass('clockpicker-align-' + options.align);
this.spanHours.click($.proxy(this.toggleView, this, 'hours'));
this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
// Show or toggle
input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
addon.on('click.clockpicker', $.proxy(this.toggle, this));
// Build ticks
var tickTpl = $('<div class="clockpicker-tick"></div>'),
i, tick, radian, radius;
// Hours view
if (options.twelvehour) {
for (i = 1; i < 13; i += 1) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
radius = outerRadius;
tick.css('font-size', '120%');
tick.css({
left: dialRadius + Math.sin(radian) * radius - tickRadius,
top: dialRadius - Math.cos(radian) * radius - tickRadius
});
tick.html(i === 0 ? '00' : i);
hoursView.append(tick);
tick.on(mousedownEvent, mousedown);
}
} else {
for (i = 0; i < 24; i += 1) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
var inner = i > 0 && i < 13;
radius = inner ? innerRadius : outerRadius;
tick.css({
left: dialRadius + Math.sin(radian) * radius - tickRadius,
top: dialRadius - Math.cos(radian) * radius - tickRadius
});
if (inner) {
tick.css('font-size', '120%');
}
tick.html(i === 0 ? '00' : i);
hoursView.append(tick);
tick.on(mousedownEvent, mousedown);
}
}
// Minutes view
for (i = 0; i < 60; i += 5) {
tick = tickTpl.clone();
radian = i / 30 * Math.PI;
tick.css({
left: dialRadius + Math.sin(radian) * outerRadius - tickRadius,
top: dialRadius - Math.cos(radian) * outerRadius - tickRadius
});
tick.css('font-size', '120%');
tick.html(leadingZero(i));
minutesView.append(tick);
tick.on(mousedownEvent, mousedown);
}
// Clicking on minutes view space
plate.on(mousedownEvent, function(e){
if ($(e.target).closest('.clockpicker-tick').length === 0) {
mousedown(e, true);
}
});
// Mousedown or touchstart
function mousedown(e, space) {
var offset = plate.offset(),
isTouch = /^touch/.test(e.type),
x0 = offset.left + dialRadius,
y0 = offset.top + dialRadius,
dx = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
dy = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0,
z = Math.sqrt(dx * dx + dy * dy),
moved = false;
// When clicking on minutes view space, check the mouse position
if (space && (z < outerRadius - tickRadius || z > outerRadius + tickRadius)) {
return;
}
e.preventDefault();
// Set cursor style of body after 200ms
var movingTimer = setTimeout(function(){
$body.addClass('clockpicker-moving');
}, 200);
// Place the canvas to top
if (svgSupported) {
plate.append(self.canvas);
}
// Clock
self.setHand(dx, dy, ! space, true);
// Mousemove on document
$doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
e.preventDefault();
var isTouch = /^touch/.test(e.type),
x = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
y = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0;
if (! moved && x === dx && y === dy) {
// Clicking in chrome on windows will trigger a mousemove event
return;
}
moved = true;
self.setHand(x, y, false, true);
});
// Mouseup on document
$doc.off(mouseupEvent).on(mouseupEvent, function(e){
$doc.off(mouseupEvent);
e.preventDefault();
var isTouch = /^touch/.test(e.type),
x = (isTouch ? e.originalEvent.changedTouches[0] : e).pageX - x0,
y = (isTouch ? e.originalEvent.changedTouches[0] : e).pageY - y0;
if ((space || moved) && x === dx && y === dy) {
self.setHand(x, y);
}
if (self.currentView === 'hours') {
self.toggleView('minutes', duration / 2);
} else {
if (options.autoclose) {
self.minutesView.addClass('clockpicker-dial-out');
setTimeout(function(){
self.done();
}, duration / 2);
}
}
plate.prepend(canvas);
// Reset cursor style of body
clearTimeout(movingTimer);
$body.removeClass('clockpicker-moving');
// Unbind mousemove event
$doc.off(mousemoveEvent);
});
}
if (svgSupported) {
// Draw clock hands and others
var canvas = popover.find('.clockpicker-canvas'),
svg = createSvgElement('svg');
svg.setAttribute('class', 'clockpicker-svg');
svg.setAttribute('width', diameter);
svg.setAttribute('height', diameter);
var g = createSvgElement('g');
g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
var bearing = createSvgElement('circle');
bearing.setAttribute('class', 'clockpicker-canvas-bearing');
bearing.setAttribute('cx', 0);
bearing.setAttribute('cy', 0);
bearing.setAttribute('r', 2);
var hand = createSvgElement('line');
hand.setAttribute('x1', 0);
hand.setAttribute('y1', 0);
var bg = createSvgElement('circle');
bg.setAttribute('class', 'clockpicker-canvas-bg');
bg.setAttribute('r', tickRadius);
var fg = createSvgElement('circle');
fg.setAttribute('class', 'clockpicker-canvas-fg');
fg.setAttribute('r', 3.5);
g.appendChild(hand);
g.appendChild(bg);
g.appendChild(fg);
g.appendChild(bearing);
svg.appendChild(g);
canvas.append(svg);
this.hand = hand;
this.bg = bg;
this.fg = fg;
this.bearing = bearing;
this.g = g;
this.canvas = canvas;
}
raiseCallback(this.options.init);
}
function raiseCallback(callbackFunction) {
if (callbackFunction && typeof callbackFunction === "function") {
callbackFunction();
}
}
// Default options
ClockPicker.DEFAULTS = {
'default': '', // default time, 'now' or '13:14' e.g.
fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
placement: 'bottom', // clock popover placement
align: 'left', // popover arrow align
donetext: '完成', // done button text
autoclose: false, // auto close when minute is selected
twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
vibrate: true // vibrate the device when dragging clock hand
};
// Show or hide popover
ClockPicker.prototype.toggle = function(){
this[this.isShown ? 'hide' : 'show']();
};
// Set popover position
ClockPicker.prototype.locate = function(){
var element = this.element,
popover = this.popover,
offset = element.offset(),
width = element.outerWidth(),
height = element.outerHeight(),
placement = this.options.placement,
align = this.options.align,
styles = {},
self = this;
popover.show();
// Place the popover
switch (placement) {
case 'bottom':
styles.top = offset.top + height;
break;
case 'right':
styles.left = offset.left + width;
break;
case 'top':
styles.top = offset.top - popover.outerHeight();
break;
case 'left':
styles.left = offset.left - popover.outerWidth();
break;
}
// Align the popover arrow
switch (align) {
case 'left':
styles.left = offset.left;
break;
case 'right':
styles.left = offset.left + width - popover.outerWidth();
break;
case 'top':
styles.top = offset.top;
break;
case 'bottom':
styles.top = offset.top + height - popover.outerHeight();
break;
}
popover.css(styles);
};
// Show popover
ClockPicker.prototype.show = function(e){
// Not show again
if (this.isShown) {
return;
}
raiseCallback(this.options.beforeShow);
var self = this;
// Initialize
if (! this.isAppended) {
// Append popover to body
$body = $(document.body).append(this.popover);
// Reset position when resize
$win.on('resize.clockpicker' + this.id, function(){
if (self.isShown) {
self.locate();
}
});
this.isAppended = true;
}
// Get the time
var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':');
if (value[0] === 'now') {
var now = new Date(+ new Date() + this.options.fromnow);
value = [
now.getHours(),
now.getMinutes()
];
}
this.hours = + value[0] || 0;
this.minutes = + value[1] || 0;
this.spanHours.html(leadingZero(this.hours));
this.spanMinutes.html(leadingZero(this.minutes));
// Toggle to hours view
this.toggleView('hours');
// Set position
this.locate();
this.isShown = true;
// Hide when clicking or tabbing on any element except the clock, input and addon
$doc.on('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id, function(e){
var target = $(e.target);
if (target.closest(self.popover).length === 0 &&
target.closest(self.addon).length === 0 &&
target.closest(self.input).length === 0) {
self.hide();
}
});
// Hide when ESC is pressed
$doc.on('keyup.clockpicker.' + this.id, function(e){
if (e.keyCode === 27) {
self.hide();
}
});
raiseCallback(this.options.afterShow);
};
// Hide popover
ClockPicker.prototype.hide = function(){
raiseCallback(this.options.beforeHide);
this.isShown = false;
// Unbinding events on document
$doc.off('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id);
$doc.off('keyup.clockpicker.' + this.id);
this.popover.hide();
raiseCallback(this.options.afterHide);
};
// Toggle to hours or minutes view
ClockPicker.prototype.toggleView = function(view, delay){
var raiseAfterHourSelect = false;
if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
raiseCallback(this.options.beforeHourSelect);
raiseAfterHourSelect = true;
}
var isHours = view === 'hours',
nextView = isHours ? this.hoursView : this.minutesView,
hideView = isHours ? this.minutesView : this.hoursView;
this.currentView = view;
this.spanHours.toggleClass('text-primary', isHours);
this.spanMinutes.toggleClass('text-primary', ! isHours);
// Let's make transitions
hideView.addClass('clockpicker-dial-out');
nextView.css('visibility', 'visible').removeClass('clockpicker-dial-out');
// Reset clock hand
this.resetClock(delay);
// After transitions ended
clearTimeout(this.toggleViewTimer);
this.toggleViewTimer = setTimeout(function(){
hideView.css('visibility', 'hidden');
}, duration);
if (raiseAfterHourSelect) {
raiseCallback(this.options.afterHourSelect);
}
};
// Reset clock hand
ClockPicker.prototype.resetClock = function(delay){
var view = this.currentView,
value = this[view],
isHours = view === 'hours',
unit = Math.PI / (isHours ? 6 : 30),
radian = value * unit,
radius = isHours && value > 0 && value < 13 ? innerRadius : outerRadius,
x = Math.sin(radian) * radius,
y = - Math.cos(radian) * radius,
self = this;
if (svgSupported && delay) {
self.canvas.addClass('clockpicker-canvas-out');
setTimeout(function(){
self.canvas.removeClass('clockpicker-canvas-out');
self.setHand(x, y);
}, delay);
} else {
this.setHand(x, y);
}
};
// Set clock hand to (x, y)
ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging){
var radian = Math.atan2(x, - y),
isHours = this.currentView === 'hours',
unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
z = Math.sqrt(x * x + y * y),
options = this.options,
inner = isHours && z < (outerRadius + innerRadius) / 2,
radius = inner ? innerRadius : outerRadius,
value;
if (options.twelvehour) {
radius = outerRadius;
}
// Radian should in range [0, 2PI]
if (radian < 0) {
radian = Math.PI * 2 + radian;
}
// Get the round value
value = Math.round(radian / unit);
// Get the round radian
radian = value * unit;
// Correct the hours or minutes
if (options.twelvehour) {
if (isHours) {
if (value === 0) {
value = 12;
}
} else {
if (roundBy5) {
value *= 5;
}
if (value === 60) {
value = 0;
}
}
} else {
if (isHours) {
if (value === 12) {
value = 0;
}
value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
} else {
if (roundBy5) {
value *= 5;
}
if (value === 60) {
value = 0;
}
}
}
// Once hours or minutes changed, vibrate the device
if (this[this.currentView] !== value) {
if (vibrate && this.options.vibrate) {
// Do not vibrate too frequently
if (! this.vibrateTimer) {
navigator[vibrate](10);
this.vibrateTimer = setTimeout($.proxy(function(){
this.vibrateTimer = null;
}, this), 100);
}
}
}
this[this.currentView] = value;
this[isHours ? 'spanHours' : 'spanMinutes'].html(leadingZero(value));
// If svg is not supported, just add an active class to the tick
if (! svgSupported) {
this[isHours ? 'hoursView' : 'minutesView'].find('.clockpicker-tick').each(function(){
var tick = $(this);
tick.toggleClass('active', value === + tick.html());
});
return;
}
// Place clock hand at the top when dragging
if (dragging || (! isHours && value % 5)) {
this.g.insertBefore(this.hand, this.bearing);
this.g.insertBefore(this.bg, this.fg);
this.bg.setAttribute('class', 'clockpicker-canvas-bg clockpicker-canvas-bg-trans');
} else {
// Or place it at the bottom
this.g.insertBefore(this.hand, this.bg);
this.g.insertBefore(this.fg, this.bg);
this.bg.setAttribute('class', 'clockpicker-canvas-bg');
}
// Set clock hand and others' position
var cx = Math.sin(radian) * radius,
cy = - Math.cos(radian) * radius;
this.hand.setAttribute('x2', cx);
this.hand.setAttribute('y2', cy);
this.bg.setAttribute('cx', cx);
this.bg.setAttribute('cy', cy);
this.fg.setAttribute('cx', cx);
this.fg.setAttribute('cy', cy);
};
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
raiseCallback(this.options.beforeDone);
this.hide();
var last = this.input.prop('value'),
value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
if (this.options.twelvehour) {
value = value + this.amOrPm;
}
this.input.prop('value', value);
if (value !== last) {
this.input.triggerHandler('change');
if (! this.isInput) {
this.element.trigger('change');
}
}
if (this.options.autoclose) {
this.input.trigger('blur');
}
raiseCallback(this.options.afterDone);
};
// Remove clockpicker from input
ClockPicker.prototype.remove = function() {
this.element.removeData('clockpicker');
this.input.off('focus.clockpicker click.clockpicker');
this.addon.off('click.clockpicker');
if (this.isShown) {
this.hide();
}
if (this.isAppended) {
$win.off('resize.clockpicker' + this.id);
this.popover.remove();
}
};
// Extends $.fn.clockpicker
$.fn.clockpicker = function(option){
var args = Array.prototype.slice.call(arguments, 1);
return this.each(function(){
var $this = $(this),
data = $this.data('clockpicker');
if (! data) {
var options = $.extend({}, ClockPicker.DEFAULTS, $this.data(), typeof option == 'object' && option);
$this.data('clockpicker', new ClockPicker($this, options));
} else {
// Manual operatsions. show, hide, remove, e.g.
if (typeof data[option] === 'function') {
data[option].apply(data, args);
}
}
});
};
}());

9
include/clockpicker/dist/jquery-clockpicker.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
include/clockpicker/dist/jquery-clockpicker.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
js/addrow-v2.js
View File

@@ -90,7 +90,7 @@ function addRow() {
continue;
s = t[0] + "[" + rowCount.toString() + "]";
element.setAttribute("name", s);
element.value = "";
//element.value = ""; /* <-- this row deletes cloned tag values */
}
elements = newRow.getElementsByTagName("select");
@@ -108,9 +108,13 @@ function addRow() {
element.value = "";
}
/* Add the newly-created row to the table */
templateRow.parentNode.appendChild(newRow);
/* init clockpicker for added row*/
$('.clockpicker').clockpicker({
autoclose: true
});
return true;
}