navigate through workshops courses back and forth

inc/catc.php

@@ -79,6 +79,7 @@ class CATC extends Main
 					'success'	=> self::SUCCESS,
 					'context'	=> $this->asContext,
 					'cookie'	=> Auth::USER_COOKIE_PASS,
+					'workshops'	=> (new Course($this->oDb))->getWorkshops(),
 					'courses'	=> (new Course($this->oDb))->getCourses()
 				),
 				'vars'		=> $this->getVars()
@@ -117,12 +118,6 @@ class CATC extends Main
 		return $this->oAuth->checkApiKey($sApiKey);
 	}
 	
-	/* Workshops / Courses */
-	
-	public function getWorkshops() {
-		return self::getJsonResult(true, '', (new Course($this->oDb))->getWorkshops());
-	}
-	
 	/* Notes*/
 	
 	public function getNote($iCourseId) {

index.php

@@ -48,9 +48,6 @@ elseif($sAction!='' && $bLoggedIn)
 {
 	switch ($sAction)
 	{
-		case 'workshops':
-			$sResult = $oCATC->getWorkshops();
-			break;
 		case 'get_note':
 			$sResult = $oCATC->getNote($iId);
 			break;

masks/template.html

@@ -1,7 +1,7 @@
 <div id="feedback"></div>
 <div id="header">
-	<div id="logo_box"></div>
 	<div id="desc_box"><div class="desc">Collège des <span>arts thérapeutiques chinois</span></div></div>
+	<div id="logo_box"><a href="#workshops"></a></div>
 </div>
 <div id="menu">
 	<ul>
@@ -15,5 +15,4 @@
 </div>		
 <footer>
 	<span>Designed and powered by Franzz &amp; Clarita - CATC Notes Project under <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPLv3</a> License</span>
-</footer>
-#errors#
+</footer>

masks/workshop.html

@@ -0,0 +1,24 @@
+<div id="workshop" class="container">
+	<div class="row">
+		<div class="col-1"><button type="button" class="back btn btn-primary"><i class="fal fa-previous"></i></button></div>
+		<div class="col-8"><div id="course-list" class="list-group"></div></div>
+	</div>
+</div>
+<script type="text/javascript">
+oCATC.pageInit = function(asHash, bFirstPage) {
+	self.tmp('id_workshop', asHash.items[0]);
+	
+	//Setup layout
+	self.setPageTitle('Workshop: '+self.consts.workshops[self.tmp('id_workshop')].dates);
+	
+	var $CourseList = $('#course-list');
+	$.each(self.consts.workshops[self.tmp('id_workshop')].courses, function(iCourseId, asCourse){
+		$CourseList.append($('<a>', {'href':'#course-'+iCourseId, 'class':'list-group-item d-flex justify-content-between align-items-center list-group-item-primary list-group-item-action'})
+			.append(asCourse.description)
+			.append($('<span>', {'class':'badge badge-primary badge-pill'}).text(asCourse.timeslot))
+		);
+	});
+	
+	$('.back').click(function(){self.setHash('workshops')});
+}
+</script>

masks/workshops.html

@@ -1,6 +1,6 @@
 <div id="workshops">
 	<div class="ws_title"><h1>Workshops</h1></div>
-	<div id="ws_data"></div>
+	<div id="ws_data"><div class="ws_list"></div></div>
 </div>
 <script type="text/javascript">
 oCATC.pageInit = function(asHash, bFirstPage)
@@ -8,43 +8,20 @@ oCATC.pageInit = function(asHash, bFirstPage)
 	self.setPageTitle('');
 	
 	//Workshops list
-	var $Workshops = $('<div>', {'class':'ws_list'});
-	Tools.ajax('workshops', function(asData){
-		$.each(asData, function(iWsId, asWorkshop){
-			var $Workshop = $('<div>', {'class':'ws_item clickable transition'})
-				.click(openCourses)
-				.append($('<span>', {'class':'title'}).text('WS '+iWsId))
-				.append($('<span>', {'class':'previous fa-fw clickable'})
-					.click(closeCourses)
-					.appendIcon('previous'))
-				.append($('<span>', {'class':'dates'}).text(asWorkshop.dates));
-			
-			var $Courses = $('<div>', {'class':'courses'}).appendTo($Workshop); 
-			$.each(asWorkshop.courses, function(iCourseId, asCourse){
-				var $Course = $('<div>', {'class':'course clickable transition'})
-					.click(function(){oCATC.setHash('course', iCourseId)})
-					.text(asCourse.description);
-				
-				$Courses.append($Course);
-			});
-			
-			$Workshops.append($Workshop);
-		});
+	var $Workshops = $('#workshops').find('.ws_list');
+
+	$.each(self.consts.workshops, function(iWsId, asWorkshop){
+		var $Workshop = $('<div>', {'class':'ws_item clickable transition'})
+			.data('id', iWsId)
+			.click(openCourses)
+			.append($('<span>', {'class':'title'}).text('WS '+iWsId))
+			.append($('<span>', {'class':'dates'}).text(asWorkshop.dates));
+		
+		$Workshops.append($Workshop);
 	});
-	$('#ws_data').append($Workshops);
 }
 
 function openCourses() {
-	var $This = $(this);
-	$('.ws_list').find('.ws_item').not($This).hide();
-	$This
-		.addClass('opened')
-		.removeClass('clickable');
-}
-
-function closeCourses(e) {
-	e.stopPropagation(); 
-	console.log('sdqsdf');
-	$('.ws_list').find('.ws_item').removeClass('opened').addClass('clickable').show();
+	oCATC.setHash('workshop', $(this).data('id'));
 }
 </script>

style/_page_workshops.scss

@@ -35,10 +35,6 @@
 					border-bottom: 1px solid $gray-300;
 					font-weight: bold;
 				}
-			
-				&.previous {
-					display: none;
-				}
 			}
 		
 			.courses {
@@ -46,51 +42,6 @@
 				width: 100%;
 				text-align: left;
 			}
-		
-			&.opened {
-				width: auto;
-				height: auto;
-				
-				span.title {
-					color: $gray-300;
-					background: $col_main_1;
-				}
-			
-				span.previous {
-					display: block;
-					position: absolute;
-					top: 0;
-					left: 5px;
-					width: auto;
-					color: $gray-300;
-					
-					&:hover {
-						color: $col_main_2;
-					}
-				}
-				
-				span.dates {
-					display: none;
-				}
-				
-				.courses {
-					display: inline-block;
-					
-					.course {
-						border-bottom: 1px solid $gray-300;
-						padding: 1em;
-
-						&:last-child {
-							border-bottom: none;
-						}
-					
-						&:hover {
-							background: $col_main_2;
-							color: $gray-300;
-						}
-					}
-				}
-			}
 		}
 	} 
 }

style/_template.scss

@@ -103,6 +103,12 @@ a.button:active {
 		width: 100%;
 		height: 100%;
 		background: url('../images/logo.png') 0 0 no-repeat;
+		
+		a {
+			display: block;
+			width: 116px;
+			height: 100%;
+		}
 	}
 
 	#desc_box {