navigate through workshops courses back and forth

This commit is contained in:
2019-09-08 16:21:56 +02:00
parent 56e8cdcbf3
commit d3532a3de7
9 changed files with 47 additions and 98 deletions

View File

@@ -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>

24
masks/workshop.html Normal file
View File

@@ -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>

View File

@@ -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>