1. @model Portal.Models.PlanTreningowy
2.  
3. @{
4.     ViewBag.Title = "CreateDetails";
5.     Layout = "~/Views/Shared/_LayoutPage1.cshtml";
6. }
7.  
8.  
9. <input type="hidden" value='@ViewContext.RouteData.Values["id"]' id="routeDataId" />
10. <input type="hidden" value='@Html.DisplayFor(modelItem => modelItem.nazwa)' id="nazwaPlanu" />
11. <div class="col-md-12">
12.     <h2>Ustal swój plan treningowy</h2>
13.     <div class="box box-primary">
14.         <div class="box-header with-border">
15.             <!-- THE CALENDAR -->
16.             <div id="calendar"></div>
17.             <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
18.                 <div class="modal-dialog" role="document">
19.                     <div class="modal-content">
20.                         <div class="modal-header">
21.                             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
22.                             <h4 class="modal-title" id="myModalLabel">Nowe ćwiczenie</h4>
23.                         </div>
24.                             <div class="modal-body">
25.  
26.                                 <input type="hidden" class="form-control" id="eventId">
27.                                 <dl class="dl-horizontal">
28.  
29.                                     <dt><label for="newEventTitle">Nazwa</label></dt>
30.                                     <dd><input type="text" class="form-control" id="newEventTitle"></dd>
31.                                     <dt><label>Kolejność</label></dt>
32.                                     <dd><p id="newEventStart"></p></dd>
33.                                     <dt><label for="newEventStart">Dodaj maszynę</label></dt>
34.                                     <dd>
35.                                         @Html.DropDownList("idMaszyna", null, string.Empty, htmlAttributes: new { @class = "form-control", @id = "selectList1" })
36.                                      
37.                                     </dd>
38.  
39.                                 </dl>
40.                             </div>
41.  
42.                             <div class="modal-footer">
43.                                 <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
44.                                 <button type="button" class="btn btn-danger" id="deleteEventInModal">Usuń</button>
45.                                 <button type="button" class="btn btn-primary" id="saveEventInModal">Zapisz</button>
46.                                 <button type="button" class="btn btn-primary" id="addNewEventInModal">Dodaj</button>
47.                             </div>
48.                      
49.                     </div>
50.                 </div>
51.             </div>
52.         </div><!-- /.box-body -->
53.     </div><!-- /. box -->
54. </div><!-- /.col -->
55. <!-- jQuery 2.1.4 -->
56. <script src="/plugins/jQuery/jQuery-2.1.4.min.js"></script>
57.  
58.  
59. <!-- Page specific script -->
60. <!-- Page specific script -->
61. <!-- Page specific script -->
62. <script>
63.     $(function () {
64.  
65.         /* initialize the external events
66.          -----------------------------------------------------------------*/
67.         function ini_events(ele) {
68.             ele.each(function () {
69.  
70.                 // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
71.                 // it doesn't need to have a start or end
72.                 var eventObject = {
73.                     title: $.trim($(this).text()) // use the element's text as the event title
74.                 };
75.  
76.                 // store the Event Object in the DOM element so we can get to it later
77.                 $(this).data('eventObject', eventObject);
78.  
79.                 // make the event draggable using jQuery UI
80.                 $(this).draggable({
81.                     zIndex: 1070,
82.                     revert: true, // will cause the event to go back to its
83.                     revertDuration: 0  //  original position after the drag
84.                 });
85.  
86.             });
87.         }
88.         ini_events($('#external-events div.external-event'));
89.  
90.         /* initialize the calendar
91.          -----------------------------------------------------------------*/
92.         //Date for the calendar events (dummy data)
93.         var date = new Date();
94.         var d = date.getDate(),
95.                 m = date.getMonth(),
96.                 y = date.getFullYear();
97.         var event_date;
98.         var idpw = [];
99.         $('#calendar').fullCalendar({
100.             lang: 'pl',
101.             defaultView: 'agendaWeek',
102.             slotDuration: '01:00:00',
103.             allDaySlot: false,
104.             defaultTimedEventDuration: '01:00:00',
105.             height: 245,
106.             minTime: '01:00:00',
107.             maxTime: '11:00:00',
108.             header: false,
109.             columnFormat: 'dddd',
110.             timeFormat: 'h',
111.             //Random default events
112.             events: function (start, end, timezone, callback) {
113.  
114.                 var dataRow = {
115.                     'idPlan': $("#routeDataId").val()
116.                 }
117.                 $.ajax({
118.                     type: 'POST',
119.                     url: "/Calendar2/CalendarData",
120.                     dataType: "json",
121.                     contentType: "application/json",
122.                     data: JSON.stringify(dataRow),
123.                     success: function (doc) {
124.                         debugger;
125.                         callback(doc);
126.                     }
127.  
128.                //     processData: false,
129.                  //   async: false
130.                 });
131.             },
132.             dayClick: function (date, jsEvent, view) {
133.                 $("#newEventTitle").val('');
134.              
135.  
136.                 $('#saveEventInModal').hide();
137.                 $('#deleteEventInModal').hide();
138.                 $('#addNewEventInModal').show();
139.  
140.  
141.                 $('#myModal').modal('show');
142.                 $("#newEventStart").text(date.format("HH"));
143.  
144.                 $("#addNewEventInModal").click(function () {
145.                     if ($("#newEventStart").text() == date.format("HH")) {
146.                         var event = new Object();
147.                         event.title = $("#newEventTitle").val();
148.                         event.start = date.format("YYYY-MM-DD HH:mm:ss");
149.                         event.backgroundColor = "#00a65a"; //Success (green)
150.                         event.borderColor = "#00a65a"; //Success (green)
151.                         event.durationEditable = false;
152.                         //if($("#selectList2").is)
153.                         $('#calendar').fullCalendar('renderEvent', event, true);
154.                         $('#myModal').modal('hide');
155.                         DodajCwiczenie(event.title, $("#selectList1").val(), $("#routeDataId").val(), event.start);
156.                     }
157.  
158.                 });
159.  
160.                 $("#deleteEventInModal").click(function () {
161.                     $('#calendar').fullCalendar('removeEvents', $("#eventId").val());
162.                     //alert("Usunieto " + $("#eventId").val() + " ");
163.                     debugger;
164.                     DeleteEvent($("#eventId").val());
165.                     $('#myModal').modal('hide');
166.                     }
167.                 );
168.  
169.                 $("#saveEventInModal").click(function () {
170.                     var array = $('#calendar').fullCalendar('clientEvents', $("#eventId").val());
171.                     var event = array[0];
172.                     event.title = $("#newEventTitle").val();
173.                     event.start = event_date;
174.                     AktualizujCwiczenie(event.title, $("#selectList1").val(), event.id)
175.                     $('#calendar').fullCalendar('updateEvent', event);
176.                     $('#myModal').modal('hide');
177.                 });
178.  
179.             },
180.  
181.  
182.             eventClick: function (event, element) {
183.                 $("#newEventTitle").val(event.title);
184.                 $("#myModalLabel").text('Edytuj');
185.  
186.                 event_date = event.start;
187.                 $('#addNewEventInModal').hide();
188.                 $('#saveEventInModal').show();
189.                 $('#deleteEventInModal').show();
190.  
191.                 $("#newEventTitle").val(event.title);
192.                 $("#newEventStart").text(moment(event.start._d).utc().format("HH:mm:ss"));
193.                 $("#eventId").val(event._id);
194.  
195.                 $('#myModal').modal('show');
196.             },
197.  
198.  
199.             editable: true,
200.             eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
201.                // alert(event.id);
202.                 var dataRow = {
203.                     'id': event.id,
204.                     'startDate': event.start
205.                 }
206.                 $.ajax({
207.                     type: 'POST',
208.                     url: "/Calendar2/Edit",
209.                     dataType: "json",
210.                     contentType: "application/json",
211.                     data: JSON.stringify(dataRow)
212.                 });
213.  
214.             },
215.             droppable: true, // this allows things to be dropped onto the calendar !!!
216.             drop: function (date, allDay) { // this function is called when something is dropped
217.  
218.                 // retrieve the dropped element's stored Event Object
219.                 var originalEventObject = $(this).data('eventObject');
220.  
221.                 // we need to copy it, so that multiple events don't have a reference to the same object
222.                 var copiedEventObject = $.extend({}, originalEventObject);
223.  
224.                 // assign it the date that was reported
225.                 copiedEventObject.start = date;
226.                 copiedEventObject.allDay = allDay;
227.                 copiedEventObject.backgroundColor = $(this).css("background-color");
228.                 copiedEventObject.borderColor = $(this).css("border-color");
229.  
230.                 // render the event on the calendar
231.                 // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
232.                 $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
233.  
234.                 // is the "remove after drop" checkbox checked?
235.                 if ($('#drop-remove').is(':checked')) {
236.                     // if so, remove the element from the "Draggable Events" list
237.                     $(this).remove();
238.                 }
239.  
240.  
241.             }
242.         });
243.         function refresh() {
244.             $('#calendar').fullCalendar('removeEvents');
245.             $('#calendar').fullCalendar('refetchEvents');
246.         }
247.  
248.  
249.         function DeleteEvent(EventID) {
250.             var dataRow = {
251.                 'id': EventID,
252.             }
253.             debugger
254.             $.ajax({
255.                 type: 'POST',
256.                 url: "/Calendar2/Delete",
257.                 dataType: "json",
258.                 contentType: "application/json",
259.                 data: JSON.stringify(dataRow)
260.             });
261.         }
262.  
263.         function DodajCwiczenie(EventName, Maszyna, PlanTreningowy, EventStart) {
264.             var dataRow = {
265.                 'Nazwa': EventName,
266.                 'idMaszyny': Maszyna
267.             }
268.             debugger
269.             $.ajax({
270.                 type: 'POST',
271.                 url: "/Calendar2/CreateCwiczenie",
272.                 dataType: "json",
273.                 contentType: "application/json",
274.                 data: JSON.stringify(dataRow),
275.                 success: function (response) {
276.                     if (response != null && response.success) {  
277.                         DodajCwiczenieDoPlanuTreningowego(response.cwiczenieId, PlanTreningowy, EventStart);
278.                         refresh();
279.                     } else {
280.                         alert(response.success);
281.                     }
282.                 },
283.                 error: function (response) {
284.                     alert("error!");
285.                 }
286.             });
287.         }
288.  
289.         function AktualizujCwiczenie(EventName, Maszyna, Cwiczenie) {
290.             var dataRow = {
291.                 'Nazwa': EventName,
292.                 'idMaszyny': Maszyna,
293.                 'idCwiczenie': Cwiczenie,
294.                 'id': id
295.             }
296.             debugger;
297.             $.ajax({
298.                 type: 'POST',
299.                 url: "/Calendar2/AktualizujCwiczenie",
300.                 dataType: "json",
301.                 contentType: "application/json",
302.                 data: JSON.stringify(dataRow)
303.             });
304.         }
305.  
306.         function DodajCwiczenieDoPlanuTreningowego(cwiczenieId, PlanTreningowy, EventStart) {
307.             var dataRow = {
308.                 'idCwicz': cwiczenieId,
309.                 'idPlan': PlanTreningowy,
310.                 'startDate' : EventStart
311.             }
312.             $.ajax({
313.                 type: 'POST',
314.                 url: "/Calendar2/DodajCwiczenieDoPlanuTreningowego",
315.                 dataType: "json",
316.                 contentType: "application/json",
317.                 data: JSON.stringify(dataRow)
318.             });
319.         }
320.  
321.         /* ADDING EVENTS */
322.         var currColor = "#3c8dbc"; //Red by default
323.         //Color chooser button
324.         var colorChooser = $("#color-chooser-btn");
325.         $("#color-chooser > li > a").click(function (e) {
326.             e.preventDefault();
327.             //Save color
328.             currColor = $(this).css("color");
329.             //Add color effect to button
330.             $('#add-new-event').css({ "background-color": currColor, "border-color": currColor });
331.         });
332.         $("#add-new-event").click(function (e) {
333.             e.preventDefault();
334.             //Get value and make sure it is not null
335.             var val = $("#new-event").val();
336.             if (val.length == 0) {
337.                 return;
338.             }
339.  
340.             //Create events
341.             var event = $("<div />");
342.             event.css({ "background-color": currColor, "border-color": currColor, "color": "#fff" }).addClass("external-event");
343.             event.html(val);
344.             $('#external-events').prepend(event);
345.  
346.             //Add draggable funtionality
347.             ini_events(event);
348.  
349.             //Remove event from text input
350.             $("#new-event").val("");
351.         });
352.     });</script>
353.  
354.