fixed group selection

pacApp/static/pacApp/assets/css/schedule.css

@@ -1,3 +1,8 @@
+table {
+  border-collapse:collapse;
+}
+
+
 input[type="radio"], {
     -webkit-appearance: radio;
     cursor: pointer;
@@ -27,21 +32,22 @@ input[type="radio"]#group:checked ~ .reveal-if-activeGroup {
   overflow: visible;
 }
 
-th tr{
+th {
   text-align:left;
-
 }
 
 .studio {
-  padding:6px 12px;
+   padding-left:20px;
+   padding-right:0px;
 }
 
+
 /* Style the tab */
 .tab {
   overflow: hidden;
   border: 1px solid #ccc;
   background-color: #f1f1f1;
-  padding: 6px 12px;
+  padding: 6px 12px; 
   width:100%;
   position:relative;
 }
@@ -71,10 +77,10 @@ th tr{
 /* Style the tab content */
 .tabcontent {
   display: none;
-  padding: 6px 12px;
   border: 1px solid #ccc;
   border-top: none;
   width: 100%;
+  overflow:hidden;
 
 }
 

pacApp/static/pacApp/assets/css/table.css

@@ -25,12 +25,6 @@ table {
   border-collapse: collapse;
 }
 
-th, td {
-  font-weight: unset;
-  padding-right: 10px;
-  text-align:left;
-}
-
 .column100 {
   width: 130px;
 }

pacApp/static/pacApp/assets/js/schedule.js

@@ -22,6 +22,7 @@ function openDay(tab, id) {
   // Show the current tab, and add an "active" class to the button that opened the tab
   document.getElementById(tab).style.display = "block";
   document.getElementById(id).className += " active";
+  var weekdays= {'sun':0,'mon':1,'tue':2,'wed':3,'thu':4,'fri':5,'sat':6};
   var date = $('#'+id).data('date').split('-');
   console.log(date)
   var reformatted = date[1] + '/' + date[2] + '/' + date[0].substring(2,4); 
@@ -194,7 +195,7 @@ function handleresponse(response)
 }
 
 
-function setupWeek()
+function setupWeek(type)
 	// date = yyyy-mm-dd
 	{	
     // in prepation for the today tab - if it is on the current day, has this feature 
@@ -204,18 +205,36 @@ function setupWeek()
     		groups = 'None'
     	}
     	console.log(groups);
-
+
+    	 var active = document.getElementsByClassName('active')[0].id[1];
+    	 console.log(active);
+
 		 var curr = $('#curr').val();
+		 console.log(curr);
          let url = 'update';
-         request = $.ajax(
+         if (type == 'week') {
+         	request = $.ajax(
               {
                  type: "GET",
                  url: url,
                  data: {'newdate': curr,
              			'selectgroups': groups},
+             	success: handleresponse,
+               }
+            );
+         }
+         else if (type == 'group') {
+         request = $.ajax(
+              {
+                 type: "GET",
+                 url: url,
+                 data: {'newdate': curr,
+             			'selectgroups': groups,
+             			'groupday': active},
                  success: handleresponse,
                }
             );
+     }
     }
 
 function setGroups() {
@@ -231,6 +250,7 @@ function setGroups() {
 }
 
 
+
 // sendbook gathers all the stuff necessary to make a booking 
 function sendbook(id) {
 		// checks whether or not there are selected groups 

pacApp/templates/pacApp/schedule.html

@@ -5,6 +5,7 @@
 	<link rel="stylesheet" type="text/css" href="/static/pacApp/assets/css/schedule.css">
 	<link rel="stylesheet" type="text/css" href="static/pacApp/assets/css/table.css" />
 	<link rel="stylesheet" type="text/css" href="static/pacApp/assets/css/main.css" />
+
 	<script type="application/javascript" src="/static/pacApp/assets/js/input.js"></script> 
 	<script type="application/javascript" src="/static/pacApp/assets/js/schedule.js"></script> 
 	<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
@@ -14,9 +15,6 @@
     th, td {
       cursor: pointer;
     }
-    table {
-      border-collapse: collapse;
-    }
   </style>
 {% endif %}
 
@@ -51,7 +49,7 @@ <h1>Booking Schedule</h1>
       <div id="scheduletable">
               {% include 'templates/pacApp/tableElements/daystab.html' %}
               {% include 'templates/pacApp/tableElements/table.html' %}
-              {% include 'templates/pacApp/tableElements/groupSelection.html' %}
+              {% include 'templates/pacApp/tableElements/groupSelection.html'%}
       </div>
 
     <!-- the pop up modal --> 
@@ -75,7 +73,7 @@ <h1>Booking Schedule</h1>
     $('#headerschedule').css('display','none');
   }
   else {
-    $('#scheduletable').css('margin', '20px');
+   /*  $('#scheduletable').css('margin', '20px'); */
     $('#booking').css('display','none');
   }
 // very initial set up of the document, we use today's date to set up active tab 

pacApp/templates/pacApp/tableElements/friday.html

@@ -114,3 +114,4 @@
 			</div>
 		</div>
 	</div>
+

pacApp/templates/pacApp/tableElements/groupSelection.html

@@ -1,12 +1,12 @@
-<div>
-	<input type="checkbox" id="Sympoh" name="selectGroups" value="Sympoh" style="-webkit-appearance: checkbox; cursor: pointer;" onchange="setupWeek();">
+<div id="groupselect" data-date="{{weekday}}">
+	<input type="checkbox" id="Sympoh" name="selectGroups" value="Sympoh" style="-webkit-appearance: checkbox; cursor: pointer;" onchange="setupWeek('group');">
 		<label for="Sympoh">Sympoh</label>
-	<input type="checkbox" id="Disiac" name="selectGroups" value="Disiac" style="-webkit-appearance: checkbox; cursor: pointer;" onchange="setupWeek();">
+	<input type="checkbox" id="Disiac" name="selectGroups" value="Disiac" style="-webkit-appearance: checkbox; cursor: pointer;" onchange="setupWeek('group');">
 		<label for="Disiac">Disiac</label>
-	<input type="checkbox" id="BAC" name="selectGroups" value="BAC" style="-webkit-appearance: checkbox; cursor: pointer;" onchange="setupWeek();">
+	<input type="checkbox" id="BAC" name="selectGroups" value="BAC" style="-webkit-appearance: checkbox; cursor: pointer;" onchange="setupWeek('group');">
 		<label for="BAC">BAC</label>
-	<input type="checkbox" id="PUB" name="selectGroups" value="PUB" style="-webkit-appearance: checkbox; cursor: pointer;" onchange="setupWeek();">
+	<input type="checkbox" id="PUB" name="selectGroups" value="PUB" style="-webkit-appearance: checkbox; cursor: pointer;" onchange="setupWeek('group');">
 		<label for="PUB">PUB</label>
-	<input type="checkbox" id="Expression" name="selectGroups" value="Expression" style="-webkit-appearance: checkbox; cursor:pointer;" onchange="setupWeek();">
+	<input type="checkbox" id="Expression" name="selectGroups" value="Expression" style="-webkit-appearance: checkbox; cursor:pointer;" onchange="setupWeek('group');">
 		<label for="Expression">Expression</label>
 </div>

pacApp/templates/pacApp/tableElements/monday.html

@@ -110,3 +110,4 @@
 			</div>
 		</div>
 	</div>
+

pacApp/templates/pacApp/tableElements/saturday.html

@@ -108,3 +108,4 @@
 			</div>
 		</div>
 	</div>
+

pacApp/templates/pacApp/tableElements/table.html

@@ -29,7 +29,7 @@
   <div class="tablinks" id="d6" data-date="{{sat}}" onclick="openDay('sat', this.id)">Saturday
      <br><span id="d6date" style="display:none"></span>
   </div>
-  <div class="tablinks"><input type="date" max="2999-12-31" autocomplete="on" id="curr"></div>
+  <div class="tablinks"><input type="date" max="2999-12-31" autocomplete="on" id="curr" onchange="setupWeek('week');"></div>
    <div class="tablinks" id="booking" style="background-color:#b76e79; color:white; float:right; margin-top:15px">
     <a style="text-decoration-line:none;" href="schedule">Booking</a>
   </div> 
@@ -45,6 +45,7 @@
 <div class="tabcontent" id="sat">{% include 'templates/pacApp/tableElements/saturday.html'%}</div>
 </div>
 
+
 <!-- renders this page to be displayed when changes made --> 
 <!-- for setting up the data initially --> 
 <script type="text/javascript">
@@ -226,21 +227,25 @@
    }
     // $('td').css('cursor','pointer');
     var weekday = parseInt("{{weekday}}");
-    // console.log(weekday);
-    var current = "{{currentdate}}";
+    console.log(weekday);
+    var currday = "{{currday}}";
+    if (currday != 'None') {
+       $('#d'+currday).addClass('today');
+    }
     $('#curr').val("{{formatdate}}");
-    $('#curr').on('change', setupWeek);
+
     var daysofweek = ['sun','mon','tue','wed','thu','fri','sat'];
     openDay(daysofweek[weekday], 'd'+weekday);
 
+
   var edit = "{{editable}}";
   console.log(edit);
   if (edit == 'False') {
       console.log('is false and already on home page');
     $('#headerschedule').css('display','none');
   }
   else {
-    $('#scheduletable').css('margin', '20px');
+
     $('#booking').css('display','none');
   }
    </script>

pacApp/templates/pacApp/tableElements/thursday.html

@@ -110,3 +110,4 @@
 			</div>
 		</div>
 	</div>
+

pacApp/templates/pacApp/tableElements/tuesday.html

@@ -110,3 +110,4 @@
 			</div>
 		</div>
 	</div>
+

pacApp/templates/pacApp/tableElements/wednesday.html

@@ -111,3 +111,4 @@
 			</div>
 		</div>
 	</div>
+

pacApp/views.py

@@ -27,10 +27,14 @@ def error_500(request):
         return render(request,'templates/pacApp/404.html', data)
 
 def createContext(startdate, endweek, newdate, groups, getGroups):
+	actualdate = date.today()
+	currday = 'None'
 	week = {}
 	for i in range(7):
 		# week.append((startdate + timedelta(days=i)).strftime('%Y-%m-%d-%w'))
 		week[(startdate + timedelta(days=i)).strftime('%w')] = (startdate + timedelta(days=i)).strftime('%Y-%m-%d')
+		if (startdate + timedelta(days=i)).strftime('%Y-%m-%d') == actualdate.strftime('%Y-%m-%d'):
+			currday = actualdate.strftime('%w')
 	# print(week)
 
 	studioList = {'bloomberg':0, 'dillondance':1, 'dillonmar':2, 'dillonmpr': 3, 'murphy': 4, 'ns':5,'nswarmup': 6, 'nstheatre': 7, 'whitman': 8, 'wilcox': 9}
@@ -54,6 +58,7 @@ def createContext(startdate, endweek, newdate, groups, getGroups):
 			   'Whitman': Booking.objects.filter(studio_id=8).filter(booking_date__range=[startdate, endweek]), 
 			   'Wilcox': Booking.objects.filter(studio_id=9).filter(booking_date__range=[startdate, endweek]), 
 			   'newdate': newdate, 'formatdate': formatdate, 'weekday': int(startdate.strftime('%w')), 'sun': week['0'], 
+			   'currday':currday,
 			   'mon': week['1'], 'tue': week['2'], 'wed': week['3'], 
 			   'thu': week['4'], 'fri': week['5'], 'sat': week['6']}
 	if getGroups == True:
@@ -137,6 +142,7 @@ def update(request:HttpResponse):
 			request.GET.get('endtime'), request.GET.get('day'))
 	retdate = request.GET.get('newdate').split('-')
 	startdate = datetime.date(int(retdate[0]),int(retdate[1]),int(retdate[2]))
+	print(startdate)
 	endweek = startdate + timedelta(days=6)
 	newdate = request.GET.get('newdate')
 	print(newdate)
@@ -151,10 +157,18 @@ def update(request:HttpResponse):
 	context = createContext(startdate, endweek, newdate, groups, getGroups)
 	if weekday != None:
 		context['weekday'] = weekday
+	groupday = request.GET.get('groupday');
+	print(weekday)
+	print('groupday is')
+	print(groupday)
+	if weekday == None and groupday != None:
+		context['weekday'] = groupday
 	context['editable'] = True
+
 	return render(request, "templates/pacApp/tableElements/table.html", context)
 
 
+
 def insert_space_item(request: HttpResponse):
 	return redirect('/schedule')
 

pacProject/settings.py

@@ -24,8 +24,8 @@
 SECRET_KEY = '59c!&ax&$m&aoy#!&((_l741@@-s6(86f4g8qxu1w!4^v!65d9'
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = False
-#DEBUG = True
+#DEBUG = False
+DEBUG = True
 
 ALLOWED_HOSTS = ['pac-schedule.herokuapp.com/']