Created
July 19, 2012 06:22
-
-
Save tareko/3141131 to your computer and use it in GitHub Desktop.
Trade add rendered
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> | |
| Kitab Al-Shifa: Trades </title> | |
| <link rel="stylesheet" type="text/css" href="/kitab/css/cake.generic.css" /></head> | |
| <body> | |
| <div id="container"> | |
| <div id="content"> | |
| <form action="/kitab/trades/add" id="TradeAddForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div> | |
| <fieldset> | |
| <legend>Make a Trade</legend> | |
| <div class="block"> | |
| <div class="TradeFromUserIdDiv required"><label for="TradeFromUserId">Person making the trade</label><input name="data[Trade][from_user_id]" type="text" value="me" id="TradeFromUserId"/></div><input type="hidden" name="data[Trade][user_id]" id="TradeFromUserIdHidden" value="1"/> </div> | |
| <div class="block"> | |
| <label for="datepicker1">Please select the date of the shift you would like to trade</label> | |
| <script type="text/javascript" src="/kitab/js/jquery.js"></script><script type="text/javascript" src="/kitab/js/jquery-ui.js"></script><link rel="stylesheet" type="text/css" href="/kitab/css/ui-lightness/jquery-ui.css" /><div id="datepicker1"></div> <script> | |
| $(document).ready(function() { | |
| startCalendar(); | |
| }); | |
| function startCalendar() { | |
| $.getJSON( | |
| '/kitab/shifts/listShifts.json', | |
| {id: $('#TradeFromUserIdHidden').val()}, | |
| function(json) { | |
| shiftDays = json; | |
| $("#datepicker1").datepicker({ | |
| beforeShowDay: shiftsWorking, | |
| dateFormat: 'yy-mm-dd', | |
| onSelect: calendarSelect | |
| }); | |
| } | |
| ); | |
| } | |
| function shiftsWorking(date) { | |
| for (i = 0; i < shiftDays.shiftList.length; i++) { | |
| dateDB = new Date(shiftDays.shiftList[i].Shift.date); | |
| dateDB.setDate (dateDB.getDate()+1); | |
| if (date.getYear() == dateDB.getYear() | |
| && date.getMonth() == dateDB.getMonth() | |
| && date.getDate() == dateDB.getDate()) { | |
| return [true, shiftDays.shiftList[i].Shift.date + '_day']; | |
| } | |
| } | |
| return [false, '']; | |
| } | |
| </script> | |
| <div class="input select required"><label for="TradeShiftId">Which shift would you like to trade?</label><select name="data[Trade][shift_id]" id="TradeShiftId"> | |
| </select></div> </div> | |
| <div class="block required "> | |
| <label>Who are you offering the trade to?</label> | |
| <link rel="stylesheet" type="text/css" href="/kitab/css/ui-lightness/jquery-ui.css" /><script type="text/javascript" src="/kitab/js/jquery.tagit.js"></script><script type="text/javascript" src="/kitab/js/jquery.autocomplete.js"></script><link rel="stylesheet" type="text/css" href="/kitab/css/jquery.tagit.css" /> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| $("#tags").tagit({ | |
| tagSource: '/kitab/users/listUsers.json?full=1', | |
| allowSpaces: true, | |
| itemName: 'data[TradesDetail]', | |
| fieldName: 'user_id', | |
| placeholderText: 'Please type a name', | |
| minLength: '3' | |
| }); | |
| }); | |
| </script> | |
| <div class="ui-widget"> | |
| <ul id="tags"> | |
| </ul> | |
| </div> | |
| <div div="pick-doctor" class="TradesDetail.user_id"> </div> | |
| </div> | |
| <div class="block"> | |
| <div class="submit"><input type="submit" value="Submit"/></div></form> </div> | |
| </fieldset> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| //Prevent enter from submitting form | |
| $(window).keydown(function(event){ | |
| if(event.keyCode == 13) { | |
| event.preventDefault(); | |
| return false; | |
| } | |
| }); | |
| $('#TradeFromUserId').autocomplete({ | |
| minLength: 3, | |
| source: '/kitab/users/listUsers.json?full=1', | |
| select: docChange, | |
| focus: function(event, ui){ | |
| var selectedObj = ui.item; | |
| $('input#TradeFromUserId').val(selectedObj.label); | |
| $('input#TradeFromUserIdHidden').val(selectedObj.value); | |
| return false; | |
| } | |
| }); | |
| }); | |
| /* | |
| * This function will activate when #TradeStartDate is selected or changes. | |
| * It then empties the previous shift area, and fills in the shift information | |
| * for all shifts found that day. | |
| * | |
| */ | |
| function calendarSelect(data) { | |
| $.getJSON('/kitab/shifts/listShifts.json', {date: $(this).val(), id: $('input[name="data[Trade][user_id]"]').val()}, function(data){ | |
| $("select#TradeShiftId").empty(); | |
| var html = ''; | |
| var len = data.shiftList.length; | |
| for (var i = 0; i< len; i++) { | |
| html += '<option value="' + data.shiftList[i].Shift.id + '">' + data.shiftList[i].ShiftsType.Location.location + ' ' + data.shiftList[i].ShiftsType.shift_start + '</option>'; | |
| } | |
| $('select#TradeShiftId').append(html); | |
| }); | |
| } | |
| /* | |
| * This function will activate when a physician is selected (TradeFromUserId), and update #TradeStartDate's active | |
| * values (shiftDays). | |
| * | |
| */ | |
| function docChange(event, data) { | |
| $('input#TradeFromUserId').val(data.item.label); | |
| $('input#TradeFromUserIdHiddenDiv').val(data.item.value); | |
| $.getJSON('/kitab/shifts/listShifts.json', {id: $('#TradeFromUserIdHidden').val()}, function(json) { | |
| shiftDays = json; | |
| $("#datepicker1").datepicker('refresh'); | |
| }); | |
| return false; | |
| } | |
| </script> | |
| </div> | |
| <footer> | |
| <a href="http://www.cakephp.org/" target="_blank"><img src="/kitab/img/cake.power.gif" alt="CakePHP: the rapid development php framework" border="0" /></a> </footer> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment