catc/masks/course.html

<div id="course" class="row h-100">
	<div id="docs" class="col-3 pr-3 h-100 flex-column">
		<div id="upload_file" class="row">
			<div class="custom-file">
				<input type="file" class="custom-file-input" id="fileupload" name="files[]" multiple>
				<label class="custom-file-label" for="customFile">Choose file</label>
			</div>
			<div id="upload_progress" class="w-100 progress mt-2 hidden transition">
				<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
			</div>
		</div>
		<div id="doc_list_box" class="row"><div id="doc_list"></div></div>
	</div>
	<div id="notes_box" class="col-9 h-100">
		<div id="notes_feedback"></div>
		<div id="notes"></div>	
	</div>
</div>
<div class="template-items">
	<div class="doc-item input-group">
		<a class="link btn btn-outline-primary btn-labeled shadow-sm form-control" href="" target="_blank"><span class="btn-label"><i class="file-icon fa-file-image"></i></span><span class="btn-desc">Programme Acupuncture 1A 2019-2020 CATC CH.pdf</span></a>
		<div class="input-group-append">
			<button type="button" class="delete btn btn-danger shadow-sm pdf"><i class="fa-delete"></i></button>
		</div>
	</div>
</div>
<script type="text/javascript">
oCATC.pageInit = function(asHash, bFirstPage) {
	self.tmp('id_course', asHash.items[0]);
	
	//Setup layout
	self.setPageTitle(self.consts.courses[self.tmp('id_course')].description);
	
	//Setup Quill
	oEditor = new Editor('#notes');
	oEditor.onKeyStroke = (e) => {
		if(e.which == 83 && e.ctrlKey) {
			e.preventDefault();
			save(true);
		}
		else save();
	};
	//oQuill.keyboard.addBinding({key: 'S', ctrlKey: true}, function(){saveNotes(true);});
	
	//Load notes
	Tools.ajax(
		'get_note',
		(asData) => {
			oEditor.setContent(asData.notes);
			noteFeedback('notice', 'Last update at '+asData.led_time+' on '+asData.led_date);
		},
		{id: self.tmp('id_course')},
		() => {console.log('Note not found for course ID = '+self.tmp('id_course'))}
	);
	
	//Setup File Upload
	$('#fileupload')
		.attr('data-url', self.getActionLink('upload_doc'))
		.fileupload({
			dataType: 'json',
			acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov|doc|docx|pdf|mp3|wav)$/i,
			formData: {id: self.consts.courses[self.tmp('id_course')].id_workshop},
			progressall: function (e, asData) {
				console.log(asData);
				var iProgress = parseInt(asData.loaded / asData.total * 100, 10);
				$('#upload_progress')
					.show()
					.find('.progress-bar')
						.attr('aria-valuenow', iProgress)
						.css('width', iProgress+'%')
						.text(iProgress+'%');
			},
			done: function(e, asData) {
				$.each(asData.result.files, function(iKey, oFile) {
					var bSuccess = !('error' in oFile);
					var sType = bSuccess?'success':'error';
					var sMsg = bSuccess?('File "'+oFile.name+'" uploaded successfully'):oFile.error;
					oCATC.feedback(sType, sMsg);
				});
				$('#upload_progress').hide('fast');
				loadDocs();
			}
		});
	
	loadDocs();
	
	//Scrollbar
	$('#doc_list_box, #notes').mCustomScrollbar({
	    axis: 'y',
	    scrollInertia: 0,
	    autoExpandScrollbar: true,
	    theme: 'dark-thin'
	});
};

oCATC.onQuitPage = function(sExitMode) {
	return save(true, (sExitMode==self.consts.exitmodes.closing));
};

function loadDocs() {
	Tools.ajax(
		'get_docs',
		(asData) => {
			var $DocList = $('#doc_list').empty();
			$.each(asData, function(iKey, asDoc){
				var $Item = oCATC.getTemplateItem('doc-item');
				$Item.find('.link').addClass(asDoc.type).attr('href', asDoc.filepath);
				$Item.find('.file-icon').addClass('fa-file-'+asDoc.type);
				$Item.find('.btn-desc').text(asDoc.filename);
				$Item.find('.delete').data('id', asDoc.id_doc).click(function(){
					Tools.ajax(
						'delete_doc',
						(asData) => {
							oCATC.feedback('success', 'File "'+asData.filename+'" deleted');
							loadDocs();
						},
						{id: $(this).data('id')}
					);
					
				});
				
				$DocList.append($Item);
			});
			
		},
		{id: self.consts.courses[self.tmp('id_course')].id_workshop},
		() => {console.log('No doc found for course ID = '+self.tmp('id_course'))}
	);
}

function noteFeedback(sType, sMsg) {
	var $Feedback = $('#notes_feedback');
	if(sMsg != $Feedback.find('.alert').text()) {
		$Feedback.finish().fadeOut($Feedback.is(':empty')?0:'fast', function(){
			$(this)
				.empty()
				.append($('<div>', {'class':'alert note-'+sType}).text(sMsg))
				.fadeIn('fast')
				.delay(5000)
				.fadeOut('fast');
		});
	}
};

function save(bForce, bOnUnload) {
	bForce = bForce || false;
	bOnUnload = bOnUnload || false;
	if(bOnUnload) bForce = true;
	
	if(typeof oSaveTimer != 'undefined') clearTimeout(oSaveTimer);
	var bSave = (oEditor.keystrokes % 20 == 0 || bForce);

	if(bSave) {
		if(self.tmp('saving') && !bOnUnload) {
			oSaveTimer = setTimeout(function(){save(true);}, 500);
		}
		else {
			var sContent =  oEditor.getContent();
			if(self.tmp('id_course') != 0) {
				self.tmp('saving', true);
				noteFeedback('info', 'Saving...');
				Tools.ajax(
					'set_note', 
					function(asData) {
						self.tmp('saving', false);
						var sMsg = 'Note saved ('+asData.led_time+')';
						if($.type(noteFeedback)=='function') noteFeedback('notice', sMsg);
						else oCATC.feedback('success', sMsg);
					},
					{id: self.tmp('id_course'), content: sContent},
					function(sError) {
						self.tmp('saving', false);
						var sMsg = 'Not saved! An error occured: '+sError;
						if($.type(noteFeedback)=='function') noteFeedback('error', sMsg);
						else oCATC.feedback('error', sMsg);
						oSaveTimer = setTimeout(save, 1000);
					},
					false,
					'POST',
					'json',
					bOnUnload
				);
			}
			else noteFeedback('error', 'No Course ID');
		}
	}
	else {
		oSaveTimer = setTimeout(function(){save(true);}, 1000*5);
	}
	return true;
}
</script>