Add frontend assets and plugin bundles

Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.

assets/js/admin/_dashboard.php

@@ -0,0 +1,68 @@
+<link rel="stylesheet" href="../assets/plugins/fullcalendar/fullcalendar/fullcalendar.css" />
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+
+<script src="../assets/plugins/fullcalendar/fullcalendar/fullcalendar.js"></script> 
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+		/*Index.init();*/
+		var date = new Date();
+        var d = date.getDate();
+        var m = date.getMonth();
+        var y = date.getFullYear();
+        $('#calendar').fullCalendar({
+            editable: true,
+            header: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'month'
+            },
+            events: "page/dashboard/json.kalender.php",
+           // Convert the allDay from string to boolean
+            eventRender: function(event, element, view) {
+                if (event.allDay === 'true') {
+                    event.allDay = true;
+                } else {
+                    event.allDay = false;
+                }
+            },
+            selectable: true,
+            selectHelper: true,
+            eventClick: function (calEvent, jsEvent, view) {
+                //alert(calEvent.id);
+                $("#JadwalDetail").modal('show');
+                $.ajax({
+                    url:'page/dashboard/act.dashboard.php',
+                    dataType:'json',
+                    type:'post',
+                    cache:false,
+                    data:'act=detailjadwal&id='+calEvent.id,
+                    beforeSend:function(){
+                        $("#tbjadwal").hide();
+                    },
+                    success:function(json){
+                        if(json.result){
+                            $("#tbjadwal").show();
+                            $("#nama").html(json.nama+" ("+json.nim+")");
+                            $("#jenis").html(json.jenis);
+                            $("#judul").html(json.judul);
+                            $("#tgl").html(json.tgl+" "+json.wkt);
+                            $("#ruangan").html(json.ruangan);
+                            $("#pembimbing1").html(json.pemb1);
+                            $("#pembimbing2").html(json.pemb2);
+                            $("#penguji1").html(json.peng1);
+                            $("#penguji2").html(json.peng2);
+                            $("#JadwalDetail").modal('show');                           
+                        }else{
+                            alert(json.msg);
+                        }
+                    }
+                });
+                return false;
+            }          
+        });
+	});
+</script>

assets/js/admin/_jadwal.php

@@ -0,0 +1,428 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />
+<link rel="stylesheet" href="../assets/plugins/ckeditor/contents.css">
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+<link rel="stylesheet" href="../assets/plugins/datepicker/css/datepicker.css">
+<link rel="stylesheet" href="../assets/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
+<link rel="stylesheet" href="../assets/plugins/fullcalendar/fullcalendar/fullcalendar.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script type="text/javascript" src="../assets/plugins/fullcalendar/fullcalendar/fullcalendar.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="../assets/plugins/datepicker/js/bootstrap-datepicker.js"></script>
+<script src="../assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script>
+	let currentIdRekapJadwal = 0;
+	let currentJenisSidangRekapJadwal = '';
+	
+	jQuery(document).ready(function() {
+		Main.init();
+		var date = new Date();
+		var d = date.getDate();
+		var m = date.getMonth();
+		var y = date.getFullYear();
+
+		$('.date-picker').datepicker({
+            autoclose: true
+        });
+
+        $(".search-select").select2({
+            placeholder: "Pilih Mahasiswa",
+            allowClear: true
+        });
+
+        $('.time-picker').timepicker({
+        	minuteStep: 5,
+            showInputs: true,
+            disableFocus: true,
+            showMeridian:false
+        });
+
+		$('#list-jadwal').dataTable({
+			"iDisplayLength": 5,
+			"aLengthMenu": [
+                [5, 10, 15, 20, 50, 100, -1],
+                [5, 10, 15, 20, 50, 100, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"sAjaxSource": "page/jadwal/list.jadwal.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ada",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        }
+		});
+
+		$('#list-jadwal_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#list-jadwal_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#list-jadwal_wrapper .dataTables_length select').select2();
+
+       	$("#form_jadwal").validate({
+        	errorPlacement:function(error,element){
+        		error.appendTo( element.parent("div"));
+        	},
+        	submitHandler:function(form){
+        		$.ajax({
+        			url:'page/jadwal/act.jadwal.php',
+        			dataType:'json',
+        			type:'post',
+        			cache:false,
+        			data:$("#form_jadwal").serialize(),
+        			beforeSend:function(){
+        				$("#loading").show();
+        			},
+        			success:function(json){
+        				if(json.result){
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Sukses',
+                                time: 1000,
+                                text: json.msg,
+                                after_close: function(){
+                                	location.href="?page=jadwal";
+                                    $("#list-jadwal").dataTable().fnDraw();
+                                }
+                            });
+        					
+        				}else{
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Kesalahan',
+                                time: 4000,
+                                text: json.msg
+                            });
+        				}
+        			}
+        		});
+        		return false;
+        	}
+        });
+		$('#calendar').fullCalendar({
+			editable: true,
+			header: {
+				left: 'prev,next today',
+				center: 'title',
+				right: 'month'
+			},
+			events: "page/jadwal/json.kalender.php",
+		   // Convert the allDay from string to boolean
+			eventRender: function(event, element, view) {
+		    	if (event.allDay === 'true') {
+		     		event.allDay = true;
+		    	} else {
+		     		event.allDay = false;
+		    	}
+			},
+			selectable: true,
+			selectHelper: true,
+			eventClick: function (calEvent, jsEvent, view) {
+				//alert(calEvent.id);
+				$("#JadwalDetail").modal('show');
+				$.ajax({
+        			url:'page/jadwal/act.jadwal.php',
+        			dataType:'json',
+        			type:'post',
+        			cache:false,
+        			data:'act=detailjadwal&id='+calEvent.id,
+        			beforeSend:function(){
+        				$("#tbjadwal").hide();
+        			},
+        			success:function(json){
+        				if(json.result){
+        					$("#tbjadwal").show();
+        					$("#nama").html(json.nama+" ("+json.nim+")");
+        					$("#jenis").html(json.jenis);
+        					$("#judul").html(json.judul);
+        					$("#tgl").html(json.tgl+" "+json.wkt);
+        					$("#ruangan").html(json.ruangan);
+        					$("#pembimbing1").html(json.pemb1);
+        					$("#pembimbing2").html(json.pemb2);
+        					$("#penguji1").html(json.peng1);
+        					$("#penguji2").html(json.peng2);
+        					$("#JadwalDetail").modal('show');        					
+        				}else{
+        					alert(json.msg);
+        				}
+        			}
+        		});
+        		return false;
+                /*var form = $("<form></form>");
+                form.append("<label>Detail</label>");
+                form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success'><i class='fa fa-check'></i> Save</button></span></div>");
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                $modal.find('.remove-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.remove-event').unbind('click').click(function () {
+                    calendar.fullCalendar('removeEvents', function (ev) {
+                        return (ev._id == calEvent._id);
+                    });
+                    $modal.modal('hide');
+                });
+                $modal.find('form').on('submit', function () {
+                    calEvent.title = form.find("input[type=text]").val();
+                    calendar.fullCalendar('updateEvent', calEvent);
+                    $modal.modal('hide');
+                    return false;
+                });*/
+            }		   
+		});
+
+		$("#idmhs").change(function(event) {
+			if($("#idmhs").val()>0){
+				$.ajax({
+	    			url:'page/jadwal/act.jadwal.php',
+	    			dataType:'json',
+	    			type:'post',
+	    			cache:false,
+	    			data:{act:"getinfo",idmhs:$("#idmhs").val()},
+	    			beforeSend:function(){
+	    			},
+	    			success:function(json){
+	    				if(json.result){
+	    					$("#judul").html(json.data.judul);
+	    					$("#pemb1").val(json.data.pemb1);
+	    					$("#pemb2").val(json.data.pemb2);
+	    					$("#peng1").val(json.data.peng1);
+	    					$("#peng2").val(json.data.peng2);
+	    				}else{
+	    					$("#judul").html("");
+	    					$("#pemb1").val("");
+	    					$("#pemb2").val("");
+	    					$("#peng1").val("");
+	    					$("#peng2").val("");
+	    				}
+	    			}
+	    		});
+			}
+		});
+
+	});
+
+	
+	function EditJadwal(id){
+		location.href="?page=jadwal&act=edit&id="+id;
+	}
+
+	function HapusJadwal(id){
+		if(confirm("Hapus Jadwal ini")){
+			$.ajax({
+				url:'page/jadwal/act.jadwal.php',
+				type:'post',
+				dataType:'json',
+				cache:false,
+				data:'act=hapusjadwal&jadwal='+id,
+				success:function(json){
+					if(json.result){
+						$.gritter.add({
+							title:'Sukses',
+			                time: 1000,
+			                text: json.msg,
+			                after_close: function(){
+								$('#list-jadwal').dataTable().fnDraw();
+							}
+				        });
+						
+					}else{
+						$.gritter.add({
+							title:'Kesalahan',
+			                time: 1000,
+			                text: json.msg
+				        });
+					}
+				}
+			});
+		}
+	}
+
+	function PublishJadwal(id){
+		if(confirm('Terbitkan Jadwal ini ??')){
+			$.ajax({
+				url:'page/jadwal/act.jadwal.php',
+				type:'post',
+				dataType:'json',
+				cache:false,
+				data:'act=publish&idjadwal='+id,
+				success:function(json){
+					if(json.result){
+						$.gritter.add({
+							title:'Sukses',
+			                time: 1000,
+			                text: json.msg,
+			                after_close: function(){
+								$('#list-jadwal').dataTable().fnDraw();
+							}
+				        });
+						
+					}else{
+						$.gritter.add({
+							title:'Kesalahan',
+			                time: 4000,
+			                text: json.msg
+				        });
+					}
+				}
+			});
+		}
+	}
+
+	function LihatBerkasSidang(idRekap){
+		$('#berkasModal').modal('show');
+		currentIdRekapJadwal = idRekap;
+		currentJenisSidangRekapJadwal = 'Sidang';
+		refreshTabelBerkas();
+	}
+
+	function LihatBerkasSeminarHasil(idRekap){
+		$('#berkasModal').modal('show');
+		currentIdRekapJadwal = idRekap;
+		currentJenisSidangRekapJadwal = 'SidHas';
+		refreshTabelBerkas();
+	}
+
+	function LihatBerkasOutline(idRekap){
+		$('#berkasModal').modal('show');
+		currentIdRekapJadwal = idRekap;
+		currentJenisSidangRekapJadwal = 'Outline';
+		refreshTabelBerkas();
+	}
+	
+	function refreshTabelBerkas(){
+		let url = `../steven/API/getBerkasSidangMahasiswa.php?bypassSaya&idRekapHasil=${currentIdRekapJadwal}&jenis=${currentJenisSidangRekapJadwal}`;
+		$('#isiTabelBerkas').html(`<tr><td colspan="4" style="text-align:center">Mengambil data</td></tr>`);
+		$('#catatanBerkasDosen').val('');
+			
+		$.ajax({
+		url: url,
+		type:'GET',
+		dataType:'json',
+		contentType: false,
+		cache: false,
+		processData:false,
+		beforeSend:function(){
+		//     $("#loading").show();
+		},
+		success:function(json){
+			const data = json.data;
+			const catatan = json.catatanAdmin;
+
+			$('#catatanBerkasDosen').val(catatan);
+
+			let isiTabel = ``;
+			let no = 1;
+			for (var key in data) {
+				if (data.hasOwnProperty(key)){
+					const berkas = data[key];
+					const judul = berkas.judul;
+					const dataBerkas = berkas.data;
+
+					let adaBerkas = true;
+					if(dataBerkas == undefined || dataBerkas == null){
+						adaBerkas= false;
+					}else{
+						if(dataBerkas.file == null || dataBerkas.file == ""){
+							adaBerkas = false;
+						}
+					}
+					
+					if(adaBerkas){
+						const verifikasiAdmin = Number(dataBerkas.status);
+						let checkbox = `<input type="checkbox" class="cbVerifBerkas" data-id="${dataBerkas.id}">`;
+						if(verifikasiAdmin == 1){
+							checkbox = `<input type="checkbox" class="cbVerifBerkas" data-id="${dataBerkas.id}" checked="checked">`;
+						}
+
+						isiTabel += `<tr><td>${no}</td><td>${judul}</td><td><a href="${dataBerkas.file}" target="_blank"><button class="btn btn-primary">Lihat File</button></a></td><td>${checkbox}</td></tr>`; 
+					}else{
+						isiTabel += `<tr><td>${no}</td><td>${judul}</td><td colspan="2">Belum diupload</td></tr>`; 
+					}
+
+					no++;
+				}
+			}
+
+			$('#isiTabelBerkas').html(isiTabel);
+		},
+		error: function (jqXHR, exception) {
+			$('#isiTabelBerkas').html(`<tr><td colspan="4" style="text-align:center">Gagal mengambil data ${jqXHR.responseText} <br><button class="btn btn-primary" onClick="refreshTabelBerkas()">Coba Lagi</button></td></tr>`);
+		}
+		});
+	}
+
+	function simpanVerifBerkas(){
+		let listVerif = [];
+		$(`.cbVerifBerkas`).each(function(i, obj) {
+			let verif = 0;
+			if($(this).is(":checked")){
+				verif = 1;
+			}
+			const id = $(this).attr("data-id");
+
+			listVerif.push({
+				'id' : id,
+				'verif' : verif,
+			});
+		});
+
+		let formData = new FormData();
+		formData.append("dataVerif", JSON.stringify(listVerif));
+		formData.append("idRekap", currentIdRekapJadwal);
+		formData.append("jenis", currentJenisSidangRekapJadwal);
+		formData.append("catatan", $('#catatanBerkasDosen').val());
+
+		$.ajax({
+				url:`../steven/API/verifBerkasAdmin.php`,
+				type:'POST',
+				data:formData,
+				dataType:'json',
+				mimeType:'multipart/form-data',
+				contentType: false,
+				cache: false,
+				processData:false,
+				beforeSend:function(){
+				
+				},
+				success:function(json){
+					if(json.status){
+						$('#berkasModal').modal('hide');
+						$.gritter.add({
+							title:'Sukses',
+							time: 1000,
+							text: json.msg,
+							
+						});
+					}else{
+					
+						$.gritter.add({
+							title:'Kesalahan',
+							time: 4000,
+							text: json.msg
+						});
+					}
+				},
+				error: function (jqXHR, exception) {
+					$.gritter.add({
+							title:'Kesalahan',
+							time: 4000,
+							text: jqXHR.responseText
+						});
+				}
+			});
+	}
+	
+</script>

assets/js/admin/_pengaturan.php

@@ -0,0 +1,78 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />
+<link rel="stylesheet" href="../assets/plugins/ckeditor/contents.css">
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/datepicker/css/datepicker.css">
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+
+		$("#pengaturan").validate({
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			rules:{
+				smt:{
+					required:true
+				},
+				thn_ajaran:{
+					required:true
+				},
+				min_setuju:{
+					required:true
+				}
+			},
+			messages:{
+				smt:{
+					required:"Silakan Pilih Semester Yang Aktif Sekarang"
+				},
+				thn_ajaran:{
+					required:"Tahun Ajaran Tidak Boleh Kosong"
+				},
+				min_setuju:{
+					required:"Syarat Minimal Close Draft Praoutline Harus dipilih"
+				}
+			},
+			submitHandler:function(form){
+				$.ajax({
+					url:'page/pengaturan/act.pengaturan.php',
+					type:'post',
+					dataType:'json',
+					cache:false,
+					data:$("#pengaturan").serialize(),
+					success:function(json){
+						if(json.result){
+							$.gritter.add({
+								title:'Sukses',
+				                time: 1000,
+				                text: json.msg
+					        });
+						}else{
+							$.gritter.add({
+								title:'Kesalahan',
+				                time: 4000,
+				                text: json.msg
+					        });
+						}
+					}
+				});
+				return false;
+			}
+		});
+
+	});
+
+</script>

assets/js/admin/_pengumuman.php

@@ -0,0 +1,354 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />
+<link rel="stylesheet" href="../assets/plugins/ckeditor/contents.css">
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+
+		$('#list-pengumuman').dataTable({
+			"iDisplayLength": 5,
+			"aLengthMenu": [
+                [5, 10, 15, 20, 50, 100, -1],
+                [5, 10, 15, 20, 50, 100, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"sAjaxSource": "page/pengumuman/list.daftar-pengumuman.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ada",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        }
+		});
+
+		$('#list-pengumuman_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#list-pengumuman_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#list-pengumuman_wrapper .dataTables_length select').select2();
+
+        $("#tulis_pengumuman").validate({ // aksi tulis dan edit pengumuman
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			submitHandler:function(form){
+				for ( instance in CKEDITOR.instances )
+				    {
+				        CKEDITOR.instances[instance].updateElement();
+				    }
+
+				if(window.FormData !== undefined)  // for HTML5 browsers
+				{
+					var formData = new FormData(document.getElementById("tulis_pengumuman"));
+					$.ajax({
+						url:'page/pengumuman/act.pengumuman.php',
+						type:'POST',
+						data:formData,
+						dataType:'json',
+						mimeType:'multipart/form-data',
+						contentType: false,
+				    	cache: false,
+						processData:false,
+						beforeSend:function(){
+							$("#loading").show();
+						},
+						success:function(json){
+							if(json.result){
+								$("#loading").hide();
+								$.gritter.add({
+									title:'Sukses',
+					                time: 1000,
+					                text: json.msg,
+					                after_close: function(){
+										location.href="?page=pengumuman&menu=daftar-pengumuman";
+									}
+						        });
+								
+							}else{
+								$("#loading").hide();
+								$.gritter.add({
+									title:'Kesalahan',
+					                time: 4000,
+					                text: json.msg
+						        });
+							}
+						}
+					});
+
+
+				}else  //for olden browsers
+				{
+					var  iframeId = "unique" + (new Date().getTime());
+					var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
+					iframe.hide();
+					form.attr("target",iframeId);
+					iframe.appendTo("body");
+					iframe.load(function(e){
+						var doc = getDoc(iframe[0]);
+						var docRoot = doc.body ? doc.body : doc.documentElement;
+						var data = docRoot.innerHTML;
+					});
+				}
+			}
+		});
+
+		/*$('#list-daftarkategori').dataTable({
+			"iDisplayLength": 5,
+			"aLengthMenu": [
+                [5, 10, 15, 20, 50, -1],
+                [5, 10, 15, 20, 50, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"bFilter": false,
+			"sAjaxSource": "page/pengumuman/list.kategori-pengumuman.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ditemukan",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        },
+	        "aoColumnDefs": [
+		      { "sClass": "text-center", "aTargets": [ 1 ] }
+		    ]
+		});
+		$('#Btntambahkategori').click(function(){
+			$("#nama_kategori").val("");
+			$("#tambahkategori").modal('show');
+		});
+		$("#form-kategori").validate({
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			submitHandler:function(form){
+				//alert($("#form-kategori").serialize());
+				$.ajax({
+					url:'page/pengumuman/act.pengumuman.php',
+					type:'post',
+					dataType:'json',
+					cache:false,
+					data:'act=tambahkat&'+$("#form-kategori").serialize(),
+					success:function(json){
+						if(json.result){
+							$("#tambahkategori").modal('hide');
+							$.gritter.add({
+								title:'Sukses',
+				                time: 1000,
+				                text: json.msg,
+				                after_close: function(){
+									$('#list-daftarkategori').dataTable().fnDraw();
+								}
+					        });
+							
+						}else{
+							$.gritter.add({
+								title:'Kesalahan',
+				                time: 4000,
+				                text: json.msg
+					        });
+						}
+					}
+				});
+				return false;
+			}
+		});
+		$("#eform-kategori").validate({
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			submitHandler:function(form){
+				//alert($("#form-kategori").serialize());
+				$.ajax({
+					url:'page/pengumuman/act.pengumuman.php',
+					type:'post',
+					dataType:'json',
+					cache:false,
+					data:'act=updatekat&'+$("#eform-kategori").serialize(),
+					success:function(json){
+						if(json.result){
+							$("#editkategori").modal('hide');
+							$.gritter.add({
+								title:'Sukses',
+				                time: 1000,
+				                text: json.msg,
+				                after_close: function(){
+									$('#list-daftarkategori').dataTable().fnDraw();
+								}
+					        });
+							
+						}else{
+							$.gritter.add({
+							title:'Kesalahan',
+			                time: 4000,
+			                text: json.msg
+				        });
+						}
+					}
+				});
+				return false;
+			}
+		});
+
+		$('#list-daftarkategori_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#list-daftarkategori_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#list-daftarkategori_wrapper .dataTables_length select').select2();
+
+        $("#kategori-pengumuman").change(function(){
+			if($("#kategori-pengumuman").val()=="addnew"){
+				$("#nama_kategori").val("");
+				$("#addkategori").modal('show');
+			}
+		});
+
+		$("#form-addkategori").validate({
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			submitHandler:function(form){
+				//alert($("#form-kategori").serialize());
+				$.ajax({
+					url:'page/pengumuman/act.pengumuman.php',
+					type:'post',
+					dataType:'json',
+					cache:false,
+					data:'act=tambahkat&'+$("#form-addkategori").serialize(),
+					success:function(json){
+						if(json.result){
+							$("#addkategori").modal('hide');
+							$.gritter.add({
+								title:'Sukses',
+				                time: 1000,
+				                text: json.msg,
+				                after_close: function(){
+									$("#kategori-pengumuman").append("<option selected value='"+json.idkat+"'>"+json.namekat+"</option>");
+									$("#kategori-pengumuman").focus();
+								}
+					        });
+							
+						}else{
+							$.gritter.add({
+								title:'Kesalahan',
+				                time: 4000,
+				                text: json.msg
+					        });
+							}
+					}
+				});
+				return false;
+			}
+		});*/
+
+	});
+	function getDoc(frame) {
+	     var doc = null;
+	     try {
+	         if (frame.contentWindow) {
+	             doc = frame.contentWindow.document;
+	         }
+	     } catch(err) {
+	     }
+
+	     if (doc) { 
+	         return doc;
+	     }
+	     try { 
+	         doc = frame.contentDocument ? frame.contentDocument : frame.document;
+	     } catch(err) {
+	         doc = frame.document;
+	     }
+	     return doc;
+	}
+	
+	function EditPengumuman(id){
+		location.href="?page=pengumuman&menu=edit-pengumuman&pengumuman="+id;
+	}
+
+	function HapusPengumuman(id){
+		if(confirm("Hapus Pengumuman ini")){
+			$.ajax({
+				url:'page/pengumuman/act.pengumuman.php',
+				type:'post',
+				dataType:'json',
+				cache:false,
+				data:'act=hapuspengumuman&pengumuman='+id,
+				success:function(json){
+					if(json.result){
+						$.gritter.add({
+							title:'Sukses',
+			                time: 1000,
+			                text: json.msg,
+			                after_close: function(){
+								$('#list-pengumuman').dataTable().fnDraw();
+							}
+				        });
+						
+					}else{
+						$.gritter.add({
+							title:'Kesalahan',
+			                time: 1000,
+			                text: json.msg
+				        });
+					}
+				}
+			});
+		}
+	}
+
+	function PublishPengumuman(id){
+		if(confirm('Terbitkan Pengumuman ini ??')){
+			$.ajax({
+				url:'page/pengumuman/act.pengumuman.php',
+				type:'post',
+				dataType:'json',
+				cache:false,
+				data:'act=publish&idpengumuman='+id,
+				success:function(json){
+					if(json.result){
+						$.gritter.add({
+							title:'Sukses',
+			                time: 1000,
+			                text: json.msg,
+			                after_close: function(){
+								$('#list-pengumuman').dataTable().fnDraw();
+							}
+				        });
+						
+					}else{
+						$.gritter.add({
+							title:'Kesalahan',
+			                time: 4000,
+			                text: json.msg
+				        });
+					}
+				}
+			});
+		}
+	}
+</script>

assets/js/admin/_praoutline.php

@@ -0,0 +1,349 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />
+<!-- <link rel="stylesheet" href="../assets/plugins/ckeditor/contents.css"> .-->
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+
+		$(".search-select").select2({
+            placeholder: "Pilih Dosen",
+            allowClear: true
+        });
+
+
+		$('#list-judul').dataTable({
+			"iDisplayLength": 10,
+			"aLengthMenu": [
+                [10, 15, 20, 50, 100, -1],
+                [10, 15, 20, 50, 100, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"sAjaxSource": "page/praoutline/list.judul.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ada",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        }
+		});
+
+		$('#list-judul_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#list-judul_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#list-judul_wrapper .dataTables_length select').select2();
+
+        $('#kep-draft-praoutline').dataTable({
+			"iDisplayLength": 10,
+			"aLengthMenu": [
+                [10, 15, 20, 50, 100, -1],
+                [10, 15, 20, 50, 100, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"sAjaxSource": "page/praoutline/list.kep.draft.praoutline.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ada",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        }
+		});
+
+		$('#kep-draft-praoutline_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#kep-draft-praoutline_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#kep-draft-praoutline_wrapper .dataTables_length select').select2();
+
+        $('#list-judulditerima').dataTable({
+			"iDisplayLength": 10,
+			"aLengthMenu": [
+                [10, 15, 20, 50, 100, -1],
+                [10, 15, 20, 50, 100, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"sAjaxSource": "page/praoutline/list.judulditerima.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ada",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        }
+		});
+
+		$('#list-judulditerima_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#list-judulditerima_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#list-judulditerima_wrapper .dataTables_length select').select2();
+
+        $('#list-myreview').dataTable({
+			"iDisplayLength": 10,
+			"aLengthMenu": [
+                [10, 15, 20, 50, 100, -1],
+                [10, 15, 20, 50, 100, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"sAjaxSource": "page/praoutline/list.myreview.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ada",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        }
+		});
+
+		$('#list-myreview_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#list-myreview_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#list-myreview_wrapper .dataTables_length select').select2();
+		//daftar berita
+
+		$("#cari").validate({
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			submitHandler:function(form){
+				$.ajax({
+					url:'page/praoutline/act.praoutline.php',
+					dataType:'html',
+					type:'POST',
+					data:$("#cari").serialize(),
+					cache:false,
+					beforeSend:function(){
+						$("#loading").show();
+					},
+					success:function(html){
+						$("#loading").fadeOut('fast');
+						$("#result-cari").html(html);
+					}
+				});
+			}
+		});
+
+		$("#reupload").validate({
+			rules:{
+				berkas:{
+					required:true
+				}
+			}, 
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			submitHandler:function(form){
+				for ( instance in CKEDITOR.instances )
+				    {
+				        CKEDITOR.instances[instance].updateElement();
+				    }
+
+				if(window.FormData !== undefined)  
+				{
+					var formData = new FormData(document.getElementById("reupload"));
+					$.ajax({
+						url:'page/praoutline/act.praoutline.php',
+						type:'POST',
+						data:formData,
+						dataType:'json',
+						mimeType:'multipart/form-data',
+						contentType: false,
+				    	cache: false,
+						processData:false,
+						beforeSend:function(){
+							$("#loading").show();
+							$("#btn_reupload").val('Uploading...');
+						},
+						success:function(json){
+							if(json.result){
+								$("#loading").hide();
+								$.gritter.add({
+									title:'Sukses',
+					                time: 1000,
+					                text: json.msg,
+					                after_close: function(){
+										location.href="?page=praoutline&menu=review&prid="+$("#prid").val();
+									}
+					            });
+							}else{
+								$("#loading").hide();
+								$.gritter.add({
+									title:'Kesalahan',
+					                time: 4000,
+					                text: json.msg
+					            });
+							}
+							$("#btn_reupload").val('Upload');
+						}
+					});
+
+
+				}else{  //for olden browsers
+				
+					var  iframeId = "unique" + (new Date().getTime());
+					var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
+					iframe.hide();
+					form.attr("target",iframeId);
+					iframe.appendTo("body");
+					iframe.load(function(e){
+						var doc = getDoc(iframe[0]);
+						var docRoot = doc.body ? doc.body : doc.documentElement;
+						var data = docRoot.innerHTML;
+					});
+				}
+			}
+		});
+
+		$("#post_review").submit(function() {
+			$.ajax({
+				url:'page/praoutline/act.praoutline.php',
+				dataType:'json',
+				type:'POST',
+				data:$("#post_review").serialize(),
+				cache:false,
+				beforeSend:function(){
+					$("#loading").show();
+				},
+				success:function(json){
+					if(json.result){
+						$("#loading").hide();
+						$.gritter.add({
+							title:'Sukses',
+			                time: 1000,
+			                text: json.msg,
+			                after_close: function(){
+								//location.href="?page=praoutline&menu=review";
+								location.reload();
+							}
+			            });
+					}else{
+						$("#loading").hide();
+						$.gritter.add({
+							title:'Kesalahan',
+			                time: 4000,
+			                text: json.msg
+			            });
+					}
+				}
+			});
+			return false;
+		});
+
+		$("#putusan_judul").submit(function() {
+			$.ajax({
+				url:'page/praoutline/act.praoutline.php',
+				dataType:'json',
+				type:'POST',
+				data:$("#putusan_judul").serialize(),
+				cache:false,
+				beforeSend:function(){
+					$("#loading").show();
+				},
+				success:function(json){
+					if(json.result){
+						$("#loading").hide();
+						$.gritter.add({
+							title:'Sukses',
+			                time: 1000,
+			                text: json.msg,
+			                after_close: function(){
+								location.href="?page=praoutline&menu=kep-draft-praoutline";
+							}
+			            });
+					}else{
+						$("#loading").hide();
+						$.gritter.add({
+							title:'Kesalahan',
+			                time: 4000,
+			                text: json.msg
+			            });
+					}
+				}
+			});
+			return false;
+
+		});{
+
+		}
+		
+	});
+
+	CKEDITOR.config.autoParagraph = false;
+	CKEDITOR.disableAutoInline = true;
+	$('textarea.ckeditor').ckeditor({
+		height:240
+	});
+
+	function openrev(idpr){
+		if(confirm("Aksi Ini Akan Membuka Kembali Review Pada Draft Praoutline ini. Lanjutkan ??")){
+			$.ajax({
+				url:'page/praoutline/act.praoutline.php',
+				dataType:'json',
+				type:'POST',
+				data:"act=open_judul&idpr="+idpr,
+				cache:false,
+				beforeSend:function(){
+					$("#loading").show();
+				},
+				success:function(json){
+					if(json.result){
+						$("#loading").hide();
+						$.gritter.add({
+							title:'Sukses',
+			                time: 1000,
+			                text: json.msg,
+			                after_close: function(){
+								location.href="?page=praoutline&menu=kep-draft-praoutline";
+							}
+			            });
+					}else{
+						$("#loading").hide();
+						$.gritter.add({
+							title:'Kesalahan',
+			                time: 4000,
+			                text: json.msg
+			            });
+					}
+				}
+			});
+		}
+	}
+	
+</script>

assets/js/admin/_profil.php

@@ -0,0 +1,41 @@
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+
+		CKEDITOR.disableAutoInline = true;
+	$('textarea.ckeditor').ckeditor({
+		height:400
+	});
+
+	$("#ProfilBtnSimpan").click(function(){
+		$.ajax({
+			url:'page/profil/act.profil.php',
+			dataType:'json',
+			type:'post',
+			cache:false,
+			data:$("#profil").serialize(),
+			success:function(json){
+				if(json.result){
+					$.gritter.add({
+						title:'Sukses',
+		                time: 1000,
+		                text: json.msg
+			        });
+				}else{
+					$.gritter.add({
+						title:'Kesalahan',
+		                time: 5000,
+		                text: json.msg
+		            });
+				}
+			}
+		});
+
+    	//return false;
+	});
+	});
+</script>

assets/js/admin/_user.php

@@ -0,0 +1,363 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />		
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+		$("#daftar-user").dataTable({
+			"iDisplayLength": 5,
+			"aLengthMenu": [
+                [5, 10, 20, 50, -1],
+                [5, 10, 20, 50, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"bFilter": false,
+			"sAjaxSource": "page/user/list.daftar-user.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ada",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        }
+		});
+
+		$('#daftar-user_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#daftar-user_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#daftar-user_wrapper .dataTables_length select').select2();
+
+        $("#btnTambahUser").click(function(){
+
+        });
+
+        $("#myprofile").validate({
+        	errorPlacement:function(error,element){
+        		error.appendTo( element.parent("div"));
+        	},
+        	rules:{
+        		pwd_lama: {
+				    required: function(element) {
+			        return $("#pwd").val()!="";
+			      	},
+			    	minlength: 6
+				},
+				emailuser:{
+					email: true
+				},
+				pwd:{
+					minlength: 6
+				}
+        	},
+        	messages:{
+        		pwd:{
+        			minlength:"Password Minimal 6 karakter"
+        		},
+        		pwd_lama:{
+        			minlength:"Password Minimal 6 karakter"
+        		}
+        	},
+        	submitHandler:function(form){
+        		$.ajax({
+        			url:'page/user/act.user.php',
+        			dataType:'json',
+        			type:'post',
+        			cache:false,
+        			data:$("#myprofile").serialize(),
+        			beforeSend:function(){
+        				$("#loading").show();
+        			},
+        			success:function(json){
+        				if(json.result){
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Sukses',
+                                time: 1000,
+                                text: json.msg
+                            });
+        				}else{
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Kesalahan',
+                                time: 4000,
+                                text: json.msg
+                            });
+        				}
+        			}
+        		});
+        		return false;
+        	}
+        });
+		$("#tambahuserbaru").validate({
+        	errorPlacement:function(error,element){
+        		error.appendTo( element.parent("div"));
+        	},
+        	rules:{
+        		nama_lengkap:{
+        			required:true
+        		},
+				emailuser:{
+					email: true
+				},
+				pwd:{
+					required:true,
+					minlength: 6
+				},
+                prodi:{
+                    required:true
+                },
+				username:{
+					required:true,
+					minlength: 5,
+					remote:{
+				        url: "page/user/checkuser.php",
+				        type: "post"
+				    }
+				}
+        	},
+        	messages:{
+        		pwd:{
+        			required:"Password tidak boleh kosong.",
+        			minlength:"Password Minimal 6 karakter"
+        		},
+        		emailuser:{
+        			email:"Silakan masukkan email yang valid."
+        		},
+                prodi:{
+                    required:"Silakan Pilih Program Studi"
+                },
+        		username:{
+        			required:"Username tidak boleh kosong.",
+        			minlength:"Username minimal 5 karakter",
+        			remote:"Username sudah ada."
+        		},
+        		nama_lengkap:{
+        			required:"Nama Lengkap harus diisi"
+        		}
+        	},
+        	submitHandler:function(form){
+        		$.ajax({
+        			url:'page/user/act.user.php',
+        			dataType:'json',
+        			type:'post',
+        			cache:false,
+        			data:$("#tambahuserbaru").serialize(),
+        			beforeSend:function(){
+        				$("#loading").show();
+        			},
+        			success:function(json){
+        				if(json.result){
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Sukses',
+                                time: 1000,
+                                text: json.msg,
+                                after_close: function(){
+                                    $("#tambahuser").modal('hide');
+                                    $("#daftar-user").dataTable().fnDraw();
+                                }
+                            });
+        					
+        				}else{
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Kesalahan',
+                                time: 4000,
+                                text: json.msg
+                            });
+        				}
+        			}
+        		});
+        		return false;
+        	}
+        });
+		
+		$("#editdatauser").validate({
+        	errorPlacement:function(error,element){
+        		error.appendTo( element.parent("div"));
+        	},
+        	rules:{
+        		nama_lengkap:{
+        			required:true
+        		},
+				emailuser:{
+					email: true
+				},
+				username:{
+					required:true,
+					minlength: 5
+				}
+        	},
+        	messages:{
+        		emailuser:{
+        			email:"Silakan masukkan email yang valid."
+        		},
+        		username:{
+        			required:"Username tidak boleh kosong.",
+        			minlength:"Username minimal 5 karakter."
+        		},
+        		nama_lengkap:{
+        			required:"Nama Lengkap harus diisi"
+        		}
+        	},
+        	submitHandler:function(form){
+        		$.ajax({
+        			url:'page/user/act.user.php',
+        			dataType:'json',
+        			type:'post',
+        			cache:false,
+        			data:$("#editdatauser").serialize(),
+        			beforeSend:function(){
+        				$("#loading").show();
+        			},
+        			success:function(json){
+        				if(json.result){
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Sukses',
+                                time: 1000,
+                                text: json.msg,
+                                after_close: function(){
+                                    $("#edituser").modal('hide');
+                                    $("#daftar-user").dataTable().fnDraw();
+                                }
+                            });
+        					
+        				}else{
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Kesalahan',
+                                time: 4000,
+                                text: json.msg
+                            });
+        				}
+        			}
+        		});
+        		return false;
+        	}
+        });
+	});
+
+	function EditUser(id){
+		$("#edituser").modal({
+			keyboard:false,
+			show:true,
+			remote:'page/user/form-edituser.php?user='+id
+		});
+	}
+
+	function HapusUser(id){
+		if(confirm("Hapus Admin??")){
+			$.ajax({
+				url:'page/user/act.user.php',
+				type:'post',
+				dataType:'json',
+				data:'act=hapususer&id='+id,
+				cache:false,
+				success:function(json){
+					if(json.result){
+						$.gritter.add({
+                            title:'Sukses',
+                            time: 1000,
+                            text: json.msg,
+                            after_close: function(){
+                                $("#daftar-user").dataTable().fnDraw();
+                            }
+                        });
+						
+					}else{
+						$.gritter.add({
+                            title:'Kesalahan',
+                            time: 4000,
+                            text: json.msg
+                        });
+					}
+				}
+			});
+			return false;
+		}
+		return false;
+	}
+
+	function NonaktifkanUser(id){
+		if(confirm("Nonaktifkan status Admin??")){
+			$.ajax({
+				url:'page/user/act.user.php',
+				type:'post',
+				dataType:'json',
+				data:'act=nonaktifkanuser&id='+id,
+				cache:false,
+				success:function(json){
+					if(json.result){
+						$.gritter.add({
+                            title:'Sukses',
+                            time: 1000,
+                            text: json.msg,
+                            after_close: function(){
+                                $("#daftar-user").dataTable().fnDraw();
+                            }
+                        });
+						
+					}else{
+						$.gritter.add({
+                            title:'Kesalahan',
+                            time: 4000,
+                            text: json.msg
+                        });
+					}
+				}
+			});
+			return false;
+		}
+		return false;
+	}
+
+	function AktifkanUser(id){
+		if(confirm("Aktifkan status Admin??")){
+			$.ajax({
+				url:'page/user/act.user.php',
+				type:'post',
+				dataType:'json',
+				data:'act=aktifkanuser&id='+id,
+				cache:false,
+				success:function(json){
+					if(json.result){
+						$.gritter.add({
+                            title:'Sukses',
+                            time: 1000,
+                            text: json.msg,
+                            after_close: function(){
+                                $("#daftar-user").dataTable().fnDraw();
+                            }
+                        });
+						
+					}else{
+						$.gritter.add({
+                            title:'Kesalahan',
+                            time: 4000,
+                            text: json.msg
+                        });
+					}
+				}
+			});
+			return false;
+		}
+		return false;
+	}
+</script>

assets/js/admin/index.js

@@ -0,0 +1,460 @@
+var Index = function () {
+    // function to initiate Chart 1
+    /*var runChart1 = function () {
+        function randValue() {
+            return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
+        };
+        var pageviews = [
+            [1, randValue()],
+            [2, randValue()],
+            [3, 2 + randValue()],
+            [4, 3 + randValue()],
+            [5, 5 + randValue()],
+            [6, 10 + randValue()],
+            [7, 15 + randValue()],
+            [8, 20 + randValue()],
+            [9, 25 + randValue()],
+            [10, 30 + randValue()],
+            [11, 35 + randValue()],
+            [12, 25 + randValue()],
+            [13, 15 + randValue()],
+            [14, 20 + randValue()],
+            [15, 45 + randValue()],
+            [16, 50 + randValue()],
+            [17, 65 + randValue()],
+            [18, 70 + randValue()],
+            [19, 85 + randValue()],
+            [20, 80 + randValue()],
+            [21, 75 + randValue()],
+            [22, 80 + randValue()],
+            [23, 75 + randValue()],
+            [24, 70 + randValue()],
+            [25, 65 + randValue()],
+            [26, 75 + randValue()],
+            [27, 80 + randValue()],
+            [28, 85 + randValue()],
+            [29, 90 + randValue()],
+            [30, 95 + randValue()]
+        ];
+        var visitors = [
+            [1, randValue() - 5],
+            [2, randValue() - 5],
+            [3, randValue() - 5],
+            [4, 6 + randValue()],
+            [5, 5 + randValue()],
+            [6, 20 + randValue()],
+            [7, 25 + randValue()],
+            [8, 36 + randValue()],
+            [9, 26 + randValue()],
+            [10, 38 + randValue()],
+            [11, 39 + randValue()],
+            [12, 50 + randValue()],
+            [13, 51 + randValue()],
+            [14, 12 + randValue()],
+            [15, 13 + randValue()],
+            [16, 14 + randValue()],
+            [17, 15 + randValue()],
+            [18, 15 + randValue()],
+            [19, 16 + randValue()],
+            [20, 17 + randValue()],
+            [21, 18 + randValue()],
+            [22, 19 + randValue()],
+            [23, 20 + randValue()],
+            [24, 21 + randValue()],
+            [25, 14 + randValue()],
+            [26, 24 + randValue()],
+            [27, 25 + randValue()],
+            [28, 26 + randValue()],
+            [29, 27 + randValue()],
+            [30, 31 + randValue()]
+        ];
+        var plot = $.plot($("#placeholder-h1"), [{
+            data: pageviews,
+            label: "Unique Visits"
+        }, {
+            data: visitors,
+            label: "Page Views"
+        }], {
+            series: {
+                lines: {
+                    show: true,
+                    lineWidth: 2,
+                    fill: true,
+                    fillColor: {
+                        colors: [{
+                            opacity: 0.05
+                        }, {
+                            opacity: 0.01
+                        }]
+                    }
+                },
+                points: {
+                    show: false
+                },
+                shadowSize: 2
+            },
+            grid: {
+                hoverable: true,
+                clickable: true,
+                tickColor: "#eee",
+                borderWidth: 0
+            },
+            colors: ["#d12610", "#37b7f3", "#52e136"],
+            xaxis: {
+                ticks: 11,
+                tickDecimals: 0
+            },
+            yaxis: {
+                ticks: 11,
+                tickDecimals: 0
+            }
+        });
+
+        function showTooltip(x, y, contents) {
+            $('<div id="tooltip">' + contents + '</div>').css({
+                position: 'absolute',
+                display: 'none',
+                top: y + 5,
+                left: x + 15,
+                border: '1px solid #333',
+                padding: '4px',
+                color: '#fff',
+                'border-radius': '3px',
+                'background-color': '#333',
+                opacity: 0.80
+            }).appendTo("body").fadeIn(200);
+        }
+        var previousPoint = null;
+        $("#placeholder-h1").bind("plothover", function (event, pos, item) {
+            $("#x").text(pos.x.toFixed(2));
+            $("#y").text(pos.y.toFixed(2));
+            if (item) {
+                if (previousPoint != item.dataIndex) {
+                    previousPoint = item.dataIndex;
+                    $("#tooltip").remove();
+                    var x = item.datapoint[0].toFixed(2),
+                        y = item.datapoint[1].toFixed(2);
+                    showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
+                }
+            } else {
+                $("#tooltip").remove();
+                previousPoint = null;
+            }
+        });
+    };
+    // function to initiate Chart 2
+    var runChart2 = function () {
+        var data_pie = [],
+            series = Math.floor(Math.random() * 6) + 3;
+        for (var i = 0; i < series; i++) {
+            data_pie[i] = {
+                label: "Series" + (i + 1),
+                data: Math.floor(Math.random() * 100) + 1
+            };
+        }
+        $.plot('#placeholder-h2', data_pie, {
+            series: {
+                pie: {
+                    show: true,
+                    radius: 1,
+                    tilt: 0.5,
+                    label: {
+                        show: true,
+                        radius: 1,
+                        formatter: labelFormatter,
+                        background: {
+                            opacity: 0.8
+                        }
+                    },
+                    combine: {
+                        color: '#999',
+                        threshold: 0.1
+                    }
+                }
+            },
+            legend: {
+                show: false
+            }
+        });
+
+        function labelFormatter(label, series) {
+            return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
+        }
+    };
+    // function to initiate Chart 3
+    var runChart3 = function () {
+        var data = [],
+            totalPoints = 300;
+
+        function getRandomData() {
+            if (data.length > 0)
+                data = data.slice(1);
+            // Do a random walk
+            while (data.length < totalPoints) {
+                var prev = data.length > 0 ? data[data.length - 1] : 50,
+                    y = prev + Math.random() * 10 - 5;
+                if (y < 0) {
+                    y = 0;
+                } else if (y > 100) {
+                    y = 100;
+                }
+                data.push(y);
+            }
+            // Zip the generated y values with the x values
+            var res = [];
+            for (var i = 0; i < data.length; ++i) {
+                res.push([i, data[i]]);
+            }
+            return res;
+        }
+        // Set up the control widget
+        var updateInterval = 30;
+        $("#updateInterval").val(updateInterval).change(function () {
+            var v = $(this).val();
+            if (v && !isNaN(+v)) {
+                updateInterval = +v;
+                if (updateInterval < 1) {
+                    updateInterval = 1;
+                } else if (updateInterval > 2000) {
+                    updateInterval = 2000;
+                }
+                $(this).val("" + updateInterval);
+            }
+        });
+        var plot = $.plot("#placeholder-h3", [getRandomData()], {
+            grid: {
+                borderWidth: 1,
+                borderColor: '#eeeeee'
+            },
+            series: {
+                shadowSize: 0 // Drawing is faster without shadows
+            },
+            yaxis: {
+                min: 0,
+                max: 100
+            },
+            xaxis: {
+                show: false
+            }
+        });
+
+        function update() {
+            plot.setData([getRandomData()]);
+            // Since the axes don't change, we don't need to call plot.setupGrid()
+            plot.draw();
+            setTimeout(update, updateInterval);
+        }
+        update();
+    };
+    // function to initiate Sparkline
+    var runSparkline = function () {
+        $(".sparkline_line_good span").sparkline("html", {
+            type: "line",
+            fillColor: "#B1FFA9",
+            lineColor: "#459D1C",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_line_bad span").sparkline("html", {
+            type: "line",
+            fillColor: "#FFC4C7",
+            lineColor: "#BA1E20",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_line_neutral span").sparkline("html", {
+            type: "line",
+            fillColor: "#CCCCCC",
+            lineColor: "#757575",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_bar_good span").sparkline('html', {
+            type: "bar",
+            barColor: "#459D1C",
+            barWidth: "5",
+            height: "24"
+        });
+        $(".sparkline_bar_bad span").sparkline('html', {
+            type: "bar",
+            barColor: "#BA1E20",
+            barWidth: "5",
+            height: "24"
+        });
+        $(".sparkline_bar_neutral span").sparkline('html', {
+            type: "bar",
+            barColor: "#757575",
+            barWidth: "5",
+            height: "24"
+        });
+    };
+    // function to initiate EasyPieChart
+    var runEasyPieChart = function () {
+        if (isIE8 || isIE9) {
+            if (!Function.prototype.bind) {
+                Function.prototype.bind = function (oThis) {
+                    if (typeof this !== "function") {
+                        // closest thing possible to the ECMAScript 5 internal IsCallable function
+                        throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+                    }
+                    var aArgs = Array.prototype.slice.call(arguments, 1),
+                        fToBind = this,
+                        fNOP = function () {}, fBound = function () {
+                            return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
+                        };
+                    fNOP.prototype = this.prototype;
+                    fBound.prototype = new fNOP();
+                    return fBound;
+                };
+            }
+        }
+        $('.easy-pie-chart .bounce').easyPieChart({
+            animate: 1000,
+            size: 70
+        });
+        $('.easy-pie-chart .cpu').easyPieChart({
+            animate: 1000,
+            lineWidth: 3,
+            barColor: '#35aa47',
+            size: 70
+            
+        });
+    };*/
+    // function to initiate Full Calendar
+    var runFullCalendar = function () {
+        //calendar
+        /* initialize the calendar
+		 -----------------------------------------------------------------*/
+        var $modal = $('#event-management');
+        $('#event-categories div.event-category').each(function () {
+            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
+            // it doesn't need to have a start or end
+            var eventObject = {
+                title: $.trim($(this).text()) // use the element's text as the event title
+            };
+            // store the Event Object in the DOM element so we can get to it later
+            $(this).data('eventObject', eventObject);
+            // make the event draggable using jQuery UI
+            $(this).draggable({
+                zIndex: 999,
+                revert: true, // will cause the event to go back to its
+                revertDuration: 50 //  original position after the drag
+            });
+        });
+        /* initialize the calendar
+		 -----------------------------------------------------------------*/
+        var date = new Date();
+        var d = date.getDate();
+        var m = date.getMonth();
+        var y = date.getFullYear();
+        var form = '';
+        var calendar = $('#calendar').fullCalendar({
+            buttonText: {
+                prev: '<i class="icon-chevron-left"></i>',
+                next: '<i class="icon-chevron-right"></i>'
+            },
+            header: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'month,agendaWeek,agendaDay'
+            },
+            events: [{
+                title: 'Meeting with Boss',
+                start: new Date(y, m, 1),
+                className: 'label-default'
+            }, {
+                title: 'Bootstrap Seminar',
+                start: new Date(y, m, d - 5),
+                end: new Date(y, m, d - 2),
+                className: 'label-teal'
+            }, {
+                title: 'Lunch with Nicole',
+                start: new Date(y, m, d - 3, 12, 0),
+                className: 'label-green',
+                allDay: false
+            }],
+            editable: true,
+            droppable: true, // this allows things to be dropped onto the calendar !!!
+            drop: function (date, allDay) { // this function is called when something is dropped
+                // retrieve the dropped element's stored Event Object
+                var originalEventObject = $(this).data('eventObject');
+                var $categoryClass = $(this).attr('data-class');
+                // we need to copy it, so that multiple events don't have a reference to the same object
+                var copiedEventObject = $.extend({}, originalEventObject);
+                // assign it the date that was reported
+                copiedEventObject.start = date;
+                copiedEventObject.allDay = allDay;
+                if ($categoryClass)
+                    copiedEventObject['className'] = [$categoryClass];
+                // render the event on the calendar
+                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
+                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
+                // is the "remove after drop" checkbox checked?
+                if ($('#drop-remove').is(':checked')) {
+                    // if so, remove the element from the "Draggable Events" list
+                    $(this).remove();
+                }
+            },
+            selectable: true,
+            selectHelper: true,
+            select: function (start, end, allDay) {
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                form = $("<form></form>");
+                form.append("<div class='row'></div>");
+                form.find(".row").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>New Event Name</label><input class='form-control' placeholder='Insert Event Name' type=text name='title'/></div></div>").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>").find("select[name='category']").append("<option value='label-default'>Work</option>").append("<option value='label-green'>Home</option>").append("<option value='label-purple'>Holidays</option>").append("<option value='label-orange'>Party</option>").append("<option value='label-yellow'>Birthday</option>").append("<option value='label-teal'>Generic</option>").append("<option value='label-beige'>To Do</option>");
+                $modal.find('.remove-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
+                    form.submit();
+                });
+                $modal.find('form').on('submit', function () {
+                    title = form.find("input[name='title']").val();
+                    $categoryClass = form.find("select[name='category'] option:checked").val();
+                    if (title !== null) {
+                        calendar.fullCalendar('renderEvent', {
+                                title: title,
+                                start: start,
+                                end: end,
+                                allDay: allDay,
+                                className: $categoryClass
+                            }, true // make the event "stick"
+                        );
+                    }
+                    $modal.modal('hide');
+                    return false;
+                });
+                calendar.fullCalendar('unselect');
+            },
+            eventClick: function (calEvent, jsEvent, view) {
+                var form = $("<form></form>");
+                form.append("<label>Change event name</label>");
+                form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success'><i class='icon-ok'></i> Save</button></span></div>");
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                $modal.find('.remove-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.remove-event').unbind('click').click(function () {
+                    calendar.fullCalendar('removeEvents', function (ev) {
+                        return (ev._id == calEvent._id);
+                    });
+                    $modal.modal('hide');
+                });
+                $modal.find('form').on('submit', function () {
+                    calEvent.title = form.find("input[type=text]").val();
+                    calendar.fullCalendar('updateEvent', calEvent);
+                    $modal.modal('hide');
+                    return false;
+                });
+            }
+        });
+    };
+    return {
+        init: function () {
+            /*runChart1();
+            runChart2();
+            runChart3();
+            runSparkline();
+            runEasyPieChart();*/
+            runFullCalendar();
+        }
+    };
+}();

assets/js/admin/login.js

@@ -0,0 +1,206 @@
+var Login = function () {
+    var runLoginButtons = function () {
+        $('.forgot').bind('click', function () {
+            $('.box-login').hide();
+            $('.box-forgot').show();
+        });
+        $('.register').bind('click', function () {
+            $('.box-login').hide();
+            //$('.box-register').show();
+        });
+        $('.go-back').click(function () {
+            $('.box-login').show();
+            $('.box-forgot').hide();
+            //$('.box-register').hide();
+        });
+    };
+    var runSetDefaultValidation = function () {
+        $.validator.setDefaults({
+            errorElement: "span", // contain the error msg in a small tag
+            errorClass: 'help-block',
+            errorPlacement: function (error, element) { // render error placement for each input type
+                if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
+                    error.insertAfter($(element).closest('.form-group').children('div').children().last());
+                } else if (element.attr("name") == "card_expiry_mm" || element.attr("name") == "card_expiry_yyyy") {
+                    error.appendTo($(element).closest('.form-group').children('div'));
+                } else {
+                    error.insertAfter(element);
+                    // for other inputs, just perform default behavior
+                }
+            },
+            ignore: ':hidden',
+            highlight: function (element) {
+                $(element).closest('.help-block').removeClass('valid');
+                // display OK icon
+                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
+                // add the Bootstrap error class to the control group
+            },
+            unhighlight: function (element) { // revert the change done by hightlight
+                $(element).closest('.form-group').removeClass('has-error');
+                // set error class to the control group
+            },
+            success: function (label, element) {
+                label.addClass('help-block valid');
+                // mark the current input as valid and display OK icon
+                $(element).closest('.form-group').removeClass('has-error');
+            },
+            highlight: function (element) {
+                $(element).closest('.help-block').removeClass('valid');
+                // display OK icon
+                $(element).closest('.form-group').addClass('has-error');
+                // add the Bootstrap error class to the control group
+            },
+            unhighlight: function (element) { // revert the change done by hightlight
+                $(element).closest('.form-group').removeClass('has-error');
+                // set error class to the control group
+            }
+        });
+    };
+    var runLoginValidator = function () {
+        var form = $('.form-login');
+        var errorHandler = $('.errorHandler', form);
+        form.validate({
+            rules: {
+                username: {
+                    minlength: 2,
+                    required: true
+                },
+                password: {
+                    minlength: 4,
+                    required: true
+                }
+            },
+            messages:{
+                username :{
+                    minlength:"Karakter minimal {0} Karakter",
+                    required:"Silakan masukkan username anda"
+                },
+                password:{
+                    minlength:"Karakter minimal {0} Karakter",
+                    required:"Silakan masukkan password anda"
+                }
+            },
+            submitHandler: function (form) {
+                errorHandler.hide();
+                //form.submit();
+                $.ajax({
+                    url:'act.auth.php',
+                    data:$('.form-login').serialize(),
+                    type:'post',
+                    dataType:'json',
+                    beforeSend:function(){
+                        $("#textLogin").html("Silakan Tunggu..");
+                    },
+                    success:function(json){
+                        if (json.result){
+                            location.href='./'
+                        }else{
+                           //alert(json.msg);
+                           $("#textLogin").html("Login");
+                           errorHandler.html(json.msg);
+                           errorHandler.show();
+                        }
+                    }
+                });
+                return false;
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                errorHandler.show();
+            }
+        });
+    };
+    var runForgotValidator = function () {
+        var form2 = $('.form-forgot');
+        var errorHandler2 = $('.errorHandler', form2);
+        form2.validate({
+            rules: {
+                email: {
+                    required: true
+                }
+            },
+            messages:{
+                email: "Silakan masukkan alamat email anda"
+            },
+            submitHandler: function (form) {
+                errorHandler2.hide();
+                $.ajax({
+                    url:'act.auth.php',
+                    data:$('.form-forgot').serialize(),
+                    type:'post',
+                    dataType:'json',
+                    /*beforeSend:function(){
+                        $("#statusLogin").html("Silakan Tunggu..");
+                    },*/
+                    success:function(json){
+                        if (json.result){
+                            alert(json.msg);
+                            //location.href='./'
+                        }else{
+                           errorHandler2.html(json.msg);
+                           errorHandler2.show();
+                        }
+                    }
+                });
+                return false;
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                errorHandler2.show();
+            }
+        });
+    };
+    /*var runRegisterValidator = function () {
+        var form3 = $('.form-register');
+        var errorHandler3 = $('.errorHandler', form3);
+        form3.validate({
+            rules: {
+                full_name: {
+                    minlength: 2,
+                    required: true
+                },
+                address: {
+                    minlength: 2,
+                    required: true
+                },
+                city: {
+                    minlength: 2,
+                    required: true
+                },
+                gender: {
+                    required: true
+                },
+                email: {
+                    required: true
+                },
+                password: {
+                    minlength: 6,
+                    required: true
+                },
+                password_again: {
+                    required: true,
+                    minlength: 5,
+                    equalTo: "#password"
+                },
+                agree: {
+                    minlength: 1,
+                    required: true
+                }
+            },
+            submitHandler: function (form) {
+                errorHandler3.hide();
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                errorHandler3.show();
+            }
+        });
+    };*/
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runLoginButtons();
+            runSetDefaultValidation();
+            runLoginValidator();
+            runForgotValidator();
+            // runRegisterValidator();
+        }
+    };
+}();

assets/js/charts.js

@@ -0,0 +1,705 @@
+var Charts = function () {
+    //function to initiate jQRangeSlider
+    //There are plenty of options you can set to control the precise looks of your plot. 
+    //You can control the ticks on the axes, the legend, the graph type, etc.
+    //For more information, please visit http://www.flotcharts.org/
+    var runCharts = function () {
+        // Basic Chart 
+        var d1 = [];
+        for (var i = 0; i < Math.PI * 2; i += 0.25) {
+            d1.push([i, Math.sin(i)]);
+        }
+        var d2 = [];
+        for (var i = 0; i < Math.PI * 2; i += 0.25) {
+            d2.push([i, Math.cos(i)]);
+        }
+        var d3 = [];
+        for (var i = 0; i < Math.PI * 2; i += 0.1) {
+            d3.push([i, Math.tan(i)]);
+        }
+        $.plot("#placeholder", [{
+            label: "sin(x)",
+            data: d1
+        }, {
+            label: "cos(x)",
+            data: d2
+        }, {
+            label: "tan(x)",
+            data: d3
+        }], {
+            series: {
+                lines: {
+                    show: true
+                },
+                points: {
+                    show: true
+                }
+            },
+            xaxis: {
+                ticks: [0, [Math.PI / 2, "\u03c0/2"],
+                    [Math.PI, "\u03c0"],
+                    [Math.PI * 3 / 2, "3\u03c0/2"],
+                    [Math.PI * 2, "2\u03c0"]
+                ]
+            },
+            yaxis: {
+                ticks: 10,
+                min: -2,
+                max: 2,
+                tickDecimals: 3
+            },
+            grid: {
+                backgroundColor: {
+                    colors: ["#fff", "#eee"]
+                },
+                borderWidth: {
+                    top: 1,
+                    right: 1,
+                    bottom: 2,
+                    left: 2
+                }
+            }
+        });
+        // Toggling Series 
+        var datasets = {
+            "usa": {
+                label: "USA",
+                data: [
+                    [1988, 483994],
+                    [1989, 479060],
+                    [1990, 457648],
+                    [1991, 401949],
+                    [1992, 424705],
+                    [1993, 402375],
+                    [1994, 377867],
+                    [1995, 357382],
+                    [1996, 337946],
+                    [1997, 336185],
+                    [1998, 328611],
+                    [1999, 329421],
+                    [2000, 342172],
+                    [2001, 344932],
+                    [2002, 387303],
+                    [2003, 440813],
+                    [2004, 480451],
+                    [2005, 504638],
+                    [2006, 528692]
+                ]
+            },
+            "russia": {
+                label: "Russia",
+                data: [
+                    [1988, 218000],
+                    [1989, 203000],
+                    [1990, 171000],
+                    [1992, 42500],
+                    [1993, 37600],
+                    [1994, 36600],
+                    [1995, 21700],
+                    [1996, 19200],
+                    [1997, 21300],
+                    [1998, 13600],
+                    [1999, 14000],
+                    [2000, 19100],
+                    [2001, 21300],
+                    [2002, 23600],
+                    [2003, 25100],
+                    [2004, 26100],
+                    [2005, 31100],
+                    [2006, 34700]
+                ]
+            },
+            "uk": {
+                label: "UK",
+                data: [
+                    [1988, 62982],
+                    [1989, 62027],
+                    [1990, 60696],
+                    [1991, 62348],
+                    [1992, 58560],
+                    [1993, 56393],
+                    [1994, 54579],
+                    [1995, 50818],
+                    [1996, 50554],
+                    [1997, 48276],
+                    [1998, 47691],
+                    [1999, 47529],
+                    [2000, 47778],
+                    [2001, 48760],
+                    [2002, 50949],
+                    [2003, 57452],
+                    [2004, 60234],
+                    [2005, 60076],
+                    [2006, 59213]
+                ]
+            },
+            "germany": {
+                label: "Germany",
+                data: [
+                    [1988, 55627],
+                    [1989, 55475],
+                    [1990, 58464],
+                    [1991, 55134],
+                    [1992, 52436],
+                    [1993, 47139],
+                    [1994, 43962],
+                    [1995, 43238],
+                    [1996, 42395],
+                    [1997, 40854],
+                    [1998, 40993],
+                    [1999, 41822],
+                    [2000, 41147],
+                    [2001, 40474],
+                    [2002, 40604],
+                    [2003, 40044],
+                    [2004, 38816],
+                    [2005, 38060],
+                    [2006, 36984]
+                ]
+            },
+            "denmark": {
+                label: "Denmark",
+                data: [
+                    [1988, 3813],
+                    [1989, 3719],
+                    [1990, 3722],
+                    [1991, 3789],
+                    [1992, 3720],
+                    [1993, 3730],
+                    [1994, 3636],
+                    [1995, 3598],
+                    [1996, 3610],
+                    [1997, 3655],
+                    [1998, 3695],
+                    [1999, 3673],
+                    [2000, 3553],
+                    [2001, 3774],
+                    [2002, 3728],
+                    [2003, 3618],
+                    [2004, 3638],
+                    [2005, 3467],
+                    [2006, 3770]
+                ]
+            },
+            "sweden": {
+                label: "Sweden",
+                data: [
+                    [1988, 6402],
+                    [1989, 6474],
+                    [1990, 6605],
+                    [1991, 6209],
+                    [1992, 6035],
+                    [1993, 6020],
+                    [1994, 6000],
+                    [1995, 6018],
+                    [1996, 3958],
+                    [1997, 5780],
+                    [1998, 5954],
+                    [1999, 6178],
+                    [2000, 6411],
+                    [2001, 5993],
+                    [2002, 5833],
+                    [2003, 5791],
+                    [2004, 5450],
+                    [2005, 5521],
+                    [2006, 5271]
+                ]
+            },
+            "norway": {
+                label: "Norway",
+                data: [
+                    [1988, 4382],
+                    [1989, 4498],
+                    [1990, 4535],
+                    [1991, 4398],
+                    [1992, 4766],
+                    [1993, 4441],
+                    [1994, 4670],
+                    [1995, 4217],
+                    [1996, 4275],
+                    [1997, 4203],
+                    [1998, 4482],
+                    [1999, 4506],
+                    [2000, 4358],
+                    [2001, 4385],
+                    [2002, 5269],
+                    [2003, 5066],
+                    [2004, 5194],
+                    [2005, 4887],
+                    [2006, 4891]
+                ]
+            }
+        };
+        // hard-code color indices to prevent them from shifting as
+        // countries are turned on/off
+        var i = 0;
+        $.each(datasets, function (key, val) {
+            val.color = i;
+            ++i;
+        });
+        // insert checkboxes
+        var choiceContainer = $("#choices");
+        $.each(datasets, function (key, val) {
+            choiceContainer.append("<label for='id" + key + "' class='checkbox'><input type='checkbox' name='" + key + "' checked='checked' id='id" + key + "'>" + val.label + "</label>");
+        });
+        choiceContainer.find("input").iCheck({
+            checkboxClass: 'icheckbox_minimal-grey',
+            radioClass: 'iradio_minimal-grey',
+            increaseArea: '10%' // optional
+        }).on('ifClicked', function (event) {
+            $(this).iCheck('toggle');
+            plotAccordingToChoices();
+        });
+
+        function plotAccordingToChoices() {
+            var data = [];
+            choiceContainer.find("input:checked").each(function () {
+                var key = $(this).attr("name");
+                if (key && datasets[key]) {
+                    data.push(datasets[key]);
+                }
+            });
+            if (data.length > 0) {
+                $.plot("#placeholder2", data, {
+                    yaxis: {
+                        min: 0
+                    },
+                    xaxis: {
+                        tickDecimals: 0
+                    }
+                });
+            }
+        }
+        plotAccordingToChoices();
+        // Interactivity 
+        function randValue() {
+            return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
+        }
+        var pageviews = [
+            [1, randValue()],
+            [2, randValue()],
+            [3, 2 + randValue()],
+            [4, 3 + randValue()],
+            [5, 5 + randValue()],
+            [6, 10 + randValue()],
+            [7, 15 + randValue()],
+            [8, 20 + randValue()],
+            [9, 25 + randValue()],
+            [10, 30 + randValue()],
+            [11, 35 + randValue()],
+            [12, 25 + randValue()],
+            [13, 15 + randValue()],
+            [14, 20 + randValue()],
+            [15, 45 + randValue()],
+            [16, 50 + randValue()],
+            [17, 65 + randValue()],
+            [18, 70 + randValue()],
+            [19, 85 + randValue()],
+            [20, 80 + randValue()],
+            [21, 75 + randValue()],
+            [22, 80 + randValue()],
+            [23, 75 + randValue()],
+            [24, 70 + randValue()],
+            [25, 65 + randValue()],
+            [26, 75 + randValue()],
+            [27, 80 + randValue()],
+            [28, 85 + randValue()],
+            [29, 90 + randValue()],
+            [30, 95 + randValue()]
+        ];
+        var visitors = [
+            [1, randValue() - 5],
+            [2, randValue() - 5],
+            [3, randValue() - 5],
+            [4, 6 + randValue()],
+            [5, 5 + randValue()],
+            [6, 20 + randValue()],
+            [7, 25 + randValue()],
+            [8, 36 + randValue()],
+            [9, 26 + randValue()],
+            [10, 38 + randValue()],
+            [11, 39 + randValue()],
+            [12, 50 + randValue()],
+            [13, 51 + randValue()],
+            [14, 12 + randValue()],
+            [15, 13 + randValue()],
+            [16, 14 + randValue()],
+            [17, 15 + randValue()],
+            [18, 15 + randValue()],
+            [19, 16 + randValue()],
+            [20, 17 + randValue()],
+            [21, 18 + randValue()],
+            [22, 19 + randValue()],
+            [23, 20 + randValue()],
+            [24, 21 + randValue()],
+            [25, 14 + randValue()],
+            [26, 24 + randValue()],
+            [27, 25 + randValue()],
+            [28, 26 + randValue()],
+            [29, 27 + randValue()],
+            [30, 31 + randValue()]
+        ];
+        var plot = $.plot($("#placeholder3"), [{
+            data: pageviews,
+            label: "Unique Visits"
+        }, {
+            data: visitors,
+            label: "Page Views"
+        }], {
+            series: {
+                lines: {
+                    show: true,
+                    lineWidth: 2,
+                    fill: true,
+                    fillColor: {
+                        colors: [{
+                            opacity: 0.05
+                        }, {
+                            opacity: 0.01
+                        }]
+                    }
+                },
+                points: {
+                    show: true
+                },
+                shadowSize: 2
+            },
+            grid: {
+                hoverable: true,
+                clickable: true,
+                tickColor: "#eee",
+                borderWidth: 0
+            },
+            colors: ["#d12610", "#37b7f3", "#52e136"],
+            xaxis: {
+                ticks: 11,
+                tickDecimals: 0
+            },
+            yaxis: {
+                ticks: 11,
+                tickDecimals: 0
+            }
+        });
+
+        function showTooltip(x, y, contents) {
+            $('<div id="tooltip">' + contents + '</div>').css({
+                position: 'absolute',
+                display: 'none',
+                top: y + 5,
+                left: x + 15,
+                border: '1px solid #333',
+                padding: '4px',
+                color: '#fff',
+                'border-radius': '3px',
+                'background-color': '#333',
+                opacity: 0.80
+            }).appendTo("body").fadeIn(200);
+        }
+        var previousPoint = null;
+        $("#placeholder3").bind("plothover", function (event, pos, item) {
+            $("#x").text(pos.x.toFixed(2));
+            $("#y").text(pos.y.toFixed(2));
+            if (item) {
+                if (previousPoint != item.dataIndex) {
+                    previousPoint = item.dataIndex;
+                    $("#tooltip").remove();
+                    var x = item.datapoint[0].toFixed(2),
+                        y = item.datapoint[1].toFixed(2);
+                    showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
+                }
+            } else {
+                $("#tooltip").remove();
+                previousPoint = null;
+            }
+        });
+        //Real Time 
+        // We use an inline data source in the example, usually data would
+        // be fetched from a server
+        var data = [],
+            totalPoints = 300;
+
+        function getRandomData() {
+            if (data.length > 0)
+                data = data.slice(1);
+            // Do a random walk
+            while (data.length < totalPoints) {
+                var prev = data.length > 0 ? data[data.length - 1] : 50,
+                    y = prev + Math.random() * 10 - 5;
+                if (y < 0) {
+                    y = 0;
+                } else if (y > 100) {
+                    y = 100;
+                }
+                data.push(y);
+            }
+            // Zip the generated y values with the x values
+            var res = [];
+            for (var i = 0; i < data.length; ++i) {
+                res.push([i, data[i]]);
+            }
+            return res;
+        }
+        // Set up the control widget
+        var updateInterval = 30;
+        $("#updateInterval").val(updateInterval).change(function () {
+            var v = $(this).val();
+            if (v && !isNaN(+v)) {
+                updateInterval = +v;
+                if (updateInterval < 1) {
+                    updateInterval = 1;
+                } else if (updateInterval > 2000) {
+                    updateInterval = 2000;
+                }
+                $(this).val("" + updateInterval);
+            }
+        });
+        var plot = $.plot("#placeholder4", [getRandomData()], {
+            series: {
+                shadowSize: 0 // Drawing is faster without shadows
+            },
+            yaxis: {
+                min: 0,
+                max: 100
+            },
+            xaxis: {
+                show: false
+            }
+        });
+
+        function update() {
+            plot.setData([getRandomData()]);
+            // Since the axes don't change, we don't need to call plot.setupGrid()
+            plot.draw();
+            setTimeout(update, updateInterval);
+        }
+        update();
+        //Categories 
+        var data_category = [
+            ["January", 10],
+            ["February", 8],
+            ["March", 4],
+            ["April", 13],
+            ["May", 17],
+            ["June", 9]
+        ];
+        $.plot("#placeholder5", [data_category], {
+            series: {
+                bars: {
+                    show: true,
+                    barWidth: 0.6,
+                    align: "center",
+                    fillColor: "#4DBEF4",
+                    lineWidth: 0,
+                }
+            },
+            xaxis: {
+                mode: "categories",
+                tickLength: 0
+            }
+        });
+        // Annotations
+        var d_1 = [];
+        for (var i = 0; i < 20; ++i) {
+            d_1.push([i, Math.sin(i)]);
+        }
+        var data_annotation = [{
+            data: d_1,
+            label: "Pressure",
+            color: "#333"
+        }];
+        var markings = [{
+            color: "#f6f6f6",
+            yaxis: {
+                from: 1
+            }
+        }, {
+            color: "#f6f6f6",
+            yaxis: {
+                to: -1
+            }
+        }, {
+            color: "#000",
+            lineWidth: 1,
+            xaxis: {
+                from: 2,
+                to: 2
+            }
+        }, {
+            color: "#000",
+            lineWidth: 1,
+            xaxis: {
+                from: 8,
+                to: 8
+            }
+        }];
+        var placeholder = $("#placeholder6");
+        var plot_annotation = $.plot(placeholder, data_annotation, {
+            bars: {
+                show: true,
+                barWidth: 0.5,
+                fill: 0.9
+            },
+            xaxis: {
+                ticks: [],
+                autoscaleMargin: 0.02
+            },
+            yaxis: {
+                min: -2,
+                max: 2
+            },
+            grid: {
+                markings: markings
+            }
+        });
+        var o = plot_annotation.pointOffset({
+            x: 2,
+            y: -1.2
+        });
+        // Append it to the placeholder that Flot already uses for positioning
+        placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Warming up</div>");
+        o = plot_annotation.pointOffset({
+            x: 8,
+            y: -1.2
+        });
+        placeholder.append("<div style='position:absolute;left:" + (o.left + 4) + "px;top:" + o.top + "px;color:#666;font-size:smaller'>Actual measurements</div>");
+        // Draw a little arrow on top of the last label to demonstrate canvas
+        // drawing
+        var ctx = plot_annotation.getCanvas().getContext("2d");
+        ctx.beginPath();
+        o.left += 4;
+        ctx.moveTo(o.left, o.top);
+        ctx.lineTo(o.left, o.top - 10);
+        ctx.lineTo(o.left + 10, o.top - 5);
+        ctx.lineTo(o.left, o.top);
+        ctx.fillStyle = "#000";
+        ctx.fill();
+        // Default Pie 
+        var data_pie = [],
+            series = Math.floor(Math.random() * 6) + 3;
+        for (var i = 0; i < series; i++) {
+            data_pie[i] = {
+                label: "Series" + (i + 1),
+                data: Math.floor(Math.random() * 100) + 1
+            };
+        }
+        $.plot('#placeholder7', data_pie, {
+            series: {
+                pie: {
+                    show: true
+                }
+            }
+        });
+        // Label Formatter 
+        $.plot('#placeholder8', data_pie, {
+            series: {
+                pie: {
+                    show: true,
+                    radius: 1,
+                    label: {
+                        show: true,
+                        radius: 1,
+                        formatter: labelFormatter,
+                        background: {
+                            opacity: 0.8
+                        }
+                    }
+                }
+            },
+            legend: {
+                show: false
+            }
+        });
+        // Label Style 
+        $.plot('#placeholder9', data_pie, {
+            series: {
+                pie: {
+                    show: true,
+                    radius: 1,
+                    label: {
+                        show: true,
+                        radius: 3 / 4,
+                        formatter: labelFormatter,
+                        background: {
+                            opacity: 0.5,
+                            color: '#000'
+                        }
+                    }
+                }
+            },
+            legend: {
+                show: false
+            }
+        });
+        // Rectangular Pie
+        $.plot('#placeholder10', data_pie, {
+            series: {
+                pie: {
+                    show: true,
+                    radius: 500,
+                    label: {
+                        show: true,
+                        formatter: labelFormatter,
+                        threshold: 0.1
+                    }
+                }
+            },
+            legend: {
+                show: false
+            }
+        });
+        // Tilted Pie 
+        $.plot('#placeholder11', data_pie, {
+            series: {
+                pie: {
+                    show: true,
+                    radius: 1,
+                    tilt: 0.5,
+                    label: {
+                        show: true,
+                        radius: 1,
+                        formatter: labelFormatter,
+                        background: {
+                            opacity: 0.8
+                        }
+                    },
+                    combine: {
+                        color: '#999',
+                        threshold: 0.1
+                    }
+                }
+            },
+            legend: {
+                show: false
+            }
+        });
+        // Interactivity Pie
+        $.plot('#placeholder12', data_pie, {
+            series: {
+                pie: {
+                    show: true
+                }
+            },
+            grid: {
+                hoverable: true,
+                clickable: true
+            }
+        });
+        $("#placeholder12").bind("plotclick", function (event, pos, obj) {
+            if (!obj) {
+                return;
+            }
+            percent = parseFloat(obj.series.percent).toFixed(2);
+            alert("" + obj.series.label + ": " + percent + "%");
+        });
+
+        function labelFormatter(label, series) {
+            return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
+        }
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runCharts();
+        }
+    };
+}();

assets/js/dosen/_dashboard.php

@@ -0,0 +1,68 @@
+<link rel="stylesheet" href="../assets/plugins/fullcalendar/fullcalendar/fullcalendar.css" />
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+
+<script src="../assets/plugins/fullcalendar/fullcalendar/fullcalendar.js"></script> 
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+		/*Index.init();*/
+		var date = new Date();
+        var d = date.getDate();
+        var m = date.getMonth();
+        var y = date.getFullYear();
+        $('#calendar').fullCalendar({
+            editable: true,
+            header: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'month'
+            },
+            events: "page/dashboard/json.kalender.php",
+           // Convert the allDay from string to boolean
+            eventRender: function(event, element, view) {
+                if (event.allDay === 'true') {
+                    event.allDay = true;
+                } else {
+                    event.allDay = false;
+                }
+            },
+            selectable: true,
+            selectHelper: true,
+            eventClick: function (calEvent, jsEvent, view) {
+                //alert(calEvent.id);
+                $("#JadwalDetail").modal('show');
+                $.ajax({
+                    url:'page/dashboard/act.dashboard.php',
+                    dataType:'json',
+                    type:'post',
+                    cache:false,
+                    data:'act=detailjadwal&id='+calEvent.id,
+                    beforeSend:function(){
+                        $("#tbjadwal").hide();
+                    },
+                    success:function(json){
+                        if(json.result){
+                            $("#tbjadwal").show();
+                            $("#nama").html(json.nama+" ("+json.nim+")");
+                            $("#jenis").html(json.jenis);
+                            $("#judul").html(json.judul);
+                            $("#tgl").html(json.tgl+" "+json.wkt);
+                            $("#ruangan").html(json.ruangan);
+                            $("#pembimbing1").html(json.pemb1);
+                            $("#pembimbing2").html(json.pemb2);
+                            $("#penguji1").html(json.peng1);
+                            $("#penguji2").html(json.peng2);
+                            $("#JadwalDetail").modal('show');                           
+                        }else{
+                            alert(json.msg);
+                        }
+                    }
+                });
+                return false;
+            }          
+        });
+	});
+</script>

assets/js/dosen/_earlywarning.php

@@ -0,0 +1,201 @@
+
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />
+<link rel="stylesheet" href="../assets/plugins/ckeditor/contents.css">
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+
+<script>
+let listDataMonitoring = [];
+
+jQuery(document).ready(function() {
+    Main.init();
+    refreshListMonitoring();
+});
+
+function refreshListMonitoring(e){
+    if(e != undefined || e != null){
+        e.preventDefault();
+    }
+    const lewat = $('#statusEarlyWarning').val();
+    const bimbingan =$('#bimbinganEarlyWarning').val();
+    const sumber = $('#sumberTanggalEarlyWarning').val();
+    
+    listDataMonitoring = [];
+
+    document.getElementById('contentTabel').innerHTML = buatTabelEarlyWarning(`<tr><td colspan="16" style="text-align:center">Mengambil Data . . .</td></tr>`);
+
+    let url = `API/getEarlyWarningMonitoring.php?lewat=${lewat}&bimbingan=${bimbingan}`;
+
+    if(sumber == "0"){
+        url = `API/getEarlyWarningMonitoringByOutline.php?lewat=${lewat}&bimbingan=${bimbingan}`;
+    }
+
+    $.ajax({
+            url: url,
+            type:'GET',
+            dataType:'json',
+            contentType: false,
+            cache: false,
+            processData:false,
+            beforeSend:function(){
+           //     $("#loading").show();
+            },
+            success:function(json){
+                const data = json;
+                 if(data.length == 0){
+                    document.getElementById('contentTabel').innerHTML = buatTabelEarlyWarning(`<tr><td colspan="16" style="text-align:center">Tidak ada data.</td></tr>`);
+                }else{
+                
+                    let isiTabel = ``;
+                    let no = 1;
+                
+                    for(let i = 0; i < data.length; i++){
+                        const d = data[i];
+                        listDataMonitoring[d.id] = d;
+                        
+                        let textSeminar = ``;
+                        if(d.tanggalSeminar != undefined && d.tanggalSeminar !== null){
+                            textSeminar = `<br>Tanggal Seminar Outline : ${d.tanggalSeminar}`;
+                        }
+
+                        isiTabel += `<tr>
+                                        <td>${no}</td>
+                                        <td>${d.nama}<br>(${d.nim})</td>
+                                        <td><a style="cursor:pointer" onClick="showKonsultasi('${d.id}')">${d.judul}</a> <br>Diterima : ${d.tglKeputusan} ${textSeminar}</td>
+                                        ${getKolomTabel(d.bulanBerjalan)}
+                                        <td>${d.waktuBerjalan}</td>   
+                                    </tr>`;
+                        no++;
+                    }
+
+                    document.getElementById('contentTabel').innerHTML = buatTabelEarlyWarning(isiTabel);
+                    $('#tabelData').DataTable({
+                        "iDisplayLength": -1,
+                        "aLengthMenu": [
+                            [10, 15, 20, 50, 100, -1],
+                            [10, 15, 20, 50, 100, "All"] // change per page values here
+                        ],			
+                    });
+                }
+            }
+        });
+
+}
+
+function buatTabelEarlyWarning(isiTabel){
+    return `  <table class="table table-striped table-bordered table-hover table-full-width dataTable" id="tabelData">
+                <thead>
+                    <tr>
+                        <th rowspan="2">No</th>
+                        <th rowspan="2">Nama Mahasiswa</th>
+                        <th rowspan="2">Judul</th>
+                        <th colspan="12">Bulan</th>
+                        <th rowspan="2">Jumlah Hari</th>
+                    </tr>
+                    <tr>
+                        <th>1</th>
+                        <th>2</th>
+                        <th>3</th>
+                        <th>4</th>
+                        <th>5</th>
+                        <th>6</th>
+                        <th>7</th>
+                        <th>8</th>
+                        <th>9</th>
+                        <th>10</th>
+                        <th>11</th>
+                        <th>12</th>
+                    </tr>
+                </thead>
+                <tbody>${isiTabel}</tbody>
+            </table>`;
+}
+
+function showKonsultasi(idPraoutline){
+    $('#detailKonsultasiModal').modal('show');
+    
+    const dataMonitoring = listDataMonitoring[idPraoutline];
+
+    document.getElementById('detailKonsultasiContent').innerHTML = `<table class="table">
+                                                                            <tr><td>Nama</td><td>${dataMonitoring.nama}</td></tr>
+                                                                            <tr><td>NIM</td><td>${dataMonitoring.nim}</td></tr>
+                                                                            <tr><td>Judul</td><td>${dataMonitoring.judul}</td></tr>
+                                                                            <table>`;
+
+    document.getElementById('isiTabelKonsultasi').innerHTML = `<tr><td colspan="4" style="text-align:center">Mengambil data . . .</td></tr>`;
+    $.ajax({
+            url: `https://informatika.untan.ac.id/konsultasi/API/public/getKonsultasiHistory.php?id=${idPraoutline}`,
+            type:'GET',
+            dataType:'json',
+            contentType: false,
+            cache: false,
+            processData:false,
+            beforeSend:function(){
+           //     $("#loading").show();
+            },
+            success:function(json){
+                const data = json.data;
+                const status = json.status;
+
+                if(status == 1){
+                    if(data.length == 0){
+                        document.getElementById('isiTabelKonsultasi').innerHTML = `<tr><td colspan="4" style="text-align:center">Tidak ada data.</td></tr>`;
+                    }else{
+                    
+                        let isiTabel = ``;
+                        let no = 1;
+                        for(let i = 0; i < data.length; i++){
+                            const d = data[i];
+                        
+                            isiTabel += `<tr>
+                                            <td>${no}</td>
+                                            <td>${d.waktu}</td>
+                                            <td>${d.topik}</td>
+                                            <td>${d.pembimbing}</td>   
+                                        </tr>`;
+                            no++;
+                        }
+
+                        document.getElementById('isiTabelKonsultasi').innerHTML = isiTabel;
+                    }
+                }else{
+                    const pesan = json.msg;
+                    document.getElementById('isiTabelKonsultasi').innerHTML = `<tr><td colspan="4" style="text-align:center">${pesan}</td></tr>`;
+                }
+                
+            }
+        });
+
+}
+
+function getKolomTabel(bulanBerjalan){
+    switch(bulanBerjalan){
+        case 1 : return `<td style="background-color:#01B0F3"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`; 
+        case 2 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 3 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 4 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 5 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 6 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 7 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 8 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FEFF01"></td><td></td><td></td><td></td><td></td>`;
+        case 9 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FFBF01"></td><td></td><td></td><td></td>`;
+        case 10 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FFBF01"></td><td style="background-color:#FFBF01"></td><td></td><td>`;
+        case 11 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FFBF01"></td><td style="background-color:#FFBF01"></td><td style="background-color:#FE0103"></td><td>`;
+        case 12 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FFBF01"></td><td style="background-color:#FFBF01"></td><td style="background-color:#FE0103"></td><td style="background-color:#FE0103"></td>`;    
+        default : return `<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`;    
+    }
+}
+</script>

assets/js/dosen/_pengumuman.php

@@ -0,0 +1,56 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />
+<link rel="stylesheet" href="../assets/plugins/ckeditor/contents.css">
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+
+		$('#list-pengumuman').dataTable({
+			"iDisplayLength": 10,
+			"aLengthMenu": [
+                [10, 15, 20, 50, 100, -1],
+                [10, 15, 20, 50, 100, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"sAjaxSource": "page/pengumuman/list.pengumuman.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ada",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        }
+		});
+
+		$('#list-pengumuman_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#list-pengumuman_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#list-pengumuman_wrapper .dataTables_length select').select2();
+
+	});
+
+	function LihatPengumuman(id){
+		location.href="?page=pengumuman&menu=edit-pengumuman&pengumuman="+id;
+	}
+
+</script>

assets/js/dosen/_pralirs.php

@@ -0,0 +1,194 @@
+
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />
+<link rel="stylesheet" href="../assets/plugins/ckeditor/contents.css">
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+
+<script>
+
+jQuery(document).ready(function() {
+    Main.init();
+});
+
+function showDetailPralirsMahasiswa(nim, tahun, semester){
+    $('#detailPralirsModal').modal('show');
+    
+    const dataPralirs = listMahasiswaPraLIRS[nim];
+
+    document.getElementById('detailPralirsContent').innerHTML = `<table class="table">
+                                                                            <tr><td>Nama</td><td>${dataPralirs.nama}</td></tr>
+                                                                            <tr><td>NIM</td><td>${dataPralirs.nim}</td></tr>
+                                                                            <tr><td>Angkatan</td><td>${dataPralirs.angkatan}</td></tr>
+                                                                            <table>`;
+
+    document.getElementById('isiTabelPralirs').innerHTML = `<tr><td colspan="5" style="text-align:center">Mengambil data . . .</td></tr>`;
+    $.ajax({
+            url: `https://informatika.untan.ac.id/API/public/getPralirsMahasiswa.php?nim=${nim}&tahun=${tahun}&semester=${semester}`,
+            type:'GET',
+            dataType:'json',
+            contentType: false,
+            cache: false,
+            processData:false,
+            beforeSend:function(){
+           //     $("#loading").show();
+            },
+            success:function(json){
+                const data = json.data;
+                const status = json.status;
+                const judul = json.judul;
+
+                if(status == 1){
+                    if(data.length == 0){
+                        document.getElementById('isiTabelPralirs').innerHTML = `<tr><td colspan="5" style="text-align:center">Tidak ada data.</td></tr>`;
+                    }else{
+                    
+                        let isiTabel = ``;
+                        let no = 1;
+                        let totalSKS = 0;
+                        
+                        for(let i = 0; i < data.length; i++){
+                            const d = data[i];
+                        
+                            isiTabel += `<tr>
+                                            <td>${no}</td>
+                                            <td>${d.kode}</td>
+                                            <td>${d.nama}</td>
+                                            <td>${d.sks}</td>
+                                            <td>${d.smt}</td>   
+                                        </tr>`;
+                                        
+                            totalSKS += Number(d.sks);
+                            no++;
+                        }
+                        
+                        isiTabel += `<tr><td colspan="3">Total SKS</td><td>${totalSKS}</td><td></td></tr>`;
+
+                        document.getElementById('isiTabelPralirs').innerHTML = isiTabel;
+                    }
+                }else{
+                    const pesan = json.msg;
+                    document.getElementById('isiTabelPralirs').innerHTML = `<tr><td colspan="5" style="text-align:center">${pesan}</td></tr>`;
+                }
+                
+            }
+        });
+
+}
+
+function showDetailMahasiswa(nim){
+    $('#detailMahasiswaModal').modal('show');
+    
+    document.getElementById('detailMahasiswaContent').innerHTML = `<div style="text-align:center">Mengambil data . . .</div>`;
+    $.ajax({
+            url: `API/getDetailMahasiswa.php?nim=${nim}`,
+            type:'GET',
+            dataType:'json',
+            contentType: false,
+            cache: false,
+            processData:false,
+            beforeSend:function(){
+           //     $("#loading").show();
+            },
+            success:function(json){
+                const status = json.status;
+                const judul = json.judul;
+
+                if(status == 1){
+                    const dataMhs = json.data;
+                    const data = dataMhs[0];
+                
+                    
+                    isiTabel = `
+                    <table class="table table-striped table-bordered table-hover table-full-width">
+                        <tbody>
+                            <tr><td colspan="2" style="text-align:center"><img src="https://informatika.untan.ac.id/API/foto.php?spota&mhs=${nim}" style="width:80px"></td></tr>
+                            <tr><td>Nama</td><td>${data.nama_lengkap}</td></tr>
+                            <tr><td>NIM</td><td>${data.nim}</td></tr>
+                            <tr><td>Tempat/Tanggal Lahir</td><td>${data.tempat_lahir} / ${data.tanggal_lahir}</td></tr>
+                            <tr><td>Agama</td><td>${data.agama}</td></tr>
+                            <tr><td>Kewarganegaraan</td><td>${data.kewarganegaraan}</td></tr>
+                            <tr><td>Golongan Darah</td><td>${data.gol_darah}</td></tr>
+                            <tr><td>Anak ke - / Jumlah Saudara</td><td>${data.anak_ke} / ${data.jumlahsaudara}</td></tr>
+                            <tr><td>No. Telp / HP</td><td>${data.no_telp} <a href="https://web.whatsapp.com/send?phone=62${parseInt(data.no_hp_telp)}" target="_blank"><button class="btn btn-sm btn-success">WA</button></a> / ${data.no_hp} <a href="https://web.whatsapp.com/send?phone=62${parseInt(data.no_hp)}" target="_blank"><button class="btn btn-sm btn-success">WA</button></a></td></tr>
+                            <tr><td>Email</td><td>${data.email}</td></tr>
+                            <tr><td>Jenis Kelamin</td><td>${data.jenis_kelamin}</td></tr>
+                            <tr><td>Jalur Penerimaan</td><td>${data.jalur_penerimaan}</td></tr>
+                            <tr><td>No. Test</td><td>${data.no_test}</td></tr>
+                            <tr><td>Menerima Bidik Misi</td><td>${data.terima_bidik_misi}</td></tr>
+                            <tr><td>Alamat di Pontianak</td><td>${data.alamat_di_ptk}</td></tr>
+                            <tr><td>Asal Sekolah</td><td>${data.nama_sekolah}</td></tr>
+                            <tr><td>Jurusan di Sekolah</td><td>${data.jurusan_sekolah}</td></tr>
+                            <tr><td>Alamat Sekolah Asal</td><td>${data.alamat_sekolah}</td></tr>
+                            <tr><td>Kabupaten Sekolah Asal</td><td>${data.kab_sekolah}</td></tr>
+                            <tr><td>Provinsi Sekolah Asal</td><td>${data.prov_sekolah}</td></tr>
+                            <tr><td>Bidang Kejuruan</td><td>${data.bidang_kejuruan}</td></tr>
+                            <tr><td>Nilai UAN Bahasa Indonesia</td><td>${data.nilai_bi}</td></tr>
+                            <tr><td>Nilai UAN Bahasa Inggris</td><td>${data.nilai_bing}</td></tr>
+                            <tr><td>Nilai UAN Matematika</td><td>${data.nilai_mtk}</td></tr>
+                            <tr><td>Jumlah Mata Pelajaran UAN</td><td>${data.jumlah_mapel}</td></tr>
+                            <tr><td>Total Nilai UAN</td><td>${data.total_nilai}</td></tr>
+                            <tr><td>Nama Ayah</td><td>${data.nama_ayah}</td></tr>
+                            <tr><td>Pekerjaan Ayah</td><td>${data.pekerjaan_ayah}</td></tr>
+                            <tr><td>Penghasilan Ayah</td><td>${data.penghasilan_ayah}</td></tr>
+                            <tr><td>No. HP Ayah</td><td>${data.no_hp_ayah} <a href="https://web.whatsapp.com/send?phone=62${parseInt(data.no_hp_ayah)}" target="_blank"><button class="btn btn-sm btn-success">WA</button></a></td></tr>
+                            <tr><td>Nama Ibu</td><td>${data.nama_ibu}</td></tr>
+                            <tr><td>Pekerjaan Ibu</td><td>${data.pekerjaan_ibu}</td></tr>
+                            <tr><td>Penghasilan Ibu</td><td>${data.penghasilan_ibu}</td></tr>
+                            <tr><td>No. HP Ibu</td><td>${data.no_hp_ibu} <a href="https://web.whatsapp.com/send?phone=62${parseInt(data.no_hp_ibu)}" target="_blank"><button class="btn btn-sm btn-success">WA</button></a></td></tr>
+                            <tr><td>No. Telp Rumah Orang Tua</td><td>${data.no_telp_rumah_ortu}</td></tr>
+                            <tr><td>Alamat Rumah Orang Tua</td><td>${data.alamat_rumah_ortu}</td></tr>
+                            <tr><td>Kabupaten/Kota Rumah Orang Tua</td><td>${data.kab_rumah_ortu}</td></tr>
+                            <tr><td>Provinsi</td><td>${data.prov_rumah_ortu}</td></tr>
+                            <tr><td>Nama Wali</td><td>${data.nama_wali}</td></tr>
+                            <tr><td>Pekerjaan Wali</td><td>${data.pekerjaan_wali}</td></tr>
+                            <tr><td>Alamat Rumah dan No Telp Wali</td><td>${data.alamat_rumah_wali}</td></tr>
+                            <tr><td>RT/RW Rumah Wali</td><td>${data.rt_rumah_wali} / ${data.rw_rumah_wali}</td></tr>
+                            <tr><td>Kelurahan Wali</td><td>${data.kelurahan_rumah_wali}</td></tr>
+                            <tr><td>Kecamatan Wali</td><td>${data.kecamatan_rumah_wali}</td></tr>
+                            <tr><td>Kabupaten/Kota Wali</td><td>${data.kab_rumah_wali}</td></tr>
+                            <tr><td>Provinsi Wali</td><td>${data.prov_rumah_wali}</td></tr>
+                        </tbody>
+                    </table>`;
+                
+                    document.getElementById('detailMahasiswaContent').innerHTML = isiTabel;
+                }else{
+                    const pesan = json.msg;
+                    document.getElementById('detailMahasiswaContent').innerHTML = `<div style="text-align:center">${pesan}</div>`;
+                }
+                
+            }
+        });
+
+}
+
+function getKolomTabel(bulanBerjalan){
+    switch(bulanBerjalan){
+        case 1 : return `<td style="background-color:#01B0F3"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`; 
+        case 2 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 3 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 4 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 5 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 6 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 7 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td></td><td></td><td></td><td></td><td></td>`;
+        case 8 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FEFF01"></td><td></td><td></td><td></td><td></td>`;
+        case 9 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FFBF01"></td><td></td><td></td><td></td>`;
+        case 10 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FFBF01"></td><td style="background-color:#FFBF01"></td><td></td><td>`;
+        case 11 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FFBF01"></td><td style="background-color:#FFBF01"></td><td style="background-color:#FE0103"></td><td>`;
+        case 12 : return `<td style="background-color:#01B0F3"></td><td style="background-color:#01B0F3"><td style="background-color:#0071BF"></td><td style="background-color:#0071BF"></td><td style="background-color:#01AF50"></td><td style="background-color:#01AF50"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FEFF01"></td><td style="background-color:#FFBF01"></td><td style="background-color:#FFBF01"></td><td style="background-color:#FE0103"></td><td style="background-color:#FE0103"></td>`;    
+        default : return `<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>`;    
+    }
+}
+</script>

assets/js/dosen/_skripsi.php

@@ -0,0 +1,91 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />		
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script src="../assets/js/form-elements.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+		
+		$("#post_review").validate({ //
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			submitHandler:function(form){
+				for ( instance in CKEDITOR.instances )
+				    {
+				        CKEDITOR.instances[instance].updateElement();
+				    }
+
+				if(window.FormData !== undefined)  // for HTML5 browsers
+				{
+					var formData = new FormData(document.getElementById("post_review"));
+					$.ajax({
+						url:'page/skripsi/act.skripsi.php',
+						type:'POST',
+						data:formData,
+						dataType:'json',
+						mimeType:'multipart/form-data',
+						contentType: false,
+				    	cache: false,
+						processData:false,
+						beforeSend:function(){
+							$("#loading").show();
+						},
+						success:function(json){
+							if(json.result){
+								$("#loading").hide();
+								$.gritter.add({
+									title:'Sukses',
+					                time: 1000,
+					                text: json.msg,
+					                after_close: function(){
+										location.reload();
+									}
+					            });
+							}else{
+								$("#loading").hide();
+								$.gritter.add({
+									title:'Kesalahan',
+					                time: 4000,
+					                text: json.msg
+					            });
+							}
+						}
+					});
+
+
+				}else{  //for olden browsers
+				
+					var  iframeId = "unique" + (new Date().getTime());
+					var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
+					iframe.hide();
+					form.attr("target",iframeId);
+					iframe.appendTo("body");
+					iframe.load(function(e){
+						var doc = getDoc(iframe[0]);
+						var docRoot = doc.body ? doc.body : doc.documentElement;
+						var data = docRoot.innerHTML;
+					});
+				}
+			}
+		});
+		
+	});
+	
+	CKEDITOR.disableAutoInline = true;
+	$('textarea.ckeditor').ckeditor({
+		height:240
+	});
+</script>

assets/js/dosen/_user.php

@@ -0,0 +1,363 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />		
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+		$("#daftar-user").dataTable({
+			"iDisplayLength": 5,
+			"aLengthMenu": [
+                [5, 10, 20, 50, -1],
+                [5, 10, 20, 50, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"bFilter": false,
+			"sAjaxSource": "page/user/list.daftar-user.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ada",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        }
+		});
+
+		$('#daftar-user_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#daftar-user_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#daftar-user_wrapper .dataTables_length select').select2();
+
+        $("#btnTambahUser").click(function(){
+
+        });
+
+        $("#myprofile").validate({
+        	errorPlacement:function(error,element){
+        		error.appendTo( element.parent("div"));
+        	},
+        	rules:{
+        		pwd_lama: {
+				    required: function(element) {
+			        return $("#pwd").val()!="";
+			      	},
+			    	minlength: 6
+				},
+				emailuser:{
+					email: true
+				},
+				pwd:{
+					minlength: 6
+				}
+        	},
+        	messages:{
+        		pwd:{
+        			minlength:"Password Minimal 6 karakter"
+        		},
+        		pwd_lama:{
+        			minlength:"Password Minimal 6 karakter"
+        		}
+        	},
+        	submitHandler:function(form){
+        		$.ajax({
+        			url:'page/user/act.user.php',
+        			dataType:'json',
+        			type:'post',
+        			cache:false,
+        			data:$("#myprofile").serialize(),
+        			beforeSend:function(){
+        				$("#loading").show();
+        			},
+        			success:function(json){
+        				if(json.result){
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Sukses',
+                                time: 1000,
+                                text: json.msg
+                            });
+        				}else{
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Kesalahan',
+                                time: 4000,
+                                text: json.msg
+                            });
+        				}
+        			}
+        		});
+        		return false;
+        	}
+        });
+		$("#tambahuserbaru").validate({
+        	errorPlacement:function(error,element){
+        		error.appendTo( element.parent("div"));
+        	},
+        	rules:{
+        		nama_lengkap:{
+        			required:true
+        		},
+				emailuser:{
+					email: true
+				},
+				pwd:{
+					required:true,
+					minlength: 6
+				},
+                prodi:{
+                    required:true
+                },
+				username:{
+					required:true,
+					minlength: 5,
+					remote:{
+				        url: "page/user/checkuser.php",
+				        type: "post"
+				    }
+				}
+        	},
+        	messages:{
+        		pwd:{
+        			required:"Password tidak boleh kosong.",
+        			minlength:"Password Minimal 6 karakter"
+        		},
+        		emailuser:{
+        			email:"Silakan masukkan email yang valid."
+        		},
+                prodi:{
+                    required:"Silakan Pilih Program Studi"
+                },
+        		username:{
+        			required:"Username tidak boleh kosong.",
+        			minlength:"Username minimal 5 karakter",
+        			remote:"Username sudah ada."
+        		},
+        		nama_lengkap:{
+        			required:"Nama Lengkap harus diisi"
+        		}
+        	},
+        	submitHandler:function(form){
+        		$.ajax({
+        			url:'page/user/act.user.php',
+        			dataType:'json',
+        			type:'post',
+        			cache:false,
+        			data:$("#tambahuserbaru").serialize(),
+        			beforeSend:function(){
+        				$("#loading").show();
+        			},
+        			success:function(json){
+        				if(json.result){
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Sukses',
+                                time: 1000,
+                                text: json.msg,
+                                after_close: function(){
+                                    $("#tambahuser").modal('hide');
+                                    $("#daftar-user").dataTable().fnDraw();
+                                }
+                            });
+        					
+        				}else{
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Kesalahan',
+                                time: 4000,
+                                text: json.msg
+                            });
+        				}
+        			}
+        		});
+        		return false;
+        	}
+        });
+		
+		$("#editdatauser").validate({
+        	errorPlacement:function(error,element){
+        		error.appendTo( element.parent("div"));
+        	},
+        	rules:{
+        		nama_lengkap:{
+        			required:true
+        		},
+				emailuser:{
+					email: true
+				},
+				username:{
+					required:true,
+					minlength: 5
+				}
+        	},
+        	messages:{
+        		emailuser:{
+        			email:"Silakan masukkan email yang valid."
+        		},
+        		username:{
+        			required:"Username tidak boleh kosong.",
+        			minlength:"Username minimal 5 karakter."
+        		},
+        		nama_lengkap:{
+        			required:"Nama Lengkap harus diisi"
+        		}
+        	},
+        	submitHandler:function(form){
+        		$.ajax({
+        			url:'page/user/act.user.php',
+        			dataType:'json',
+        			type:'post',
+        			cache:false,
+        			data:$("#editdatauser").serialize(),
+        			beforeSend:function(){
+        				$("#loading").show();
+        			},
+        			success:function(json){
+        				if(json.result){
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Sukses',
+                                time: 1000,
+                                text: json.msg,
+                                after_close: function(){
+                                    $("#edituser").modal('hide');
+                                    $("#daftar-user").dataTable().fnDraw();
+                                }
+                            });
+        					
+        				}else{
+        					$("#loading").hide();
+        					$.gritter.add({
+                                title:'Kesalahan',
+                                time: 4000,
+                                text: json.msg
+                            });
+        				}
+        			}
+        		});
+        		return false;
+        	}
+        });
+	});
+
+	function EditUser(id){
+		$("#edituser").modal({
+			keyboard:false,
+			show:true,
+			remote:'page/user/form-edituser.php?user='+id
+		});
+	}
+
+	function HapusUser(id){
+		if(confirm("Hapus Admin??")){
+			$.ajax({
+				url:'page/user/act.user.php',
+				type:'post',
+				dataType:'json',
+				data:'act=hapususer&id='+id,
+				cache:false,
+				success:function(json){
+					if(json.result){
+						$.gritter.add({
+                            title:'Sukses',
+                            time: 1000,
+                            text: json.msg,
+                            after_close: function(){
+                                $("#daftar-user").dataTable().fnDraw();
+                            }
+                        });
+						
+					}else{
+						$.gritter.add({
+                            title:'Kesalahan',
+                            time: 4000,
+                            text: json.msg
+                        });
+					}
+				}
+			});
+			return false;
+		}
+		return false;
+	}
+
+	function NonaktifkanUser(id){
+		if(confirm("Nonaktifkan status Admin??")){
+			$.ajax({
+				url:'page/user/act.user.php',
+				type:'post',
+				dataType:'json',
+				data:'act=nonaktifkanuser&id='+id,
+				cache:false,
+				success:function(json){
+					if(json.result){
+						$.gritter.add({
+                            title:'Sukses',
+                            time: 1000,
+                            text: json.msg,
+                            after_close: function(){
+                                $("#daftar-user").dataTable().fnDraw();
+                            }
+                        });
+						
+					}else{
+						$.gritter.add({
+                            title:'Kesalahan',
+                            time: 4000,
+                            text: json.msg
+                        });
+					}
+				}
+			});
+			return false;
+		}
+		return false;
+	}
+
+	function AktifkanUser(id){
+		if(confirm("Aktifkan status Admin??")){
+			$.ajax({
+				url:'page/user/act.user.php',
+				type:'post',
+				dataType:'json',
+				data:'act=aktifkanuser&id='+id,
+				cache:false,
+				success:function(json){
+					if(json.result){
+						$.gritter.add({
+                            title:'Sukses',
+                            time: 1000,
+                            text: json.msg,
+                            after_close: function(){
+                                $("#daftar-user").dataTable().fnDraw();
+                            }
+                        });
+						
+					}else{
+						$.gritter.add({
+                            title:'Kesalahan',
+                            time: 4000,
+                            text: json.msg
+                        });
+					}
+				}
+			});
+			return false;
+		}
+		return false;
+	}
+</script>

assets/js/dosen/index.js

@@ -0,0 +1,460 @@
+var Index = function () {
+    // function to initiate Chart 1
+    /*var runChart1 = function () {
+        function randValue() {
+            return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
+        };
+        var pageviews = [
+            [1, randValue()],
+            [2, randValue()],
+            [3, 2 + randValue()],
+            [4, 3 + randValue()],
+            [5, 5 + randValue()],
+            [6, 10 + randValue()],
+            [7, 15 + randValue()],
+            [8, 20 + randValue()],
+            [9, 25 + randValue()],
+            [10, 30 + randValue()],
+            [11, 35 + randValue()],
+            [12, 25 + randValue()],
+            [13, 15 + randValue()],
+            [14, 20 + randValue()],
+            [15, 45 + randValue()],
+            [16, 50 + randValue()],
+            [17, 65 + randValue()],
+            [18, 70 + randValue()],
+            [19, 85 + randValue()],
+            [20, 80 + randValue()],
+            [21, 75 + randValue()],
+            [22, 80 + randValue()],
+            [23, 75 + randValue()],
+            [24, 70 + randValue()],
+            [25, 65 + randValue()],
+            [26, 75 + randValue()],
+            [27, 80 + randValue()],
+            [28, 85 + randValue()],
+            [29, 90 + randValue()],
+            [30, 95 + randValue()]
+        ];
+        var visitors = [
+            [1, randValue() - 5],
+            [2, randValue() - 5],
+            [3, randValue() - 5],
+            [4, 6 + randValue()],
+            [5, 5 + randValue()],
+            [6, 20 + randValue()],
+            [7, 25 + randValue()],
+            [8, 36 + randValue()],
+            [9, 26 + randValue()],
+            [10, 38 + randValue()],
+            [11, 39 + randValue()],
+            [12, 50 + randValue()],
+            [13, 51 + randValue()],
+            [14, 12 + randValue()],
+            [15, 13 + randValue()],
+            [16, 14 + randValue()],
+            [17, 15 + randValue()],
+            [18, 15 + randValue()],
+            [19, 16 + randValue()],
+            [20, 17 + randValue()],
+            [21, 18 + randValue()],
+            [22, 19 + randValue()],
+            [23, 20 + randValue()],
+            [24, 21 + randValue()],
+            [25, 14 + randValue()],
+            [26, 24 + randValue()],
+            [27, 25 + randValue()],
+            [28, 26 + randValue()],
+            [29, 27 + randValue()],
+            [30, 31 + randValue()]
+        ];
+        var plot = $.plot($("#placeholder-h1"), [{
+            data: pageviews,
+            label: "Unique Visits"
+        }, {
+            data: visitors,
+            label: "Page Views"
+        }], {
+            series: {
+                lines: {
+                    show: true,
+                    lineWidth: 2,
+                    fill: true,
+                    fillColor: {
+                        colors: [{
+                            opacity: 0.05
+                        }, {
+                            opacity: 0.01
+                        }]
+                    }
+                },
+                points: {
+                    show: false
+                },
+                shadowSize: 2
+            },
+            grid: {
+                hoverable: true,
+                clickable: true,
+                tickColor: "#eee",
+                borderWidth: 0
+            },
+            colors: ["#d12610", "#37b7f3", "#52e136"],
+            xaxis: {
+                ticks: 11,
+                tickDecimals: 0
+            },
+            yaxis: {
+                ticks: 11,
+                tickDecimals: 0
+            }
+        });
+
+        function showTooltip(x, y, contents) {
+            $('<div id="tooltip">' + contents + '</div>').css({
+                position: 'absolute',
+                display: 'none',
+                top: y + 5,
+                left: x + 15,
+                border: '1px solid #333',
+                padding: '4px',
+                color: '#fff',
+                'border-radius': '3px',
+                'background-color': '#333',
+                opacity: 0.80
+            }).appendTo("body").fadeIn(200);
+        }
+        var previousPoint = null;
+        $("#placeholder-h1").bind("plothover", function (event, pos, item) {
+            $("#x").text(pos.x.toFixed(2));
+            $("#y").text(pos.y.toFixed(2));
+            if (item) {
+                if (previousPoint != item.dataIndex) {
+                    previousPoint = item.dataIndex;
+                    $("#tooltip").remove();
+                    var x = item.datapoint[0].toFixed(2),
+                        y = item.datapoint[1].toFixed(2);
+                    showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
+                }
+            } else {
+                $("#tooltip").remove();
+                previousPoint = null;
+            }
+        });
+    };
+    // function to initiate Chart 2
+    var runChart2 = function () {
+        var data_pie = [],
+            series = Math.floor(Math.random() * 6) + 3;
+        for (var i = 0; i < series; i++) {
+            data_pie[i] = {
+                label: "Series" + (i + 1),
+                data: Math.floor(Math.random() * 100) + 1
+            };
+        }
+        $.plot('#placeholder-h2', data_pie, {
+            series: {
+                pie: {
+                    show: true,
+                    radius: 1,
+                    tilt: 0.5,
+                    label: {
+                        show: true,
+                        radius: 1,
+                        formatter: labelFormatter,
+                        background: {
+                            opacity: 0.8
+                        }
+                    },
+                    combine: {
+                        color: '#999',
+                        threshold: 0.1
+                    }
+                }
+            },
+            legend: {
+                show: false
+            }
+        });
+
+        function labelFormatter(label, series) {
+            return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
+        }
+    };
+    // function to initiate Chart 3
+    var runChart3 = function () {
+        var data = [],
+            totalPoints = 300;
+
+        function getRandomData() {
+            if (data.length > 0)
+                data = data.slice(1);
+            // Do a random walk
+            while (data.length < totalPoints) {
+                var prev = data.length > 0 ? data[data.length - 1] : 50,
+                    y = prev + Math.random() * 10 - 5;
+                if (y < 0) {
+                    y = 0;
+                } else if (y > 100) {
+                    y = 100;
+                }
+                data.push(y);
+            }
+            // Zip the generated y values with the x values
+            var res = [];
+            for (var i = 0; i < data.length; ++i) {
+                res.push([i, data[i]]);
+            }
+            return res;
+        }
+        // Set up the control widget
+        var updateInterval = 30;
+        $("#updateInterval").val(updateInterval).change(function () {
+            var v = $(this).val();
+            if (v && !isNaN(+v)) {
+                updateInterval = +v;
+                if (updateInterval < 1) {
+                    updateInterval = 1;
+                } else if (updateInterval > 2000) {
+                    updateInterval = 2000;
+                }
+                $(this).val("" + updateInterval);
+            }
+        });
+        var plot = $.plot("#placeholder-h3", [getRandomData()], {
+            grid: {
+                borderWidth: 1,
+                borderColor: '#eeeeee'
+            },
+            series: {
+                shadowSize: 0 // Drawing is faster without shadows
+            },
+            yaxis: {
+                min: 0,
+                max: 100
+            },
+            xaxis: {
+                show: false
+            }
+        });
+
+        function update() {
+            plot.setData([getRandomData()]);
+            // Since the axes don't change, we don't need to call plot.setupGrid()
+            plot.draw();
+            setTimeout(update, updateInterval);
+        }
+        update();
+    };
+    // function to initiate Sparkline
+    var runSparkline = function () {
+        $(".sparkline_line_good span").sparkline("html", {
+            type: "line",
+            fillColor: "#B1FFA9",
+            lineColor: "#459D1C",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_line_bad span").sparkline("html", {
+            type: "line",
+            fillColor: "#FFC4C7",
+            lineColor: "#BA1E20",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_line_neutral span").sparkline("html", {
+            type: "line",
+            fillColor: "#CCCCCC",
+            lineColor: "#757575",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_bar_good span").sparkline('html', {
+            type: "bar",
+            barColor: "#459D1C",
+            barWidth: "5",
+            height: "24"
+        });
+        $(".sparkline_bar_bad span").sparkline('html', {
+            type: "bar",
+            barColor: "#BA1E20",
+            barWidth: "5",
+            height: "24"
+        });
+        $(".sparkline_bar_neutral span").sparkline('html', {
+            type: "bar",
+            barColor: "#757575",
+            barWidth: "5",
+            height: "24"
+        });
+    };
+    // function to initiate EasyPieChart
+    var runEasyPieChart = function () {
+        if (isIE8 || isIE9) {
+            if (!Function.prototype.bind) {
+                Function.prototype.bind = function (oThis) {
+                    if (typeof this !== "function") {
+                        // closest thing possible to the ECMAScript 5 internal IsCallable function
+                        throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+                    }
+                    var aArgs = Array.prototype.slice.call(arguments, 1),
+                        fToBind = this,
+                        fNOP = function () {}, fBound = function () {
+                            return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
+                        };
+                    fNOP.prototype = this.prototype;
+                    fBound.prototype = new fNOP();
+                    return fBound;
+                };
+            }
+        }
+        $('.easy-pie-chart .bounce').easyPieChart({
+            animate: 1000,
+            size: 70
+        });
+        $('.easy-pie-chart .cpu').easyPieChart({
+            animate: 1000,
+            lineWidth: 3,
+            barColor: '#35aa47',
+            size: 70
+            
+        });
+    };*/
+    // function to initiate Full Calendar
+    var runFullCalendar = function () {
+        //calendar
+        /* initialize the calendar
+		 -----------------------------------------------------------------*/
+        var $modal = $('#event-management');
+        $('#event-categories div.event-category').each(function () {
+            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
+            // it doesn't need to have a start or end
+            var eventObject = {
+                title: $.trim($(this).text()) // use the element's text as the event title
+            };
+            // store the Event Object in the DOM element so we can get to it later
+            $(this).data('eventObject', eventObject);
+            // make the event draggable using jQuery UI
+            $(this).draggable({
+                zIndex: 999,
+                revert: true, // will cause the event to go back to its
+                revertDuration: 50 //  original position after the drag
+            });
+        });
+        /* initialize the calendar
+		 -----------------------------------------------------------------*/
+        var date = new Date();
+        var d = date.getDate();
+        var m = date.getMonth();
+        var y = date.getFullYear();
+        var form = '';
+        var calendar = $('#calendar').fullCalendar({
+            buttonText: {
+                prev: '<i class="icon-chevron-left"></i>',
+                next: '<i class="icon-chevron-right"></i>'
+            },
+            header: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'month,agendaWeek,agendaDay'
+            },
+            events: [{
+                title: 'Meeting with Boss',
+                start: new Date(y, m, 1),
+                className: 'label-default'
+            }, {
+                title: 'Bootstrap Seminar',
+                start: new Date(y, m, d - 5),
+                end: new Date(y, m, d - 2),
+                className: 'label-teal'
+            }, {
+                title: 'Lunch with Nicole',
+                start: new Date(y, m, d - 3, 12, 0),
+                className: 'label-green',
+                allDay: false
+            }],
+            editable: true,
+            droppable: true, // this allows things to be dropped onto the calendar !!!
+            drop: function (date, allDay) { // this function is called when something is dropped
+                // retrieve the dropped element's stored Event Object
+                var originalEventObject = $(this).data('eventObject');
+                var $categoryClass = $(this).attr('data-class');
+                // we need to copy it, so that multiple events don't have a reference to the same object
+                var copiedEventObject = $.extend({}, originalEventObject);
+                // assign it the date that was reported
+                copiedEventObject.start = date;
+                copiedEventObject.allDay = allDay;
+                if ($categoryClass)
+                    copiedEventObject['className'] = [$categoryClass];
+                // render the event on the calendar
+                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
+                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
+                // is the "remove after drop" checkbox checked?
+                if ($('#drop-remove').is(':checked')) {
+                    // if so, remove the element from the "Draggable Events" list
+                    $(this).remove();
+                }
+            },
+            selectable: true,
+            selectHelper: true,
+            select: function (start, end, allDay) {
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                form = $("<form></form>");
+                form.append("<div class='row'></div>");
+                form.find(".row").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>New Event Name</label><input class='form-control' placeholder='Insert Event Name' type=text name='title'/></div></div>").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>").find("select[name='category']").append("<option value='label-default'>Work</option>").append("<option value='label-green'>Home</option>").append("<option value='label-purple'>Holidays</option>").append("<option value='label-orange'>Party</option>").append("<option value='label-yellow'>Birthday</option>").append("<option value='label-teal'>Generic</option>").append("<option value='label-beige'>To Do</option>");
+                $modal.find('.remove-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
+                    form.submit();
+                });
+                $modal.find('form').on('submit', function () {
+                    title = form.find("input[name='title']").val();
+                    $categoryClass = form.find("select[name='category'] option:checked").val();
+                    if (title !== null) {
+                        calendar.fullCalendar('renderEvent', {
+                                title: title,
+                                start: start,
+                                end: end,
+                                allDay: allDay,
+                                className: $categoryClass
+                            }, true // make the event "stick"
+                        );
+                    }
+                    $modal.modal('hide');
+                    return false;
+                });
+                calendar.fullCalendar('unselect');
+            },
+            eventClick: function (calEvent, jsEvent, view) {
+                var form = $("<form></form>");
+                form.append("<label>Change event name</label>");
+                form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success'><i class='icon-ok'></i> Save</button></span></div>");
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                $modal.find('.remove-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.remove-event').unbind('click').click(function () {
+                    calendar.fullCalendar('removeEvents', function (ev) {
+                        return (ev._id == calEvent._id);
+                    });
+                    $modal.modal('hide');
+                });
+                $modal.find('form').on('submit', function () {
+                    calEvent.title = form.find("input[type=text]").val();
+                    calendar.fullCalendar('updateEvent', calEvent);
+                    $modal.modal('hide');
+                    return false;
+                });
+            }
+        });
+    };
+    return {
+        init: function () {
+            /*runChart1();
+            runChart2();
+            runChart3();
+            runSparkline();
+            runEasyPieChart();*/
+            runFullCalendar();
+        }
+    };
+}();

assets/js/dosen/login.js

@@ -0,0 +1,217 @@
+var Login = function () {
+    var runLoginButtons = function () {
+        $('.forgot').bind('click', function () {
+            $('.box-login').hide();
+            $('.box-forgot').show();
+        });
+        $('.register').bind('click', function () {
+            $('.box-login').hide();
+            //$('.box-register').show();
+        });
+        $('.go-back').click(function () {
+            $('.box-login').show();
+            $('.box-forgot').hide();
+            //$('.box-register').hide();
+        });
+    };
+    var runSetDefaultValidation = function () {
+        $.validator.setDefaults({
+            errorElement: "span", // contain the error msg in a small tag
+            errorClass: 'help-block',
+            errorPlacement: function (error, element) { // render error placement for each input type
+                if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
+                    error.insertAfter($(element).closest('.form-group').children('div').children().last());
+                } else if (element.attr("name") == "card_expiry_mm" || element.attr("name") == "card_expiry_yyyy") {
+                    error.appendTo($(element).closest('.form-group').children('div'));
+                } else {
+                    error.insertAfter(element);
+                    // for other inputs, just perform default behavior
+                }
+            },
+            ignore: ':hidden',
+            highlight: function (element) {
+                $(element).closest('.help-block').removeClass('valid');
+                // display OK icon
+                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
+                // add the Bootstrap error class to the control group
+            },
+            unhighlight: function (element) { // revert the change done by hightlight
+                $(element).closest('.form-group').removeClass('has-error');
+                // set error class to the control group
+            },
+            success: function (label, element) {
+                label.addClass('help-block valid');
+                // mark the current input as valid and display OK icon
+                $(element).closest('.form-group').removeClass('has-error');
+            },
+            highlight: function (element) {
+                $(element).closest('.help-block').removeClass('valid');
+                // display OK icon
+                $(element).closest('.form-group').addClass('has-error');
+                // add the Bootstrap error class to the control group
+            },
+            unhighlight: function (element) { // revert the change done by hightlight
+                $(element).closest('.form-group').removeClass('has-error');
+                // set error class to the control group
+            }
+        });
+    };
+    var runLoginValidator = function () {
+        var form = $('.form-login');
+        var errorHandler = $('.errorHandler', form);
+        form.validate({
+            rules: {
+                username: {
+                    minlength: 2,
+                    required: true
+                },
+                password: {
+                    minlength: 4,
+                    required: true
+                }
+            },
+            messages:{
+                username :{
+                    minlength:"Karakter minimal {0} Karakter",
+                    required:"Silakan masukkan username anda"
+                },
+                password:{
+                    minlength:"Karakter minimal {0} Karakter",
+                    required:"Silakan masukkan password anda"
+                }
+            },
+            submitHandler: function (form) {
+                errorHandler.hide();
+                var submitButton = $('.form-login button[type="submit"]');
+                submitButton.prop('disabled', true);
+                $('#loading').show();
+                $.ajax({
+                    url:'act.auth.php',
+                    data:$('.form-login').serialize(),
+                    type:'post',
+                    dataType:'json',
+                    success:function(json){
+                        if (json.result){
+                            location.href='dashboard.php';
+                            
+                        }else{
+                           //alert(json.msg);
+                           errorHandler.html(json.msg || 'Gagal Login.');
+                           errorHandler.show();
+                           submitButton.prop('disabled', false);
+                           $('#loading').hide();
+                        }
+                    },
+                    error:function(xhr){
+                        var msg = 'Login gagal diproses. Silakan coba lagi.';
+                        if (xhr.responseText) {
+                            msg += '<br><small>' + xhr.responseText.substring(0, 300) + '</small>';
+                        }
+                        errorHandler.html(msg);
+                        errorHandler.show();
+                        submitButton.prop('disabled', false);
+                        $('#loading').hide();
+                    }
+                });
+                return false;
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                errorHandler.show();
+            }
+        });
+    };
+    var runForgotValidator = function () {
+        var form2 = $('.form-forgot');
+        var errorHandler2 = $('.errorHandler', form2);
+        form2.validate({
+            rules: {
+                email: {
+                    required: true
+                }
+            },
+            messages:{
+                email: "Silakan masukkan alamat email anda"
+            },
+            submitHandler: function (form) {
+                errorHandler2.hide();
+                $.ajax({
+                    url:'act.auth.php',
+                    data:$('.form-forgot').serialize(),
+                    type:'post',
+                    dataType:'json',
+                    /*beforeSend:function(){
+                        $("#statusLogin").html("Silakan Tunggu..");
+                    },*/
+                    success:function(json){
+                        if (json.result){
+                            alert(json.msg);
+                            //location.href='./'
+                        }else{
+                           errorHandler2.html(json.msg);
+                           errorHandler2.show();
+                        }
+                    }
+                });
+                return false;
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                errorHandler2.show();
+            }
+        });
+    };
+    /*var runRegisterValidator = function () {
+        var form3 = $('.form-register');
+        var errorHandler3 = $('.errorHandler', form3);
+        form3.validate({
+            rules: {
+                full_name: {
+                    minlength: 2,
+                    required: true
+                },
+                address: {
+                    minlength: 2,
+                    required: true
+                },
+                city: {
+                    minlength: 2,
+                    required: true
+                },
+                gender: {
+                    required: true
+                },
+                email: {
+                    required: true
+                },
+                password: {
+                    minlength: 6,
+                    required: true
+                },
+                password_again: {
+                    required: true,
+                    minlength: 5,
+                    equalTo: "#password"
+                },
+                agree: {
+                    minlength: 1,
+                    required: true
+                }
+            },
+            submitHandler: function (form) {
+                errorHandler3.hide();
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                errorHandler3.show();
+            }
+        });
+    };*/
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runLoginButtons();
+            runSetDefaultValidation();
+            runLoginValidator();
+            runForgotValidator();
+            // runRegisterValidator();
+        }
+    };
+}();

assets/js/form-calendar.js

@@ -0,0 +1,131 @@
+var Calendar = function () {
+    //function to initiate Full CAlendar
+    var runCalendar = function () {
+        var $modal = $('#event-management');
+        $('#event-categories div.event-category').each(function () {
+            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
+            // it doesn't need to have a start or end
+            var eventObject = {
+                title: $.trim($(this).text()) // use the element's text as the event title
+            };
+            // store the Event Object in the DOM element so we can get to it later
+            $(this).data('eventObject', eventObject);
+            // make the event draggable using jQuery UI
+            $(this).draggable({
+                zIndex: 999,
+                revert: true, // will cause the event to go back to its
+                revertDuration: 50 //  original position after the drag
+            });
+        });
+        /* initialize the calendar
+				 -----------------------------------------------------------------*/
+        var date = new Date();
+        var d = date.getDate();
+        var m = date.getMonth();
+        var y = date.getFullYear();
+        var form = '';
+        var calendar = $('#calendar').fullCalendar({
+            buttonText: {
+                prev: '<i class="icon-chevron-left"></i>',
+                next: '<i class="icon-chevron-right"></i>'
+            },
+            header: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'month,agendaWeek,agendaDay'
+            },
+            events: [{
+                title: 'Meeting with Boss',
+                start: new Date(y, m, 1),
+                className: 'label-default'
+            }, {
+                title: 'Bootstrap Seminar',
+                start: new Date(y, m, d - 5),
+                end: new Date(y, m, d - 2),
+                className: 'label-teal'
+            }, {
+                title: 'Lunch with Nicole',
+                start: new Date(y, m, d - 3, 12, 0),
+                className: 'label-green',
+                allDay: false
+            }],
+            editable: true,
+            droppable: true, // this allows things to be dropped onto the calendar !!!
+            drop: function (date, allDay) { // this function is called when something is dropped
+                // retrieve the dropped element's stored Event Object
+                var originalEventObject = $(this).data('eventObject');
+                var $categoryClass = $(this).attr('data-class');
+                // we need to copy it, so that multiple events don't have a reference to the same object
+                var copiedEventObject = $.extend({}, originalEventObject);
+                // assign it the date that was reported
+                copiedEventObject.start = date;
+                copiedEventObject.allDay = allDay;
+                if ($categoryClass)
+                    copiedEventObject['className'] = [$categoryClass];
+                // render the event on the calendar
+                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
+                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
+                // is the "remove after drop" checkbox checked?
+                if ($('#drop-remove').is(':checked')) {
+                    // if so, remove the element from the "Draggable Events" list
+                    $(this).remove();
+                }
+            },
+            selectable: true,
+            selectHelper: true,
+            select: function (start, end, allDay) {
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                form = $("<form></form>");
+                form.append("<div class='row'></div>");
+                form.find(".row").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>New Event Name</label><input class='form-control' placeholder='Insert Event Name' type=text name='title'/></div></div>").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>").find("select[name='category']").append("<option value='label-default'>Work</option>").append("<option value='label-green'>Home</option>").append("<option value='label-purple'>Holidays</option>").append("<option value='label-orange'>Party</option>").append("<option value='label-yellow'>Birthday</option>").append("<option value='label-teal'>Generic</option>").append("<option value='label-beige'>To Do</option>");
+                $modal.find('.remove-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
+                    form.submit();
+                });
+                $modal.find('form').on('submit', function () {
+                    title = form.find("input[name='title']").val();
+                    $categoryClass = form.find("select[name='category'] option:checked").val();
+                    if (title !== null) {
+                        calendar.fullCalendar('renderEvent', {
+                                title: title,
+                                start: start,
+                                end: end,
+                                allDay: allDay,
+                                className: $categoryClass
+                            }, true // make the event "stick"
+                        );
+                    }
+                    $modal.modal('hide');
+                    return false;
+                });
+                calendar.fullCalendar('unselect');
+            },
+            eventClick: function (calEvent, jsEvent, view) {
+                var form = $("<form></form>");
+                form.append("<label>Change event name</label>");
+                form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success'><i class='icon-ok'></i> Save</button></span></div>");
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                $modal.find('.remove-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.remove-event').unbind('click').click(function () {
+                    calendar.fullCalendar('removeEvents', function (ev) {
+                        return (ev._id == calEvent._id);
+                    });
+                    $modal.modal('hide');
+                });
+                $modal.find('form').on('submit', function () {
+                    calEvent.title = form.find("input[type=text]").val();
+                    calendar.fullCalendar('updateEvent', calEvent);
+                    $modal.modal('hide');
+                    return false;
+                });
+            }
+        });
+    };
+    return {
+        init: function () {
+            runCalendar();
+        }
+    };
+}();

assets/js/form-dropzone.js

@@ -0,0 +1,17 @@
+var Dropzone = function () {
+    //function to initiate DropzoneJS 
+    var runDropzone = function () {
+        //for more information about Server side implementation
+        //please visit http://www.dropzonejs.com/
+        $(".dropzone").dropzone({
+            paramName: "file", // The name that will be used to transfer the file
+            maxFilesize: 5.0, // MB
+            addRemoveLinks: true
+        });
+    };
+    return {
+        init: function () {
+            runDropzone();
+        }
+    };
+}();

assets/js/form-elements.js

@@ -0,0 +1,101 @@
+var FormElements = function () {
+    //function to initiate jquery.inputlimiter
+    var runInputLimiter = function () {
+        $('.limited').inputlimiter({
+            remText: 'You only have %n character%s remaining...',
+            remFullText: 'Stop typing! You\'re not allowed any more characters!',
+            limitText: 'You\'re allowed to input %n character%s into this field.'
+        });
+    };
+    //function to initiate query.autosize    
+    var runAutosize = function () {
+        $("textarea.autosize").autosize();
+    };
+    //function to initiate Select2
+    var runSelect2 = function () {
+        $(".search-select").select2({
+            placeholder: "Select a State",
+            allowClear: true
+        });
+    };
+    //function to initiate jquery.maskedinput
+    var runMaskInput = function () {
+        $.mask.definitions['~'] = '[+-]';
+        $('.input-mask-date').mask('99/99/9999');
+        $('.input-mask-phone').mask('(999) 999-9999');
+        $('.input-mask-eyescript').mask('~9.99 ~9.99 999');
+        $(".input-mask-product").mask("a*-999-a999", {
+            placeholder: " ",
+            completed: function () {
+                alert("You typed the following: " + this.val());
+            }
+        });
+    };
+    var runMaskMoney = function () {
+        $(".currency").maskMoney();
+    };
+    //function to initiate bootstrap-datepicker
+    var runDatePicker = function () {
+        $('.date-picker').datepicker({
+            autoclose: true
+        });
+    };
+    //function to initiate bootstrap-timepicker
+    var runTimePicker = function () {
+        $('.time-picker').timepicker();
+    };
+    //function to initiate daterangepicker
+    var runDateRangePicker = function () {
+        $('.date-range').daterangepicker();
+        $('.date-time-range').daterangepicker({
+            timePicker: true,
+            timePickerIncrement: 15,
+            format: 'MM/DD/YYYY h:mm A'
+        });
+    };
+    //function to initiate bootstrap-colorpicker
+    var runColorPicker = function () {
+        $('.color-picker').colorpicker({
+            format: 'hex'
+        });
+        $('.color-picker-rgba').colorpicker({
+            format: 'rgba'
+        });
+        $('.colorpicker-component').colorpicker();
+    };
+    //function to initiate jquery.tagsinput
+    var runTagsInput = function () {
+        $('#tags_1').tagsInput({
+            width: 'auto'
+        });
+    };
+    //function to initiate summernote
+    var runSummerNote = function () {
+        $('.summernote').summernote({
+            height: 300,
+            tabsize: 2
+        });
+    };
+    //function to initiate ckeditor
+    var runCKEditor = function () {
+        CKEDITOR.disableAutoInline = true;
+        $('textarea.ckeditor').ckeditor();
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runInputLimiter();
+            runAutosize();
+            runSelect2();
+            runMaskInput();
+            runMaskMoney();
+            runDatePicker();
+            runTimePicker();
+            runDateRangePicker();
+            runColorPicker();
+            runTagsInput();
+            runSummerNote();
+            runCKEditor();
+        }
+    };
+}();

assets/js/form-image-cropping.js

@@ -0,0 +1,192 @@
+var ImageCropping = function () {
+    // function to initiate Jcrop
+    // Create variables (in this scope) to hold the API and image size
+    var jcrop_api, boundx, boundy;
+    var runBasicHandler = function () {
+        $('#target').Jcrop({
+            onChange: showCoords,
+            onSelect: showCoords,
+            onRelease: clearCoords
+        }, function () {
+            jcrop_api = this;
+        });
+        $('#coords').on('change', 'input', function (e) {
+            var x1 = $('#x1').val(),
+                x2 = $('#x2').val(),
+                y1 = $('#y1').val(),
+                y2 = $('#y2').val();
+            jcrop_api.setSelect([x1, y1, x2, y2]);
+        });
+    };
+    // Simple event handler, called from onChange and onSelect
+    // event handlers, as per the Jcrop invocation above
+   var showCoords = function(c) {
+        $('#x1').val(c.x);
+        $('#y1').val(c.y);
+        $('#x2').val(c.x2);
+        $('#y2').val(c.y2);
+        $('#w').val(c.w);
+        $('#h').val(c.h);
+    };
+
+    var clearCoords = function() {
+        $('#coords input').val('');
+    };
+    var runPreviewPane = function () {
+        // Grab some information about the preview pane
+        var $preview = $('#preview-pane'),
+            $pcnt = $('#preview-pane .preview-container'),
+            $pimg = $('#preview-pane .preview-container img'),
+            xsize = $pcnt.width(),
+            ysize = $pcnt.height();
+        $('#target2').Jcrop({
+            onChange: updatePreview,
+            onSelect: updatePreview,
+            aspectRatio: xsize / ysize
+        }, function () {
+            // Use the API to get the real image size
+            var bounds = this.getBounds();
+            boundx = bounds[0];
+            boundy = bounds[1];
+            // Store the API in the jcrop_api variable
+            jcrop_api = this;
+            // Move the preview into the jcrop container for css positioning
+            $preview.appendTo(jcrop_api.ui.holder);
+        });
+
+        function updatePreview(c) {
+            if (parseInt(c.w) > 0) {
+                var rx = xsize / c.w;
+                var ry = ysize / c.h;
+                $pimg.css({
+                    width: Math.round(rx * boundx) + 'px',
+                    height: Math.round(ry * boundy) + 'px',
+                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
+                    marginTop: '-' + Math.round(ry * c.y) + 'px'
+                });
+            }
+        };
+    };
+    var runAnimationsTransitions = function () {
+        $('#target3').Jcrop({
+            bgFade: true,
+            bgOpacity: .2,
+            setSelect: [60, 70, 540, 330]
+        }, function () {
+            jcrop_api = this;
+        });
+        $('#fadetog').on('ifChecked', function (event) {
+            jcrop_api.setOptions({
+                bgFade: true
+            });
+        });
+        $('#fadetog').on('ifUnchecked', function (event) {
+            jcrop_api.setOptions({
+                bgFade: false
+            });
+        });
+        $('#shadetog').on('ifUnchecked', function (event) {
+            $('#shadetxt').slideUp();
+        });
+        $('#shadetog').on('ifChecked', function (event) {
+            $('#shadetxt').slideDown();
+        });
+        // Define page sections
+        var sections = {
+            bgc_buttons: 'Change bgColor',
+            bgo_buttons: 'Change bgOpacity',
+            anim_buttons: 'Animate Selection'
+        };
+        // Define animation buttons
+        var ac = {
+            anim1: [217, 122, 382, 284],
+            anim2: [20, 20, 580, 380],
+            anim3: [24, 24, 176, 376],
+            anim4: [347, 165, 550, 355],
+            anim5: [136, 55, 472, 183]
+        };
+        // Define bgOpacity buttons
+        var bgo = {
+            Low: .2,
+            Mid: .5,
+            High: .8,
+            Full: 1
+        };
+        // Define bgColor buttons
+        var bgc = {
+            R: '#900',
+            B: '#4BB6F0',
+            Y: '#F0B207',
+            G: '#46B81C',
+            W: 'white',
+            K: 'black'
+        };
+        // Create fieldset targets for buttons
+        for (i in sections) insertSection(i, sections[i]);
+
+        function create_btn(c) {
+            var $o = $('<button />').addClass('btn btn-sm');
+            if (c)
+                $o.append(c);
+            return $o;
+        }
+        var a_count = 1;
+        // Create animation buttons
+        for (i in ac) {
+            $('#anim_buttons .btn-group').append(create_btn(a_count++).click(animHandler(ac[i])), ' ');
+        }
+        $('#anim_buttons .btn-group').append(create_btn('Bye!').click(function (e) {
+            $(e.target).addClass('active');
+            jcrop_api.animateTo([300, 200, 300, 200], function () {
+                this.release();
+                $(e.target).closest('.btn-group').find('.active').removeClass('active');
+            });
+            return false;
+        }));
+        // Create bgOpacity buttons
+        for (i in bgo) {
+            $('#bgo_buttons .btn-group').append(create_btn(i).click(setoptHandler('bgOpacity', bgo[i])), ' ');
+        }
+        // Create bgColor buttons
+        for (i in bgc) {
+            $('#bgc_buttons .btn-group').append(create_btn(i).css({
+                background: bgc[i],
+                color: ((i == 'K') || (i == 'R')) ? 'white' : 'black'
+            }).click(setoptHandler('bgColor', bgc[i])), ' ');
+        }
+        // Function to insert named sections into interface
+        function insertSection(k, v) {
+            $('#interface').prepend($('<fieldset></fieldset>').attr('id', k).append($('<legend></legend>').append(v), '<div class="btn-toolbar"><div class="btn-group"></div></div>'));
+        };
+        // Handler for option-setting buttons
+        function setoptHandler(k, v) {
+            return function (e) {
+                $(e.target).closest('.btn-group').find('.active').removeClass('active');
+                $(e.target).addClass('active');
+                var opt = {};
+                opt[k] = v;
+                jcrop_api.setOptions(opt);
+                return false;
+            };
+        };
+        // Handler for animation buttons
+        function animHandler(v) {
+            return function (e) {
+                $(e.target).addClass('active');
+                jcrop_api.animateTo(v, function () {
+                    $(e.target).closest('.btn-group').find('.active').removeClass('active');
+                });
+                return false;
+            };
+        };
+        $('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
+        $('#interface').show();
+    };
+    return {
+        init: function () {
+            runBasicHandler();
+            runPreviewPane();
+            runAnimationsTransitions();
+        }
+    };
+}();

assets/js/form-validation.js

@@ -0,0 +1,227 @@
+var FormValidator = function () {
+    // function to initiate Validation Sample 1
+    var runValidator1 = function () {
+        var form1 = $('#form');
+        var errorHandler1 = $('.errorHandler', form1);
+        var successHandler1 = $('.successHandler', form1);
+        $.validator.addMethod("FullDate", function () {
+            //if all values are selected
+            if ($("#dd").val() != "" && $("#mm").val() != "" && $("#yyyy").val() != "") {
+                return true;
+            } else {
+                return false;
+            }
+        }, 'Please select a day, month, and year');
+        $('#form').validate({
+            errorElement: "span", // contain the error msg in a span tag
+            errorClass: 'help-block',
+            errorPlacement: function (error, element) { // render error placement for each input type
+                if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
+                    error.insertAfter($(element).closest('.form-group').children('div').children().last());
+                } else if (element.attr("name") == "dd" || element.attr("name") == "mm" || element.attr("name") == "yyyy") {
+                    error.insertAfter($(element).closest('.form-group').children('div'));
+                } else {
+                    error.insertAfter(element);
+                    // for other inputs, just perform default behavior
+                }
+            },
+            ignore: "",
+            rules: {
+                firstname: {
+                    minlength: 2,
+                    required: true
+                },
+                lastname: {
+                    minlength: 2,
+                    required: true
+                },
+                email: {
+                    required: true,
+                    email: true
+                },
+                password: {
+                    minlength: 6,
+                    required: true
+                },
+                password_again: {
+                    required: true,
+                    minlength: 5,
+                    equalTo: "#password"
+                },
+                yyyy: "FullDate",
+                gender: {
+                    required: true
+                },
+                zipcode: {
+                    required: true,
+                    number: true,
+                    minlength: 5,
+                    minlength: 5
+                },
+                city: {
+                    required: true
+                },
+                newsletter: {
+                    required: true
+                }
+            },
+            messages: {
+                firstname: "Please specify your first name",
+                lastname: "Please specify your last name",
+                email: {
+                    required: "We need your email address to contact you",
+                    email: "Your email address must be in the format of name@domain.com"
+                },
+                gender: "Please check a gender!"
+            },
+            groups: {
+                DateofBirth: "dd mm yyyy",
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                successHandler1.hide();
+                errorHandler1.show();
+            },
+            highlight: function (element) {
+                $(element).closest('.help-block').removeClass('valid');
+                // display OK icon
+                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
+                // add the Bootstrap error class to the control group
+            },
+            unhighlight: function (element) { // revert the change done by hightlight
+                $(element).closest('.form-group').removeClass('has-error');
+                // set error class to the control group
+            },
+            success: function (label, element) {
+                label.addClass('help-block valid');
+                // mark the current input as valid and display OK icon
+                $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
+            },
+            submitHandler: function (form) {
+                successHandler1.show();
+                errorHandler1.hide();
+            }
+        });
+    };
+    // function to initiate Validation Sample 2
+    var runValidator2 = function () {
+        var form2 = $('#form2');
+        var errorHandler2 = $('.errorHandler', form2);
+        var successHandler2 = $('.successHandler', form2);
+        $.validator.addMethod("getEditorValue", function () {
+            $("#editor1").val($('.summernote').code());
+            if ($("#editor1").val() != "" && $("#editor1").val() != "<br>") {
+                $('#editor1').val('');
+                return true;
+            } else {
+                return false;
+            }
+        }, 'This field is required.');
+        form2.validate({
+            errorElement: "span", // contain the error msg in a small tag
+            errorClass: 'help-block',
+            errorPlacement: function (error, element) { // render error placement for each input type
+                if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
+                    error.insertAfter($(element).closest('.form-group').children('div').children().last());
+                } else if (element.hasClass("ckeditor")) {
+                    error.appendTo($(element).closest('.form-group'));
+                } else {
+                    error.insertAfter(element);
+                    // for other inputs, just perform default behavior
+                }
+            },
+            ignore: "",
+            rules: {
+                firstname2: {
+                    minlength: 2,
+                    required: true
+                },
+                lastname2: {
+                    minlength: 2,
+                    required: true
+                },
+                email2: {
+                    required: true,
+                    email: true
+                },
+                occupation: {
+                    required: true
+                },
+                dropdown: {
+                    required: true
+                },
+                services: {
+                    required: true,
+                    minlength: 2
+                },
+                creditcard: {
+                    required: true,
+                    creditcard: true
+                },
+                url: {
+                    required: true,
+                    url: true
+                },
+                zipcode2: {
+                    required: true,
+                    number: true,
+                    minlength: 5,
+                    minlength: 5
+                },
+                city2: {
+                    required: true
+                },
+                editor1: "getEditorValue",
+                editor2: {
+                    required: true
+                }
+            },
+            messages: {
+                firstname: "Please specify your first name",
+                lastname: "Please specify your last name",
+                email: {
+                    required: "We need your email address to contact you",
+                    email: "Your email address must be in the format of name@domain.com"
+                },
+                services: {
+                    minlength: jQuery.format("Please select  at least {0} types of Service")
+                }
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                successHandler2.hide();
+                errorHandler2.show();
+            },
+            highlight: function (element) {
+                $(element).closest('.help-block').removeClass('valid');
+                // display OK icon
+                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
+                // add the Bootstrap error class to the control group
+            },
+            unhighlight: function (element) { // revert the change done by hightlight
+                $(element).closest('.form-group').removeClass('has-error');
+                // set error class to the control group
+            },
+            success: function (label, element) {
+                label.addClass('help-block valid');
+                // mark the current input as valid and display OK icon
+                $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
+            },
+            submitHandler: function (form) {
+                successHandler2.show();
+                errorHandler2.hide();
+            }
+        });
+        $('.summernote').summernote({
+            height: 300,
+            tabsize: 2
+        });
+        CKEDITOR.disableAutoInline = true;
+        $('textarea.ckeditor').ckeditor();
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runValidator1();
+            runValidator2();
+        }
+    };
+}();

assets/js/form-wizard.js

@@ -0,0 +1,190 @@
+var FormWizard = function () {
+    var wizardContent = $('#wizard');
+    var wizardForm = $('#form');
+    var initWizard = function () {
+        // function to initiate Wizard Form
+        wizardContent.smartWizard({
+            selected: 0,
+            keyNavigation: false,
+            onLeaveStep: leaveAStepCallback,
+            onShowStep: onShowStep,
+        });
+        var numberOfSteps = 0;
+        animateBar();
+        initValidator();
+    };
+    var animateBar = function (val) { 
+        if ((typeof val == 'undefined') || val == "") {	
+            val = 1;
+        };
+        numberOfSteps = $('.swMain > ul > li').length;
+        var valueNow = Math.floor(100 / numberOfSteps * val);
+        $('.step-bar').css('width', valueNow + '%');
+    };
+    var initValidator = function () {
+        $.validator.addMethod("cardExpiry", function () {
+            //if all values are selected
+            if ($("#card_expiry_mm").val() != "" && $("#card_expiry_yyyy").val() != "") {
+                return true;
+            } else {
+                return false;
+            }
+        }, 'Please select a month and year');
+        $.validator.setDefaults({
+            errorElement: "span", // contain the error msg in a span tag
+            errorClass: 'help-block',
+            errorPlacement: function (error, element) { // render error placement for each input type
+                if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
+                    error.insertAfter($(element).closest('.form-group').children('div').children().last());
+                } else if (element.attr("name") == "card_expiry_mm" || element.attr("name") == "card_expiry_yyyy") {
+                    error.appendTo($(element).closest('.form-group').children('div'));
+                } else {
+                    error.insertAfter(element);
+                    // for other inputs, just perform default behavior
+                }
+            },
+            ignore: ':hidden',
+            rules: {
+                username: {
+                    minlength: 2,
+                    required: true
+                },
+                email: {
+                    required: true,
+                    email: true
+                },
+                password: {
+                    minlength: 6,
+                    required: true
+                },
+                password_again: {
+                    required: true,
+                    minlength: 5,
+                    equalTo: "#password"
+                },
+                full_name: {
+                    required: true,
+                    minlength: 2,
+                },
+                phone: {
+                    required: true
+                },
+                gender: {
+                    required: true
+                },
+                address: {
+                    required: true
+                },
+                city: {
+                    required: true
+                },
+                country: {
+                    required: true
+                },
+                card_name: {
+                    required: true
+                },
+                card_number: {
+                    minlength: 16,
+                    maxlength: 16,
+                    required: true
+                },
+                card_cvc: {
+                    digits: true,
+                    required: true,
+                    minlength: 3,
+                    maxlength: 4
+                },
+                card_expiry_yyyy: "cardExpiry",
+                payment: {
+                    required: true,
+                    minlength: 1
+                }
+            },
+            messages: {
+                firstname: "Please specify your first name"
+            },
+            highlight: function (element) {
+                $(element).closest('.help-block').removeClass('valid');
+                // display OK icon
+                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
+                // add the Bootstrap error class to the control group
+            },
+            unhighlight: function (element) { // revert the change done by hightlight
+                $(element).closest('.form-group').removeClass('has-error');
+                // set error class to the control group
+            },
+            success: function (label, element) {
+                label.addClass('help-block valid');
+                // mark the current input as valid and display OK icon
+                $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
+            }
+        });
+    };
+    var displayConfirm = function () {
+        $('.display-value', form).each(function () {
+            var input = $('[name="' + $(this).attr("data-display") + '"]', form);
+            if (input.attr("type") == "text" || input.attr("type") == "email" || input.is("textarea")) {
+                $(this).html(input.val());
+            } else if (input.is("select")) {
+                $(this).html(input.find('option:selected').text());
+            } else if (input.is(":radio") || input.is(":checkbox")) {
+                $(this).html(input.filter(":checked").parent('label').text());
+            } else if ($(this).attr("data-display") == 'card_expiry') {
+                $(this).html($('[name="card_expiry_mm"]', form).val() + '/' + $('[name="card_expiry_yyyy"]', form).val());
+            }
+        });
+    };
+    var onShowStep = function (obj, context) {
+        $(".next-step").unbind("click").click(function (e) {
+            e.preventDefault();
+            wizardContent.smartWizard("goForward");
+        });
+        $(".back-step").unbind("click").click(function (e) {
+            e.preventDefault();
+            wizardContent.smartWizard("goBackward");
+        });
+        $(".finish-step").unbind("click").click(function (e) {
+            e.preventDefault();
+            onFinish(obj, context);
+        });
+    };
+    var leaveAStepCallback = function (obj, context) {
+        return validateSteps(context.fromStep, context.toStep);
+        // return false to stay on step and true to continue navigation
+    };
+    var onFinish = function (obj, context) {
+        if (validateAllSteps()) {
+            alert('form submit function');
+            $('.anchor').children("li").last().children("a").removeClass('selected').addClass('done');
+            //wizardForm.submit();
+        }
+    };
+    var validateSteps = function (stepnumber, nextstep) {
+        var isStepValid = false;
+        if (numberOfSteps !== nextstep) {
+            // cache the form element selector
+            if (wizardForm.valid()) { // validate the form
+                wizardForm.validate().focusInvalid();
+                //focus the invalid fields
+                animateBar(nextstep);
+                isStepValid = true;
+                return true;
+            };
+        } else {
+            displayConfirm();
+            animateBar(nextstep);
+            return true;
+        };
+    };
+    var validateAllSteps = function () {
+        var isStepValid = true;
+        // all step validation logic
+        return isStepValid;
+    };
+    return {
+        init: function () {
+            initWizard();
+        }
+    };
+}();

assets/js/index.js

@@ -0,0 +1,460 @@
+var Index = function () {
+    // function to initiate Chart 1
+    /*var runChart1 = function () {
+        function randValue() {
+            return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
+        };
+        var pageviews = [
+            [1, randValue()],
+            [2, randValue()],
+            [3, 2 + randValue()],
+            [4, 3 + randValue()],
+            [5, 5 + randValue()],
+            [6, 10 + randValue()],
+            [7, 15 + randValue()],
+            [8, 20 + randValue()],
+            [9, 25 + randValue()],
+            [10, 30 + randValue()],
+            [11, 35 + randValue()],
+            [12, 25 + randValue()],
+            [13, 15 + randValue()],
+            [14, 20 + randValue()],
+            [15, 45 + randValue()],
+            [16, 50 + randValue()],
+            [17, 65 + randValue()],
+            [18, 70 + randValue()],
+            [19, 85 + randValue()],
+            [20, 80 + randValue()],
+            [21, 75 + randValue()],
+            [22, 80 + randValue()],
+            [23, 75 + randValue()],
+            [24, 70 + randValue()],
+            [25, 65 + randValue()],
+            [26, 75 + randValue()],
+            [27, 80 + randValue()],
+            [28, 85 + randValue()],
+            [29, 90 + randValue()],
+            [30, 95 + randValue()]
+        ];
+        var visitors = [
+            [1, randValue() - 5],
+            [2, randValue() - 5],
+            [3, randValue() - 5],
+            [4, 6 + randValue()],
+            [5, 5 + randValue()],
+            [6, 20 + randValue()],
+            [7, 25 + randValue()],
+            [8, 36 + randValue()],
+            [9, 26 + randValue()],
+            [10, 38 + randValue()],
+            [11, 39 + randValue()],
+            [12, 50 + randValue()],
+            [13, 51 + randValue()],
+            [14, 12 + randValue()],
+            [15, 13 + randValue()],
+            [16, 14 + randValue()],
+            [17, 15 + randValue()],
+            [18, 15 + randValue()],
+            [19, 16 + randValue()],
+            [20, 17 + randValue()],
+            [21, 18 + randValue()],
+            [22, 19 + randValue()],
+            [23, 20 + randValue()],
+            [24, 21 + randValue()],
+            [25, 14 + randValue()],
+            [26, 24 + randValue()],
+            [27, 25 + randValue()],
+            [28, 26 + randValue()],
+            [29, 27 + randValue()],
+            [30, 31 + randValue()]
+        ];
+        var plot = $.plot($("#placeholder-h1"), [{
+            data: pageviews,
+            label: "Unique Visits"
+        }, {
+            data: visitors,
+            label: "Page Views"
+        }], {
+            series: {
+                lines: {
+                    show: true,
+                    lineWidth: 2,
+                    fill: true,
+                    fillColor: {
+                        colors: [{
+                            opacity: 0.05
+                        }, {
+                            opacity: 0.01
+                        }]
+                    }
+                },
+                points: {
+                    show: false
+                },
+                shadowSize: 2
+            },
+            grid: {
+                hoverable: true,
+                clickable: true,
+                tickColor: "#eee",
+                borderWidth: 0
+            },
+            colors: ["#d12610", "#37b7f3", "#52e136"],
+            xaxis: {
+                ticks: 11,
+                tickDecimals: 0
+            },
+            yaxis: {
+                ticks: 11,
+                tickDecimals: 0
+            }
+        });
+
+        function showTooltip(x, y, contents) {
+            $('<div id="tooltip">' + contents + '</div>').css({
+                position: 'absolute',
+                display: 'none',
+                top: y + 5,
+                left: x + 15,
+                border: '1px solid #333',
+                padding: '4px',
+                color: '#fff',
+                'border-radius': '3px',
+                'background-color': '#333',
+                opacity: 0.80
+            }).appendTo("body").fadeIn(200);
+        }
+        var previousPoint = null;
+        $("#placeholder-h1").bind("plothover", function (event, pos, item) {
+            $("#x").text(pos.x.toFixed(2));
+            $("#y").text(pos.y.toFixed(2));
+            if (item) {
+                if (previousPoint != item.dataIndex) {
+                    previousPoint = item.dataIndex;
+                    $("#tooltip").remove();
+                    var x = item.datapoint[0].toFixed(2),
+                        y = item.datapoint[1].toFixed(2);
+                    showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
+                }
+            } else {
+                $("#tooltip").remove();
+                previousPoint = null;
+            }
+        });
+    };
+    // function to initiate Chart 2
+    var runChart2 = function () {
+        var data_pie = [],
+            series = Math.floor(Math.random() * 6) + 3;
+        for (var i = 0; i < series; i++) {
+            data_pie[i] = {
+                label: "Series" + (i + 1),
+                data: Math.floor(Math.random() * 100) + 1
+            };
+        }
+        $.plot('#placeholder-h2', data_pie, {
+            series: {
+                pie: {
+                    show: true,
+                    radius: 1,
+                    tilt: 0.5,
+                    label: {
+                        show: true,
+                        radius: 1,
+                        formatter: labelFormatter,
+                        background: {
+                            opacity: 0.8
+                        }
+                    },
+                    combine: {
+                        color: '#999',
+                        threshold: 0.1
+                    }
+                }
+            },
+            legend: {
+                show: false
+            }
+        });
+
+        function labelFormatter(label, series) {
+            return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
+        }
+    };
+    // function to initiate Chart 3
+    var runChart3 = function () {
+        var data = [],
+            totalPoints = 300;
+
+        function getRandomData() {
+            if (data.length > 0)
+                data = data.slice(1);
+            // Do a random walk
+            while (data.length < totalPoints) {
+                var prev = data.length > 0 ? data[data.length - 1] : 50,
+                    y = prev + Math.random() * 10 - 5;
+                if (y < 0) {
+                    y = 0;
+                } else if (y > 100) {
+                    y = 100;
+                }
+                data.push(y);
+            }
+            // Zip the generated y values with the x values
+            var res = [];
+            for (var i = 0; i < data.length; ++i) {
+                res.push([i, data[i]]);
+            }
+            return res;
+        }
+        // Set up the control widget
+        var updateInterval = 30;
+        $("#updateInterval").val(updateInterval).change(function () {
+            var v = $(this).val();
+            if (v && !isNaN(+v)) {
+                updateInterval = +v;
+                if (updateInterval < 1) {
+                    updateInterval = 1;
+                } else if (updateInterval > 2000) {
+                    updateInterval = 2000;
+                }
+                $(this).val("" + updateInterval);
+            }
+        });
+        var plot = $.plot("#placeholder-h3", [getRandomData()], {
+            grid: {
+                borderWidth: 1,
+                borderColor: '#eeeeee'
+            },
+            series: {
+                shadowSize: 0 // Drawing is faster without shadows
+            },
+            yaxis: {
+                min: 0,
+                max: 100
+            },
+            xaxis: {
+                show: false
+            }
+        });
+
+        function update() {
+            plot.setData([getRandomData()]);
+            // Since the axes don't change, we don't need to call plot.setupGrid()
+            plot.draw();
+            setTimeout(update, updateInterval);
+        }
+        update();
+    };
+    // function to initiate Sparkline
+    var runSparkline = function () {
+        $(".sparkline_line_good span").sparkline("html", {
+            type: "line",
+            fillColor: "#B1FFA9",
+            lineColor: "#459D1C",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_line_bad span").sparkline("html", {
+            type: "line",
+            fillColor: "#FFC4C7",
+            lineColor: "#BA1E20",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_line_neutral span").sparkline("html", {
+            type: "line",
+            fillColor: "#CCCCCC",
+            lineColor: "#757575",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_bar_good span").sparkline('html', {
+            type: "bar",
+            barColor: "#459D1C",
+            barWidth: "5",
+            height: "24"
+        });
+        $(".sparkline_bar_bad span").sparkline('html', {
+            type: "bar",
+            barColor: "#BA1E20",
+            barWidth: "5",
+            height: "24"
+        });
+        $(".sparkline_bar_neutral span").sparkline('html', {
+            type: "bar",
+            barColor: "#757575",
+            barWidth: "5",
+            height: "24"
+        });
+    };
+    // function to initiate EasyPieChart
+    var runEasyPieChart = function () {
+        if (isIE8 || isIE9) {
+            if (!Function.prototype.bind) {
+                Function.prototype.bind = function (oThis) {
+                    if (typeof this !== "function") {
+                        // closest thing possible to the ECMAScript 5 internal IsCallable function
+                        throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+                    }
+                    var aArgs = Array.prototype.slice.call(arguments, 1),
+                        fToBind = this,
+                        fNOP = function () {}, fBound = function () {
+                            return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
+                        };
+                    fNOP.prototype = this.prototype;
+                    fBound.prototype = new fNOP();
+                    return fBound;
+                };
+            }
+        }
+        $('.easy-pie-chart .bounce').easyPieChart({
+            animate: 1000,
+            size: 70
+        });
+        $('.easy-pie-chart .cpu').easyPieChart({
+            animate: 1000,
+            lineWidth: 3,
+            barColor: '#35aa47',
+            size: 70
+            
+        });
+    };*/
+    // function to initiate Full Calendar
+    var runFullCalendar = function () {
+        //calendar
+        /* initialize the calendar
+		 -----------------------------------------------------------------*/
+        var $modal = $('#event-management');
+        $('#event-categories div.event-category').each(function () {
+            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
+            // it doesn't need to have a start or end
+            var eventObject = {
+                title: $.trim($(this).text()) // use the element's text as the event title
+            };
+            // store the Event Object in the DOM element so we can get to it later
+            $(this).data('eventObject', eventObject);
+            // make the event draggable using jQuery UI
+            $(this).draggable({
+                zIndex: 999,
+                revert: true, // will cause the event to go back to its
+                revertDuration: 50 //  original position after the drag
+            });
+        });
+        /* initialize the calendar
+		 -----------------------------------------------------------------*/
+        var date = new Date();
+        var d = date.getDate();
+        var m = date.getMonth();
+        var y = date.getFullYear();
+        var form = '';
+        var calendar = $('#calendar').fullCalendar({
+            buttonText: {
+                prev: '<i class="icon-chevron-left"></i>',
+                next: '<i class="icon-chevron-right"></i>'
+            },
+            header: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'month,agendaWeek,agendaDay'
+            },
+            events: [{
+                title: 'Meeting with Boss',
+                start: new Date(y, m, 1),
+                className: 'label-default'
+            }, {
+                title: 'Bootstrap Seminar',
+                start: new Date(y, m, d - 5),
+                end: new Date(y, m, d - 2),
+                className: 'label-teal'
+            }, {
+                title: 'Lunch with Nicole',
+                start: new Date(y, m, d - 3, 12, 0),
+                className: 'label-green',
+                allDay: false
+            }],
+            editable: true,
+            droppable: true, // this allows things to be dropped onto the calendar !!!
+            drop: function (date, allDay) { // this function is called when something is dropped
+                // retrieve the dropped element's stored Event Object
+                var originalEventObject = $(this).data('eventObject');
+                var $categoryClass = $(this).attr('data-class');
+                // we need to copy it, so that multiple events don't have a reference to the same object
+                var copiedEventObject = $.extend({}, originalEventObject);
+                // assign it the date that was reported
+                copiedEventObject.start = date;
+                copiedEventObject.allDay = allDay;
+                if ($categoryClass)
+                    copiedEventObject['className'] = [$categoryClass];
+                // render the event on the calendar
+                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
+                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
+                // is the "remove after drop" checkbox checked?
+                if ($('#drop-remove').is(':checked')) {
+                    // if so, remove the element from the "Draggable Events" list
+                    $(this).remove();
+                }
+            },
+            selectable: true,
+            selectHelper: true,
+            select: function (start, end, allDay) {
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                form = $("<form></form>");
+                form.append("<div class='row'></div>");
+                form.find(".row").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>New Event Name</label><input class='form-control' placeholder='Insert Event Name' type=text name='title'/></div></div>").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>").find("select[name='category']").append("<option value='label-default'>Work</option>").append("<option value='label-green'>Home</option>").append("<option value='label-purple'>Holidays</option>").append("<option value='label-orange'>Party</option>").append("<option value='label-yellow'>Birthday</option>").append("<option value='label-teal'>Generic</option>").append("<option value='label-beige'>To Do</option>");
+                $modal.find('.remove-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
+                    form.submit();
+                });
+                $modal.find('form').on('submit', function () {
+                    title = form.find("input[name='title']").val();
+                    $categoryClass = form.find("select[name='category'] option:checked").val();
+                    if (title !== null) {
+                        calendar.fullCalendar('renderEvent', {
+                                title: title,
+                                start: start,
+                                end: end,
+                                allDay: allDay,
+                                className: $categoryClass
+                            }, true // make the event "stick"
+                        );
+                    }
+                    $modal.modal('hide');
+                    return false;
+                });
+                calendar.fullCalendar('unselect');
+            },
+            eventClick: function (calEvent, jsEvent, view) {
+                var form = $("<form></form>");
+                form.append("<label>Change event name</label>");
+                form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success'><i class='icon-ok'></i> Save</button></span></div>");
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                $modal.find('.remove-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.remove-event').unbind('click').click(function () {
+                    calendar.fullCalendar('removeEvents', function (ev) {
+                        return (ev._id == calEvent._id);
+                    });
+                    $modal.modal('hide');
+                });
+                $modal.find('form').on('submit', function () {
+                    calEvent.title = form.find("input[type=text]").val();
+                    calendar.fullCalendar('updateEvent', calEvent);
+                    $modal.modal('hide');
+                    return false;
+                });
+            }
+        });
+    };
+    return {
+        init: function () {
+            /*runChart1();
+            runChart2();
+            runChart3();
+            runSparkline();
+            runEasyPieChart();*/
+            runFullCalendar();
+        }
+    };
+}();

assets/js/main.js

@@ -0,0 +1,526 @@
+// global variables
+var isIE8 = false;
+var isIE9 = false;
+var $windowWidth;
+var $windowHeight;
+var $pageArea;
+//Main Function
+var Main = function () {
+   //function to detect explorer browser and its version
+    var runInit = function () {
+        if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
+            var ieversion = new Number(RegExp.$1);
+            if (ieversion == 8) {
+                isIE8 = true;
+            } else if (ieversion == 9) {
+                isIE9 = true;
+            }
+        }
+    };
+    //function to adjust the template elements based on the window size
+    var runElementsPosition = function () {
+        $windowWidth = $(window).width();
+        $windowHeight = $(window).height();
+        $pageArea = $(window).height() - $('header').outerHeight() - $('.footer').outerHeight();
+        $('.sidebar-search input').removeAttr('style').removeClass('open');
+        $('.sidebar-fixed .wrap-menu').css('height', $pageArea);
+        runContainerHeight();
+    };
+    //function to adapt the Main Content height to the Main Navigation height 
+    var runContainerHeight = function () {
+        mainContainer = $('.main-content > .container');
+        mainNavigation = $('.main-navigation');
+        if (mainContainer.outerHeight() < mainNavigation.outerHeight()) {
+            mainContainer.css('min-height', mainNavigation.outerHeight());
+        } else {
+            mainContainer.css('min-height', '760px');
+        };
+    };
+    //function to activate the ToDo list, if present 
+    var runToDoAction = function () {
+        if ($(".todo-actions").length) {
+            $(".todo-actions").click(function () {
+                if ($(this).find("i").attr("class") == "icon-check-empty") {
+                    $(this).find("i").removeClass("icon-check-empty").addClass("icon-check");
+                    $(this).parent().find("span").css({
+                        opacity: .25
+                    });
+                    $(this).parent().find(".desc").css("text-decoration", "line-through");
+                } else {
+                    $(this).find("i").removeClass("icon-check").addClass("icon-check-empty");
+                    $(this).parent().find("span").css({
+                        opacity: 1
+                    });
+                    $(this).parent().find(".desc").css("text-decoration", "none");
+                }
+                return !1;
+            });
+        }
+    };
+    //function to activate the Tooltips, if present 
+    var runTooltips = function () {
+        if ($(".tooltips").length) {
+            $('.tooltips').tooltip();
+        }
+    };
+    //function to activate the Popovers, if present 
+    var runPopovers = function () {
+        if ($(".popovers").length) {
+            $('.popovers').popover();
+        }
+    };
+    //function to allow a button or a link to open a tab
+    var runShowTab = function () {
+        if ($(".show-tab").length) {
+            $('.show-tab').bind('click', function (e) {
+                e.preventDefault();
+                var tabToShow = $(this).attr("href");
+                if ($(tabToShow).length) {
+                    $('a[href="' + tabToShow + '"]').tab('show');
+                }
+            });
+        };
+        if (getParameterByName('tabId').length) {
+            $('a[href="#' + getParameterByName('tabId') + '"]').tab('show');
+        }
+    };
+    //function to extend the default settings of the Accordion
+    var runAccordionFeatures = function () {
+        if ($('.accordion').length) {
+            $('.accordion .panel-collapse').each(function () {
+                if (!$(this).hasClass('in')) {
+                    $(this).prev('.panel-heading').find('.accordion-toggle').addClass('collapsed');
+                }
+            });
+        }
+        $(".accordion").collapse().height('auto');
+        var lastClicked;
+        
+        $('.accordion .accordion-toggle').bind('click', function () {
+            currentTab = $(this);
+            $('html,body').animate({
+                scrollTop: currentTab.offset().top - 100
+            }, 1000);
+        });
+    };
+    //function to reduce the size of the Main Menu
+    var runNavigationToggler = function () {
+        $('.navigation-toggler').bind('click', function () {
+            if (!$('body').hasClass('navigation-small')) {
+                $('body').addClass('navigation-small');
+            } else {
+                $('body').removeClass('navigation-small');
+            };
+        });
+    };
+    //function to activate the panel tools
+    var runModuleTools = function () {
+        $('.panel-tools .panel-expand').bind('click', function (e) {
+            $('.panel-tools a').not(this).hide();
+            $('body').append('<div class="full-white-backdrop"></div>');
+            $('.main-container').removeAttr('style');
+            backdrop = $('.full-white-backdrop');
+            wbox = $(this).parents('.panel');
+            wbox.removeAttr('style');
+            if (wbox.hasClass('panel-full-screen')) {
+                backdrop.fadeIn(200, function () {
+                    $('.panel-tools a').show();
+                    wbox.removeClass('panel-full-screen');
+                    backdrop.fadeOut(200, function () {
+                        backdrop.remove();
+                    });
+                });
+            } else {
+                $('body').append('<div class="full-white-backdrop"></div>');
+                backdrop.fadeIn(200, function () {
+                    $('.main-container').css({
+                        'max-height': $(window).outerHeight() - $('header').outerHeight() - $('.footer').outerHeight() - 100,
+                        'overflow': 'hidden'
+                    });
+                    backdrop.fadeOut(200);
+                    backdrop.remove();
+                    wbox.addClass('panel-full-screen').css({
+                        'max-height': $(window).height(),
+                        'overflow': 'auto'
+                    });;
+                });
+            }
+        });
+        $('.panel-tools .panel-close').bind('click', function (e) {
+            $(this).parents(".panel").remove();
+            e.preventDefault();
+        });
+        $('.panel-tools .panel-refresh').bind('click', function (e) {
+            var el = $(this).parents(".panel");
+            el.block({
+                overlayCSS: {
+                    backgroundColor: '#fff'
+                },
+                message: '<img src="assets/images/loading.gif" /> Just a moment...',
+                css: {
+                    border: 'none',
+                    color: '#333',
+                    background: 'none'
+                }
+            });
+            window.setTimeout(function () {
+                el.unblock();
+            }, 1000);
+            e.preventDefault();
+        });
+        $('.panel-tools .panel-collapse').bind('click', function (e) {
+            e.preventDefault();
+            var el = jQuery(this).parent().closest(".panel").children(".panel-body");
+            if ($(this).hasClass("collapses")) {
+                $(this).addClass("expand").removeClass("collapses");
+                el.slideUp(200);
+            } else {
+                $(this).addClass("collapses").removeClass("expand");
+                el.slideDown(200);
+            }
+        });
+    };
+   //function to activate the 3rd and 4th level menus
+    var runNavigationMenu = function () {
+        $('.main-navigation-menu li.active').addClass('open');
+        $('.main-navigation-menu > li a').bind('click', function () {
+            if ($(this).parent().children('ul').hasClass('sub-menu') && (!$('body').hasClass('navigation-small') || !$(this).parent().parent().hasClass('main-navigation-menu'))) {
+                if (!$(this).parent().hasClass('open')) {
+                    $(this).parent().addClass('open');
+                    $(this).parent().parent().children('li.open').not($(this).parent()).not($('.main-navigation-menu > li.active')).removeClass('open').children('ul').slideUp(200);
+                    $(this).parent().children('ul').slideDown(200, function () {
+                        runContainerHeight();
+                    });
+                } else {
+                    if (!$(this).parent().hasClass('active')) {
+                        $(this).parent().parent().children('li.open').not($('.main-navigation-menu > li.active')).removeClass('open').children('ul').slideUp(200, function () {
+                            runContainerHeight();
+                        });
+                    } else {
+                        $(this).parent().parent().children('li.open').removeClass('open').children('ul').slideUp(200, function () {
+                            runContainerHeight();
+                        });
+                    }
+                }
+            }
+        });
+    };
+    //function to activate the Go-Top button
+    var runGoTop = function () {
+        $('.go-top').bind('click', function (e) {
+            $("html, body").animate({
+                scrollTop: 0
+            }, "slow");
+            e.preventDefault();
+        });
+    };
+    //function to avoid closing the dropdown on click 
+    var runDropdownEnduring = function () {
+        if ($('.dropdown-menu.dropdown-enduring').length) {
+            $('.dropdown-menu.dropdown-enduring').click(function (event) {
+                event.stopPropagation();
+            });
+        }
+    };
+    //function to return the querystring parameter with a given name.
+    var getParameterByName = function (name) {
+        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
+        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+            results = regex.exec(location.search);
+        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
+    };
+    //function to activate the iCheck Plugin 
+    var runCustomCheck = function () {
+        if ($('input[type="checkbox"]').length || $('input[type="radio"]').length) {
+            $('input[type="checkbox"].grey, input[type="radio"].grey').iCheck({
+                checkboxClass: 'icheckbox_minimal-grey',
+                radioClass: 'iradio_minimal-grey',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].red, input[type="radio"].red').iCheck({
+                checkboxClass: 'icheckbox_minimal-red',
+                radioClass: 'iradio_minimal-red',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].green, input[type="radio"].green').iCheck({
+                checkboxClass: 'icheckbox_minimal-green',
+                radioClass: 'iradio_minimal-green',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].teal, input[type="radio"].teal').iCheck({
+                checkboxClass: 'icheckbox_minimal-aero',
+                radioClass: 'iradio_minimal-aero',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].orange, input[type="radio"].orange').iCheck({
+                checkboxClass: 'icheckbox_minimal-orange',
+                radioClass: 'iradio_minimal-orange',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].purple, input[type="radio"].purple').iCheck({
+                checkboxClass: 'icheckbox_minimal-purple',
+                radioClass: 'iradio_minimal-purple',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].yellow, input[type="radio"].yellow').iCheck({
+                checkboxClass: 'icheckbox_minimal-yellow',
+                radioClass: 'iradio_minimal-yellow',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].square-black, input[type="radio"].square-black').iCheck({
+                checkboxClass: 'icheckbox_square',
+                radioClass: 'iradio_square',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].square-grey, input[type="radio"].square-grey').iCheck({
+                checkboxClass: 'icheckbox_square-grey',
+                radioClass: 'iradio_square-grey',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].square-red, input[type="radio"].square-red').iCheck({
+                checkboxClass: 'icheckbox_square-red',
+                radioClass: 'iradio_square-red',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].square-green, input[type="radio"].square-green').iCheck({
+                checkboxClass: 'icheckbox_square-green',
+                radioClass: 'iradio_square-green',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].square-teal, input[type="radio"].square-teal').iCheck({
+                checkboxClass: 'icheckbox_square-aero',
+                radioClass: 'iradio_square-aero',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].square-orange, input[type="radio"].square-orange').iCheck({
+                checkboxClass: 'icheckbox_square-orange',
+                radioClass: 'iradio_square-orange',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].square-purple, input[type="radio"].square-purple').iCheck({
+                checkboxClass: 'icheckbox_square-purple',
+                radioClass: 'iradio_square-purple',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].square-yellow, input[type="radio"].square-yellow').iCheck({
+                checkboxClass: 'icheckbox_square-yellow',
+                radioClass: 'iradio_square-yellow',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].flat-black, input[type="radio"].flat-black').iCheck({
+                checkboxClass: 'icheckbox_flat',
+                radioClass: 'iradio_flat',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
+                checkboxClass: 'icheckbox_flat-grey',
+                radioClass: 'iradio_flat-grey',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
+                checkboxClass: 'icheckbox_flat-red',
+                radioClass: 'iradio_flat-red',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].flat-green, input[type="radio"].flat-green').iCheck({
+                checkboxClass: 'icheckbox_flat-green',
+                radioClass: 'iradio_flat-green',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].flat-teal, input[type="radio"].flat-teal').iCheck({
+                checkboxClass: 'icheckbox_flat-aero',
+                radioClass: 'iradio_flat-aero',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].flat-orange, input[type="radio"].flat-orange').iCheck({
+                checkboxClass: 'icheckbox_flat-orange',
+                radioClass: 'iradio_flat-orange',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].flat-purple, input[type="radio"].flat-purple').iCheck({
+                checkboxClass: 'icheckbox_flat-purple',
+                radioClass: 'iradio_flat-purple',
+                increaseArea: '10%' // optional
+            });
+            $('input[type="checkbox"].flat-yellow, input[type="radio"].flat-yellow').iCheck({
+                checkboxClass: 'icheckbox_flat-yellow',
+                radioClass: 'iradio_flat-yellow',
+                increaseArea: '10%' // optional
+            });
+        };
+    };
+    //Search Input function
+    var runSearchInput = function () {
+        var search_input = $('.sidebar-search input');
+        var search_button = $('.sidebar-search button');
+        var search_form = $('.sidebar-search');
+        search_input.attr('data-default', $(search_input).outerWidth()).focus(function () {
+            $(this).animate({
+                width: 200
+            }, 200);
+        }).blur(function () {
+            if ($(this).val() == "") {
+                if ($(this).hasClass('open')) {
+                    $(this).animate({
+                        width: 0,
+                        opacity: 0
+                    }, 200, function () {
+                        $(this).hide();
+                    });
+                } else {
+                    $(this).animate({
+                        width: $(this).attr('data-default')
+                    }, 200);
+                }
+            }
+        });
+        search_button.bind('click', function () {
+            if ($(search_input).is(':hidden')) {
+                $(search_input).addClass('open').css({
+                    width: 0,
+                    opacity: 0
+                }).show().animate({
+                    width: 200,
+                    opacity: 1
+                }, 200).focus();
+            } else if ($(search_input).hasClass('open') && $(search_input).val() == '') {
+                $(search_input).removeClass('open').animate({
+                    width: 0,
+                    opacity: 0
+                }, 200, function () {
+                    $(this).hide();
+                });
+            } else if ($(search_input).val() != '') {
+                return;
+            } else $(search_input).focus();
+            return false;
+        });
+    };
+    //Set of functions for Style Selector
+    var runStyleSelector = function () {
+        $('#style_selector select').each(function () {
+            $(this).find('option:first').attr('selected', 'selected');
+        });
+        $('.style-toggle').bind('click', function () {
+            if ($(this).hasClass('open')) {
+                $(this).removeClass('open').addClass('close');
+                $('#style_selector_container').hide();
+            } else {
+                $(this).removeClass('close').addClass('open');
+                $('#style_selector_container').show();
+            }
+        });
+        setColorScheme();
+        setLayoutStyle();
+        setHeaderStyle();
+        setFooterStyle();
+        setBoxedBackgrounds();
+    };
+    $('.drop-down-wrapper').perfectScrollbar({
+        wheelSpeed: 50,
+        minScrollbarLength: 20
+    });
+    $('.navbar-tools .dropdown').on('shown.bs.dropdown', function () {
+        $(this).find('.drop-down-wrapper').scrollTop(0).perfectScrollbar('update');
+    });
+    var setColorScheme = function () {
+        $('.icons-color a').bind('click', function () {
+            $('.icons-color img').each(function () {
+                $(this).removeClass('active');
+            });
+            $(this).find('img').addClass('active');
+            $('#skin_color').attr("href", "assets/css/theme_" + $(this).attr('id') + ".css");
+        });
+    };
+    var setBoxedBackgrounds = function () {
+        $('.boxed-patterns a').bind('click', function () {
+            if ($('body').hasClass('layout-boxed')) {
+                var classes = $('body').attr("class").split(" ").filter(function (item) {
+                    return item.indexOf("bg_style_") === -1 ? item : "";
+                });
+                $('body').attr("class", classes.join(" "));
+                $('.boxed-patterns img').each(function () {
+                    $(this).removeClass('active');
+                });
+                $(this).find('img').addClass('active');
+                $('body').addClass($(this).attr('id'));
+            } else {
+                alert('Select boxed layout');
+            }
+        });
+    };
+    var setLayoutStyle = function () {
+        $('select[name="layout"]').change(function () {
+            if ($('select[name="layout"] option:selected').val() == 'boxed')
+                $('body').addClass('layout-boxed');
+            else
+                $('body').removeClass('layout-boxed');
+        });
+    };
+    var setHeaderStyle = function () {
+        $('select[name="header"]').change(function () {
+            if ($('select[name="header"] option:selected').val() == 'default')
+                $('body').addClass('header-default');
+            else
+                $('body').removeClass('header-default');
+        });
+    };
+    var setFooterStyle = function () {
+        $('select[name="footer"]').change(function () {
+            if ($('select[name="footer"] option:selected').val() == 'fixed')
+                $('body').addClass('footer-fixed');
+            else
+                $('body').removeClass('footer-fixed');
+        });
+    };
+    var debounce = function (func, threshold, execAsap) {
+        var timeout;
+        return function debounced() {
+            var obj = this,
+                args = arguments;
+
+            function delayed() {
+                if (!execAsap)
+                    func.apply(obj, args);
+                timeout = null;
+            };
+            if (timeout)
+                clearTimeout(timeout);
+            else if (execAsap)
+                func.apply(obj, args);
+            timeout = setTimeout(delayed, threshold || 50);
+        };
+    };
+    //Window Resize Function
+    var runWIndowResize = function (func, threshold, execAsap) {
+        //wait until the user is done resizing the window, then execute
+        $(window).resize = debounce(function (e) {
+            runElementsPosition();
+        }, 50, false);
+        $('.panel-scroll').perfectScrollbar({
+            wheelSpeed: 50,
+            minScrollbarLength: 20
+        });
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runWIndowResize();
+            runInit();
+            runStyleSelector();
+            runSearchInput();
+            runElementsPosition();
+            runToDoAction();
+            runNavigationToggler();
+            runNavigationMenu();
+            runGoTop();
+            runModuleTools();
+            runDropdownEnduring();
+            runTooltips();
+            runPopovers();
+            runShowTab();
+            runAccordionFeatures();
+            runCustomCheck();
+        }
+    };
+}();

assets/js/maps.js

@@ -0,0 +1,135 @@
+var Maps = function () {
+    //function to initiate GMaps
+    //Gmaps.js allows you to use the potential of Google Maps in a simple way.
+    //For more information, please visit http://hpneo.github.io/gmaps/documentation.html
+    var runMaps = function () {
+        // Basic Map 
+        map = new GMaps({
+            el: '#map1',
+            lat: -12.043333,
+            lng: -77.028333
+        });
+        //Markers
+        map2 = new GMaps({
+            div: '#map2',
+            lat: -12.043333,
+            lng: -77.028333
+        });
+        map2.addMarker({
+            lat: -12.043333,
+            lng: -77.03,
+            title: 'Lima',
+            details: {
+                database_id: 42,
+                author: 'HPNeo'
+            },
+            click: function (e) {
+                if (console.log)
+                    console.log(e);
+                alert('You clicked in this marker');
+            }
+        });
+        map2.addMarker({
+            lat: -12.042,
+            lng: -77.028333,
+            title: 'Marker with InfoWindow',
+            height: '200px',
+            infoWindow: {
+                content: '<p>HTML Content</p>'
+            }
+        });
+        //Street View 
+        panorama = GMaps.createPanorama({
+            el: '#map3',
+            lat: 42.3455,
+            lng: -71.0983
+        });
+        //Search Address
+        map = new GMaps({
+            div: '#map4',
+            lat: -12.043333,
+            lng: -77.028333
+        });
+        $('#geocoding_form').submit(function (e) {
+            e.preventDefault();
+            GMaps.geocode({
+                address: $('#address').val().trim(),
+                callback: function (results, status) {
+                    if (status == 'OK') {
+                        var latlng = results[0].geometry.location;
+                        map.setCenter(latlng.lat(), latlng.lng());
+                        map.addMarker({
+                            lat: latlng.lat(),
+                            lng: latlng.lng()
+                        });
+                    }
+                }
+            });
+        });
+        //Interacting
+        var map;
+        // Update position
+        $(document).on('submit', '.edit_marker', function (e) {
+            e.preventDefault();
+            var $index = $(this).data('marker-index');
+            $lat = $('#marker_' + $index + '_lat').val();
+            $lng = $('#marker_' + $index + '_lng').val();
+            var template = $('#edit_marker_template').text();
+            // Update form values
+            var content = template.replace(/{{index}}/g, $index).replace(/{{lat}}/g, $lat).replace(/{{lng}}/g, $lng);
+            map.markers[$index].setPosition(new google.maps.LatLng($lat, $lng));
+            map.markers[$index].infoWindow.setContent(content);
+            $marker = $('#markers-with-coordinates').find('li').eq(0).find('a');
+            $marker.data('marker-lat', $lat);
+            $marker.data('marker-lng', $lng);
+        });
+        // Update center
+        $(document).on('click', '.pan-to-marker', function (e) {
+            e.preventDefault();
+            var lat, lng;
+            var $index = $(this).data('marker-index');
+            var $lat = $(this).data('marker-lat');
+            var $lng = $(this).data('marker-lng');
+            if ($index != undefined) {
+                // using indices
+                var position = map.markers[$index].getPosition();
+                lat = position.lat();
+                lng = position.lng();
+            } else {
+                // using coordinates
+                lat = $lat;
+                lng = $lng;
+            }
+            map.setCenter(lat, lng);
+        });
+        map = new GMaps({
+            div: '#map5',
+            lat: -12.043333,
+            lng: -77.028333
+        });
+        GMaps.on('marker_added', map, function (marker) {
+            $('#map-ui').append('<tr><td><a href="#" class="pan-to-marker" data-marker-index="' + map.markers.indexOf(marker) + '">' + marker.title + '</a></td><td><a href="#" class="pan-to-marker" data-marker-lat="' + marker.getPosition().lat() + '" data-marker-lng="' + marker.getPosition().lng() + '">' + marker.title + '</a></td></tr>');
+        });
+        GMaps.on('click', map.map, function (event) {
+            var index = map.markers.length;
+            var lat = event.latLng.lat();
+            var lng = event.latLng.lng();
+            var template = $('#edit_marker_template').text();
+            var content = template.replace(/{{index}}/g, index).replace(/{{lat}}/g, lat).replace(/{{lng}}/g, lng);
+            map.addMarker({
+                lat: lat,
+                lng: lng,
+                title: 'Marker #' + index,
+                infoWindow: {
+                    content: content
+                }
+            });
+        });
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runMaps();
+        }
+    };
+}();

assets/js/mhs/_dashboard.php

@@ -0,0 +1,69 @@
+<link rel="stylesheet" href="../assets/plugins/fullcalendar/fullcalendar/fullcalendar.css" />
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+
+<script src="../assets/plugins/fullcalendar/fullcalendar/fullcalendar.js"></script> 
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+		/*Index.init();*/
+		var date = new Date();
+        var d = date.getDate();
+        var m = date.getMonth();
+        var y = date.getFullYear();
+		$('#calendar').fullCalendar({
+            editable: true,
+            header: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'month'
+            },
+            events: "page/dashboard/json.kalender.php",
+           // Convert the allDay from string to boolean
+            eventRender: function(event, element, view) {
+                if (event.allDay === 'true') {
+                    event.allDay = true;
+                } else {
+                    event.allDay = false;
+                }
+            },
+            selectable: true,
+            selectHelper: true,
+            eventClick: function (calEvent, jsEvent, view) {
+                //alert(calEvent.id);
+                $("#JadwalDetail").modal('show');
+                $.ajax({
+                    url:'page/dashboard/act.dashboard.php',
+                    dataType:'json',
+                    type:'post',
+                    cache:false,
+                    data:'act=detailjadwal&id='+calEvent.id,
+                    beforeSend:function(){
+                        $("#tbjadwal").hide();
+                    },
+                    success:function(json){
+                        if(json.result){
+                            $("#tbjadwal").show();
+                            $("#nama").html(json.nama+" ("+json.nim+")");
+                            $("#jenis").html(json.jenis);
+                            $("#judul").html(json.judul);
+                            $("#tgl").html(json.tgl+" "+json.wkt);
+                            $("#ruangan").html(json.ruangan);
+                            $("#pembimbing1").html(json.pemb1);
+                            $("#pembimbing2").html(json.pemb2);
+                            $("#penguji1").html(json.peng1);
+                            $("#penguji2").html(json.peng2);
+                            $("#JadwalDetail").modal('show');                           
+                        }else{
+                            alert(json.msg);
+                        }
+                    }
+                });
+                return false;
+            }          
+        });
+           $('#modalPengumuman').modal('show');
+	});
+</script>

assets/js/mhs/_outline.php

@@ -0,0 +1,446 @@
+<link rel="stylesheet" href="../assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css">
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+<script src="../assets/plugins/bootstrap-daterangepicker/moment.min.js"></script>
+<script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
+<script src="../assets/js/form-elements.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script>
+	let jadwalSidang = false;
+	<?php
+        if (isset($_GET['menu'])) {
+            $getMenu = $_GET['menu'];
+            if ($getMenu == 'jadwal_sidang') {
+                echo 'jadwalSidang = true;';
+            }
+        }
+
+    ?>
+	jQuery(document).ready(function() {
+		Main.init();
+		
+		//function to initiate daterangepicker
+		$('.date-range').daterangepicker();
+		
+		$("#tambah_diskusi").validate({
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			rules:{
+                pemb:{
+                    required:true
+                },
+                stta:{
+                    required:true
+                },
+                bab:{
+                    required:true
+                },
+                sub:{
+                    required:true
+                }
+            },
+            messages:{
+                 pemb:{
+                    required:"Silakan Pilih Dosen Pembimbing."
+                },
+                stta:{
+                    required:"Silakan Pilih Status Tugas Akhir."
+                },
+                bab:{
+                    required:"Silakan Pilih BAB Bahasan."
+                },
+                sub:{
+                    required:"Silakan Inputkan Sub Bahasan."
+                }
+            },
+			submitHandler:function(form){
+				$.ajax({
+					url:'page/outline/act.outline.php',
+					dataType:'json',
+					type:'POST',
+					data:$("#tambah_diskusi").serialize(),
+					cache:false,
+					success:function(json){
+						if(json.result){
+							$.gritter.add({
+								title:'Sukses',
+				                time: 1000,
+				                text: json.msg,
+				                after_close: function(){
+									location.href="?page=outline&menu=list";
+								}
+				            });
+						}else{
+							$.gritter.add({
+								title:'Kesalahan',
+				                time: 1000,
+				                text: json.msg
+				            });
+						}
+						
+					}
+				});
+			}
+		});
+
+		$("#post_review").validate({ //
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			submitHandler:function(form){
+				for ( instance in CKEDITOR.instances )
+				    {
+				        CKEDITOR.instances[instance].updateElement();
+				    }
+
+				if(window.FormData !== undefined)  // for HTML5 browsers
+				{
+					var formData = new FormData(document.getElementById("post_review"));
+					$.ajax({
+						url:'page/outline/act.outline.php',
+						type:'POST',
+						data:formData,
+						dataType:'json',
+						mimeType:'multipart/form-data',
+						contentType: false,
+				    	cache: false,
+						processData:false,
+						beforeSend:function(){
+							$("#loading").show();
+						},
+						success:function(json){
+							if(json.result){
+								$("#loading").hide();
+								$.gritter.add({
+									title:'Sukses',
+					                time: 1000,
+					                text: json.msg,
+					                after_close: function(){
+										// location.href="?page=outline&menu=list";
+										location.reload();
+									}
+					            });
+							}else{
+								$("#loading").hide();
+								$.gritter.add({
+									title:'Kesalahan',
+					                time: 4000,
+					                text: json.msg
+					            });
+							}
+						}
+					});
+
+
+				}else{  //for olden browsers
+				
+					var  iframeId = "unique" + (new Date().getTime());
+					var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
+					iframe.hide();
+					form.attr("target",iframeId);
+					iframe.appendTo("body");
+					iframe.load(function(e){
+						var doc = getDoc(iframe[0]);
+						var docRoot = doc.body ? doc.body : doc.documentElement;
+						var data = docRoot.innerHTML;
+					});
+				}
+			}
+		});
+
+		$("#post_jadwal").validate({
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			rules:{
+                pemb1:{
+                    required:true
+                },
+                pemb2:{
+                    required:true
+                },
+                peng1:{
+                    required:true
+                },
+                peng2:{
+                    required:true
+                }
+            },
+            messages:{
+                 pemb1:{
+                    required:"Silakan Inputkan Nama Pembimbing 1."
+                },
+                pemb2:{
+                    required:"Silakan Inputkan Nama Pembimbing 2."
+                },
+                peng1:{
+                    required:"Silakan Inputkan Nama Penguji 1."
+                },
+                peng2:{
+                    required:"Silakan Inputkan Nama Penguji 2."
+                }
+            },
+			submitHandler:function(form){
+				$.ajax({
+					url:'page/outline/act.outline.php',
+					dataType:'json',
+					type:'POST',
+					data:$("#post_jadwal").serialize(),
+					cache:false,
+					success:function(json){
+						if(json.result){
+							$.gritter.add({
+								title:'Sukses',
+				                time: 1000,
+				                text: json.msg,
+				                after_close: function(){
+									location.reload();
+								}
+				            });
+						}else{
+							$.gritter.add({
+								title:'Kesalahan',
+				                time: 1000,
+				                text: json.msg
+				            });
+						}
+						
+					}
+				});
+			}
+		});
+	});
+	
+	CKEDITOR.disableAutoInline = true;
+	$('textarea.ckeditor').ckeditor({
+		height:240
+	});	
+
+	function refreshTabelBerkas(){
+			let url = `../steven/API/getBerkasSidangMahasiswa.php?idRekapHasil=${currentIdRekap}&jenis=Sidang`;
+
+			$('#isiTabelBerkas').html('<tr><td colspan="4" style="text-align:center">Mengambil Data . . .</td></tr>');
+
+			$.ajax({
+            url: url,
+            type:'GET',
+            dataType:'json',
+            contentType: false,
+            cache: false,
+            processData:false,
+            beforeSend:function(){
+           //     $("#loading").show();
+            },
+            success:function(json){
+                const data = json.data;
+				
+				let isiTabel = ``;
+				let no = 1;
+				for (var key in data) {
+					if (data.hasOwnProperty(key)){
+						const berkas = data[key];
+						const judul = berkas.judul;
+						const dataBerkas = berkas.data;
+
+						let adaBerkas = true;
+						if(dataBerkas == undefined || dataBerkas == null){
+							adaBerkas= false;
+						}else{
+							if(dataBerkas.file == null || dataBerkas.file == ""){
+								adaBerkas = false;
+							}
+						}
+						
+						if(adaBerkas){
+							const verifikasiAdmin = Number(dataBerkas.status);
+							if(verifikasiAdmin == 1){
+								isiTabel += `<tr><td>${no}</td><td>${judul}</td><td></td><td>${getLabelStatusBerkas(dataBerkas.status)}</td><td><a href="${dataBerkas.file}" target="_blank"><button class="btn btn-primary">Lihat File</button></a></td></tr>`; 
+							}else{
+								isiTabel += `<tr><td>${no}</td><td>${judul}</td><td><input type="file" class="fileBerkas" data-nama="${key}"></td><td>${getLabelStatusBerkas(dataBerkas.status)}</td><td><a href="${dataBerkas.file}" target="_blank"><button class="btn btn-primary">Lihat File</button></a></td></tr>`; 
+							}
+						}else{
+							isiTabel += `<tr><td>${no}</td><td>${judul}</td><td><input type="file" class="fileBerkas" data-nama="${key}"></td><td><span class="label label-default">Belum Diupload</span></td><td></td></tr>`;
+						}
+						no++;
+					}
+				}
+
+				$('#isiTabelBerkas').html(isiTabel);
+            }
+        });
+	  }
+	  
+	  function getLabelStatusBerkas(verifikasiAdmin){
+		verifikasiAdmin = Number(verifikasiAdmin);
+		switch(verifikasiAdmin){
+			case 0 : return `<span class="label label-warning">Belum diverifikasi</span>`;
+			case 1 : return `<span class="label label-success">OK</span>`;
+		}
+	  }
+
+	  function uploadBerkasSidangOld(){
+		let formData = new FormData();
+		let listKeyFile = [];
+		$(`.fileBerkas`).each(function(i, obj) {
+			const file = $(this)[0].files[0];
+			if(file != undefined && file != null){
+				const nama = $(this).attr("data-nama");
+				formData.append(nama, file);
+				listKeyFile.push(nama);
+			}
+		});
+
+		formData.append("listKey", JSON.stringify(listKeyFile));
+	
+		$.ajax({
+				url:`../steven/API/postBerkasSidangMahasiswa.php?idRekapHasil=${currentIdRekap}`,
+				type:'POST',
+				data:formData,
+				dataType:'json',
+				mimeType:'multipart/form-data',
+				contentType: false,
+				cache: false,
+				processData:false,
+				beforeSend:function(){
+					$("#loading").show();
+				},
+				success:function(json){
+					if(json.status){
+						$("#loading").hide();
+						$.gritter.add({
+							title:'Sukses',
+							time: 1000,
+							text: json.msg,
+							after_close: function(){
+								refreshTabelBerkas();
+							}
+						});
+					}else{
+						$("#loading").hide();
+						$.gritter.add({
+							title:'Kesalahan',
+							time: 4000,
+							text: json.msg
+						});
+					}
+				}
+			});
+	  }
+
+	  async function uploadBerkasSidang(){
+		$('#btnUploadBerkas').hide();
+		$('#loaderBerkas').html(`Tunggu sebentar`);
+
+		let listKeyFile = [];
+		let listFormData = [];
+		$(`.fileBerkas`).each(function(i, obj) {
+			const file = $(this)[0].files[0];
+			if(file != undefined && file != null){
+				const nama = $(this).attr("data-nama");
+				let formData = new FormData();
+				formData.append("file_gdrive", file);
+				formData.append("nim", nimMhs);
+				formData.append("folderMhs", "Sidang Akhir");
+				formData.append("nama", nama);
+
+				listFormData.push(formData);
+			}
+		});
+
+		for(let i = 0; i < listFormData.length; i++){
+			const res = await uploadKeDrive(listFormData[i]);
+			const nama = listFormData[i].get("nama");
+			const no = i + 1;
+			$('#loaderBerkas').html(`Mengupload ${no} dari ${listFormData.length} berkas`);
+
+			try{
+				if(res.status == 1){	
+					listKeyFile.push({
+						'nama' : nama,
+						'file' : res.fileId,
+					});
+
+					
+				}
+			}catch(err){
+
+			}
+		}
+
+		let formDataNew = new FormData();
+		formDataNew.append("data", JSON.stringify(listKeyFile));
+	
+		$('#loaderBerkas').html(`Menyimpan data`);
+
+		$.ajax({
+				url:`../steven/API/postBerkasSidangMahasiswaNew.php?idRekapHasil=${currentIdRekap}&jenis=Sidang`,
+				type:'POST',
+				data:formDataNew,
+				dataType:'json',
+				mimeType:'multipart/form-data',
+				contentType: false,
+				cache: false,
+				processData:false,
+				beforeSend:function(){
+					//$("#loading").show();
+				},
+				success:function(json){
+					if(json.status){
+						$.gritter.add({
+							title:'Sukses',
+							time: 1000,
+							text: json.msg,
+							after_close: function(){
+								refreshTabelBerkas();
+							}
+						});
+						$('#btnUploadBerkas').show();
+						$('#loaderBerkas').html(``);
+					}else{		
+						$.gritter.add({
+							title:'Kesalahan',
+							time: 4000,
+							text: json.msg
+						});
+						
+						$('#btnUploadBerkas').show();
+						$('#loaderBerkas').html(``);
+					}
+				},
+				error: function (jqXHR, exception) {
+					$('#btnUploadBerkas').show();
+					$('#loaderBerkas').html(``);
+
+					$.gritter.add({
+							title:'Kesalahan',
+							time: 4000,
+							text: jqXHR.responseText
+						});
+				}
+			});
+	  }
+
+	  async function uploadKeDrive(formData){
+		const resAjax = await $.ajax({
+				url:`http://203.24.50.140:8080`,
+				type:'POST',
+				data:formData,
+				dataType:'json',
+				mimeType:'multipart/form-data',
+				contentType: false,
+				cache: false,
+				processData:false
+			});
+
+			return resAjax;
+		}
+
+
+	  if(jadwalSidang){
+		refreshTabelBerkas();
+	  }
+
+</script>

assets/js/mhs/_penawaran.php

@@ -0,0 +1,247 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />
+<!-- <link rel="stylesheet" href="../assets/plugins/ckeditor/contents.css"> -->
+<!-- <link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/> -->
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+<link rel="stylesheet" href="../assets/plugins/jQuery-Tags-Input/jquery.tagsinput.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script src="../assets/plugins/jQuery-Tags-Input/jquery.tagsinput.min.js"></script>
+
+<script>
+    let listDataPenawaran = [];
+    
+	jQuery(document).ready(function() {
+		Main.init();
+    
+		$('#list-judul_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#list-judul_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#list-judul_wrapper .dataTables_length select').select2();
+
+        // $('#kep-draft-praoutline').dataTable({
+		// 	"iDisplayLength": 10,
+		// 	"aLengthMenu": [
+        //         [10, 15, 20, 50, 100, -1],
+        //         [10, 15, 20, 50, 100, "All"] // change per page values here
+        //     ],
+		// 	"bProcessing": true,
+		// 	"bServerSide": true,
+		// 	"bSort": false,
+		// 	"sAjaxSource": "page/praoutline/list.kep.draft.praoutline.php",
+		// 	"oLanguage": {
+	    //         "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	    //         "sZeroRecords": "Maaf, Data tidak ada",
+	    //         "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	    //         "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	    //         "sSearch": "",
+	    //         "sInfoFiltered": "",
+	    //         "oPaginate": {
+        //             "sPrevious": "",
+        //             "sNext": ""
+        //         }
+	    //     }
+		// });
+
+		// $('#kep-draft-praoutline_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        // $('#kep-draft-praoutline_wrapper .dataTables_length select').addClass("m-wrap small");
+        // $('#kep-draft-praoutline_wrapper .dataTables_length select').select2();
+    
+    	refreshTabelPenawaranJudul(true);
+  
+	});
+
+
+	function refreshTabelPenawaranJudul(first = false){
+		const status = $('#statusPenawaranJudul').val();
+	    const kk = $('#kkPenawaranJudul').val();
+	    
+	    document.getElementById('contentTabel').innerHTML = buatTabelPenawaranJudulSaya(`<tr><td colspan="9" style="text-align:center">Mengambil Data . . .</td></tr>`);
+	 
+		const url = `API/list.data.judul.php?status=${status}&kk=${kk}`;
+		
+		$.ajax({
+            url: url,
+            type:'GET',
+            dataType:'json',
+            contentType: false,
+            cache: false,
+            processData:false,
+            beforeSend:function(){
+           //     $("#loading").show();
+            },
+            success:function(json){
+                const data = json;
+                 if(data.length == 0){
+                    document.getElementById('contentTabel').innerHTML = buatTabelPenawaranJudulSaya(`<tr><td colspan="9" style="text-align:center">Tidak ada data.</td></tr>`);
+                }else{
+                
+                    let isiTabel = ``;
+                    let no = 1;
+                
+                    for(let i = 0; i < data.length; i++){
+                        const d = data[i];
+                        listDataPenawaran[d.id] = d;
+                        
+                        let identitasMahasiswa = '-';
+                        if(d.nama != null){
+                            identitasMahasiswa = `${d.nama} / ${d.nim}`;
+                        }
+                        
+                        let sudahDiambil = true;
+                        let tglHangus = d.hangus;
+                        let ditolak = false;
+                        
+                        if(d.status == null || d.status == 2){
+                            sudahDiambil = false;
+                            tglHangus = '';
+                            
+                            if(d.status == 2){
+                                ditolak = true;
+                            }
+                        }
+                    
+                        if(d.status == 1){
+                            tglHangus = '';
+                        }
+                        
+                        let btnVerif = `<a role="menuitem" tabindex="-1" href="?page=penawaran&act=ambil&id=${d.id}" >
+        									<button class="btn btn-success">Booking</button>
+        								</a>`;
+        				let labelStatus = `<label class="btn btn-primary">Belum Diambil</label>`;				
+        								
+                        if(sudahDiambil){
+                        labelStatus = `<label class="btn btn-success">Sudah Diambil</label>`;
+                        btnVerif = `<a role="menuitem" tabindex="-1" href="?page=penawaran&act=lihat&id=${d.id}" >
+        								<button class="btn btn-primary">Lihat</button>
+        							</a>`;
+                        }
+                       
+                       /** 
+                        if(ditolak){
+                            labelStatus = `<label class="btn btn-danger">Ditolak Oleh Dosen</label>`;
+                        }
+                        */
+                        
+                        isiTabel += `<tr>
+                                        <td>${no}</td>
+                                        <td>${d.judul}</td>
+                                        <td>${d.deskripsi}</td>
+                                        <td>${d.kk}</td>
+                                        <td>${d.dosen}</td>
+                                        <td>${labelStatus}</td>
+                                        <td>${identitasMahasiswa}</td>
+                                        <td>${tglHangus}</td>
+                                        <td>
+                                            ${btnVerif}
+                                        </td>
+                                    </tr>`;
+                        no++;
+                    }
+
+                    document.getElementById('contentTabel').innerHTML = buatTabelPenawaranJudulSaya(isiTabel);
+                    $('#tabelData').DataTable({
+                        "iDisplayLength": -1,
+                        "aLengthMenu": [
+                            [10, 15, 20, 50, 100, -1],
+                            [10, 15, 20, 50, 100, "All"] // change per page values here
+                        ],			
+                    });
+                }
+            }
+        });
+	}
+	
+	function buatTabelPenawaranJudulSaya(isiTabel){
+	       return `
+	        <table class="table table-striped table-bordered table-hover table-full-width" id="tabelData">
+			<thead>
+				<tr>
+				    <th style="width:5%;text-align:center">No.</th>
+					<th style="width:25%;text-align:center">Judul</th>
+					<th style="width:25%;text-align:center">Deskripsi</th>
+					<th style="width:10%;text-align:center">KK</th>
+					<th style="width:10%;text-align:center">Dari Dosen</th>
+					<th style="width:5%;text-align:center">Status</th>
+					<th style="width:10%;text-align:center">Diambil Oleh</th>
+					<th style="width:10%;text-align:center">Hangus Otomatis Pada</th>
+					<th style="width:5%;text-align:center">Aksi</th>
+				</tr>
+			</thead>
+			<tbody>
+			    ${isiTabel}
+			</tbody>
+		</table>
+	       `;
+	}
+	
+        $("#ambil_penawaran").validate({
+            errorPlacement:function(error,element){
+                error.appendTo( element.parent("div"));
+            },
+            submitHandler:function(form){
+                if(window.FormData !== undefined)  // for HTML5 browsers
+                {
+                    var formData = new FormData(document.getElementById("ambil_penawaran"));
+                    $.ajax({
+                        url:'page/penawaran/act.data-penawaran.php',
+                        type:'POST',
+                        data:formData,
+                        dataType:'json',
+                        mimeType:'multipart/form-data',
+                        contentType: false,
+                        cache: false,
+                        processData:false,
+                        beforeSend:function(){
+                            $("#loading").show();
+                        },
+                        success:function(json){
+                            if(json.result){
+                                $("#loading").hide();
+                                $.gritter.add({
+                                    title:'Sukses',
+                                    time: 1000,
+                                    text: json.msg,
+                                    after_close: function(){
+                                        location.href="?page=penawaran";
+                                    }
+                                });
+                            }else{
+                                $("#loading").hide();
+                                $.gritter.add({
+                                    title:'Kesalahan',
+                                    time: 4000,
+                                    text: json.msg
+                                });
+                            }
+                        }
+                    });
+
+
+                }else{  //for olden browsers
+                
+                    var  iframeId = "unique" + (new Date().getTime());
+                    var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
+                    iframe.hide();
+                    form.attr("target",iframeId);
+                    iframe.appendTo("body");
+                    iframe.load(function(e){
+                        var doc = getDoc(iframe[0]);
+                        var docRoot = doc.body ? doc.body : doc.documentElement;
+                        var data = docRoot.innerHTML;
+                    });
+                }
+            }
+        });
+        
+
+
+</script>

assets/js/mhs/_pengumuman.php

@@ -0,0 +1,56 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />
+<link rel="stylesheet" href="../assets/plugins/ckeditor/contents.css">
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+
+		$('#list-pengumuman').dataTable({
+			"iDisplayLength": 10,
+			"aLengthMenu": [
+                [10, 15, 20, 50, 100, -1],
+                [10, 15, 20, 50, 100, "All"] // change per page values here
+            ],
+			"bProcessing": true,
+			"bServerSide": true,
+			"bSort": false,
+			"sAjaxSource": "page/pengumuman/list.pengumuman.php",
+			"oLanguage": {
+	            "sLengthMenu": "Menampilkan _MENU_ Data per halaman",
+	            "sZeroRecords": "Maaf, Data tidak ada",
+	            "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
+	            "sInfoEmpty": "Menampilakan 0 s/d 0 dari 0 data",
+	            "sSearch": "",
+	            "sInfoFiltered": "",
+	            "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+	        }
+		});
+
+		$('#list-pengumuman_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        $('#list-pengumuman_wrapper .dataTables_length select').addClass("m-wrap small");
+        $('#list-pengumuman_wrapper .dataTables_length select').select2();
+
+	});
+
+	function LihatPengumuman(id){
+		location.href="?page=pengumuman&menu=edit-pengumuman&pengumuman="+id;
+	}
+
+</script>

assets/js/mhs/_praoutline.php

@@ -0,0 +1,184 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />
+<!-- <link rel="stylesheet" href="../assets/plugins/ckeditor/contents.css"> -->
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+<link rel="stylesheet" href="../assets/plugins/jQuery-Tags-Input/jquery.tagsinput.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/ckeditor/ckeditor.js"></script>
+<script src="../assets/plugins/ckeditor/adapters/jquery.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script src="../assets/plugins/jQuery-Tags-Input/jquery.tagsinput.min.js"></script>
+
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+		$(".search-select").select2({
+            placeholder: "Pilih Dosen",
+            allowClear: true
+        });
+		//daftar berita
+		$("#upload_usulan").validate({ // aksi tulis dan edit berita
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			submitHandler:function(form){
+				for ( instance in CKEDITOR.instances )
+				    {
+				        CKEDITOR.instances[instance].updateElement();
+				    }
+				
+				if(window.FormData !== undefined)  // for HTML5 browsers
+				{	
+					const deskripsi = $('#deskripsi').val().trim();
+					const pilpemb1 = $('#pilpemb1').val().trim();
+					const pilpemb2 = $('#pilpemb2').val().trim();
+					const pilpemb3 = $('#pilpemb3').val().trim();
+					const pilpemb4 = $('#pilpemb4').val().trim();
+					
+					if(deskripsi === ""){
+						$.gritter.add({
+									title:'Kesalahan',
+									time: 4000,
+									text: "Deskripsi tugas akhir harus diisi."
+								});
+						return;
+					}
+
+					if(pilpemb1 === "" || pilpemb2 === "" || pilpemb3 === "" || pilpemb4 === ""){
+						$.gritter.add({
+									title:'Kesalahan',
+									time: 4000,
+									text: "Dosen Pembimbing harus di isi ke 4 4 nya."
+								});
+								return;
+					}
+
+					var formData = new FormData(document.getElementById("upload_usulan"));
+					$.ajax({
+						url:'page/praoutline/act.praoutline.php',
+						type:'POST',
+						data:formData,
+						dataType:'json',
+						mimeType:'multipart/form-data',
+						contentType: false,
+				    	cache: false,
+						processData:false,
+						beforeSend:function(){
+							$("#loading").show();
+						},
+						success:function(json){
+							if(json.result){
+								$("#loading").hide();
+								$.gritter.add({
+									title:'Sukses',
+					                time: 1000,
+					                text: json.msg,
+					                after_close: function(){
+										location.href="?page=praoutline&menu=review";
+									}
+					            });
+							}else{
+								$("#loading").hide();
+								$.gritter.add({
+									title:'Kesalahan',
+					                time: 4000,
+					                text: json.msg
+					            });
+							}
+						}
+					});
+
+
+				}else{  //for olden browsers
+				
+					var  iframeId = "unique" + (new Date().getTime());
+					var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
+					iframe.hide();
+					form.attr("target",iframeId);
+					iframe.appendTo("body");
+					iframe.load(function(e){
+						var doc = getDoc(iframe[0]);
+						var docRoot = doc.body ? doc.body : doc.documentElement;
+						var data = docRoot.innerHTML;
+					});
+				}
+			}
+		});
+
+		$("#cari").validate({
+			errorPlacement: function(error, element) {
+			    error.appendTo( element.parent("div"));
+			},
+			submitHandler:function(form){
+				$.ajax({
+					url:'page/praoutline/act.praoutline.php',
+					dataType:'html',
+					type:'POST',
+					data:$("#cari").serialize(),
+					cache:false,
+					beforeSend:function(){
+						$("#loading").show();
+					},
+					success:function(html){
+						$("#loading").fadeOut('fast');
+						$("#result-cari").html(html);
+					}
+				});
+			}
+		});
+
+		$("#post_review").submit(function() {
+			$.ajax({
+				url:'page/praoutline/act.praoutline.php',
+				dataType:'json',
+				type:'POST',
+				data:$("#post_review").serialize(),
+				cache:false,
+				beforeSend:function(){
+					$("#loading").show();
+				},
+				success:function(json){
+					if(json.result){
+						$("#loading").hide();
+						$.gritter.add({
+							title:'Sukses',
+			                time: 1000,
+			                text: json.msg,
+			                after_close: function(){
+								location.href="?page=praoutline&menu=review";
+							}
+			            });
+					}else{
+						$("#loading").hide();
+						$.gritter.add({
+							title:'Kesalahan',
+			                time: 4000,
+			                text: json.msg
+			            });
+					}
+				}
+			});
+			return false;
+		});
+		
+	});
+
+	CKEDITOR.disableAutoInline = true;
+	$('textarea.ckeditor').ckeditor({
+		height:240
+	});
+
+	function doquote(id){
+		//$("#balas_review").append('Some text');
+		//CKEDITOR.instances.balas_review.insertHtml( '<blockquote><small>Someone famous </small><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>' );
+	}
+	
+</script>

assets/js/mhs/_user.php

@@ -0,0 +1,94 @@
+<link rel="stylesheet" type="text/css" href="../assets/plugins/select2/select2.css" />
+<link rel="stylesheet" href="../assets/plugins/DataTables/media/css/DT_bootstrap.css" />		
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" type="text/css"/>
+<link href="../assets/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" type="text/css"/>
+<link rel="stylesheet" href="../assets/plugins/gritter/css/jquery.gritter.css">
+
+<script type="text/javascript" src="../assets/plugins/select2/select2.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
+<script type="text/javascript" src="../assets/plugins/DataTables/media/js/DT_bootstrap.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
+<script src="../assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
+<script src="../assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
+<script src="../assets/plugins/gritter/js/jquery.gritter.min.js"></script>
+<script>
+	jQuery(document).ready(function() {
+		Main.init();
+		$("#updateprofil").validate({
+        	errorPlacement:function(error,element){
+                error.appendTo( element.parent("div"));
+            },
+            rules:{
+                nmLengkap:{
+                    required:true,
+                    minlength:3
+                },
+                email:{
+                    required:true
+                }
+            },
+            messages:{
+                nmLengkap:{
+                    required:"Nama Lengkap tidak boleh kosong",
+                    minlength:"Minimal 3 karakter"
+                },
+                email:{
+                    required:"Email harus diisi"
+                }
+            },
+            submitHandler:function(form){
+                if(window.FormData !== undefined)  // for HTML5 browsers
+                {
+                    var formData = new FormData(document.getElementById("updateprofil"));
+                    $.ajax({
+                        url:'page/user/act.user.php',
+                        type:'POST',
+                        data:formData,
+                        dataType:'json',
+                        mimeType:'multipart/form-data',
+                        contentType: false,
+                        cache: false,
+                        processData:false,
+                        beforeSend:function(){
+                            $("#loading").show();
+                        },
+                        success:function(json){
+                            if(json.result){
+                                $("#loading").hide();
+                                $.gritter.add({
+                                    title:'Sukses',
+                                    time: 1000,
+                                    text: json.msg,
+                                    after_close: function(){
+                                        location.href="?page=user&menu=my-profile";
+                                    }
+                                });
+                            }else{
+                                $("#loading").hide();
+                                $.gritter.add({
+                                    title:'Kesalahan',
+                                    time: 4000,
+                                    text: json.msg
+                                });
+                            }
+                        }
+                    });
+
+
+                }else{  //for olden browsers
+                
+                    var  iframeId = "unique" + (new Date().getTime());
+                    var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');
+                    iframe.hide();
+                    form.attr("target",iframeId);
+                    iframe.appendTo("body");
+                    iframe.load(function(e){
+                        var doc = getDoc(iframe[0]);
+                        var docRoot = doc.body ? doc.body : doc.documentElement;
+                        var data = docRoot.innerHTML;
+                    });
+                }
+            }
+        });
+	});
+</script>

assets/js/mhs/index.js

@@ -0,0 +1,460 @@
+var Index = function () {
+    // function to initiate Chart 1
+    /*var runChart1 = function () {
+        function randValue() {
+            return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
+        };
+        var pageviews = [
+            [1, randValue()],
+            [2, randValue()],
+            [3, 2 + randValue()],
+            [4, 3 + randValue()],
+            [5, 5 + randValue()],
+            [6, 10 + randValue()],
+            [7, 15 + randValue()],
+            [8, 20 + randValue()],
+            [9, 25 + randValue()],
+            [10, 30 + randValue()],
+            [11, 35 + randValue()],
+            [12, 25 + randValue()],
+            [13, 15 + randValue()],
+            [14, 20 + randValue()],
+            [15, 45 + randValue()],
+            [16, 50 + randValue()],
+            [17, 65 + randValue()],
+            [18, 70 + randValue()],
+            [19, 85 + randValue()],
+            [20, 80 + randValue()],
+            [21, 75 + randValue()],
+            [22, 80 + randValue()],
+            [23, 75 + randValue()],
+            [24, 70 + randValue()],
+            [25, 65 + randValue()],
+            [26, 75 + randValue()],
+            [27, 80 + randValue()],
+            [28, 85 + randValue()],
+            [29, 90 + randValue()],
+            [30, 95 + randValue()]
+        ];
+        var visitors = [
+            [1, randValue() - 5],
+            [2, randValue() - 5],
+            [3, randValue() - 5],
+            [4, 6 + randValue()],
+            [5, 5 + randValue()],
+            [6, 20 + randValue()],
+            [7, 25 + randValue()],
+            [8, 36 + randValue()],
+            [9, 26 + randValue()],
+            [10, 38 + randValue()],
+            [11, 39 + randValue()],
+            [12, 50 + randValue()],
+            [13, 51 + randValue()],
+            [14, 12 + randValue()],
+            [15, 13 + randValue()],
+            [16, 14 + randValue()],
+            [17, 15 + randValue()],
+            [18, 15 + randValue()],
+            [19, 16 + randValue()],
+            [20, 17 + randValue()],
+            [21, 18 + randValue()],
+            [22, 19 + randValue()],
+            [23, 20 + randValue()],
+            [24, 21 + randValue()],
+            [25, 14 + randValue()],
+            [26, 24 + randValue()],
+            [27, 25 + randValue()],
+            [28, 26 + randValue()],
+            [29, 27 + randValue()],
+            [30, 31 + randValue()]
+        ];
+        var plot = $.plot($("#placeholder-h1"), [{
+            data: pageviews,
+            label: "Unique Visits"
+        }, {
+            data: visitors,
+            label: "Page Views"
+        }], {
+            series: {
+                lines: {
+                    show: true,
+                    lineWidth: 2,
+                    fill: true,
+                    fillColor: {
+                        colors: [{
+                            opacity: 0.05
+                        }, {
+                            opacity: 0.01
+                        }]
+                    }
+                },
+                points: {
+                    show: false
+                },
+                shadowSize: 2
+            },
+            grid: {
+                hoverable: true,
+                clickable: true,
+                tickColor: "#eee",
+                borderWidth: 0
+            },
+            colors: ["#d12610", "#37b7f3", "#52e136"],
+            xaxis: {
+                ticks: 11,
+                tickDecimals: 0
+            },
+            yaxis: {
+                ticks: 11,
+                tickDecimals: 0
+            }
+        });
+
+        function showTooltip(x, y, contents) {
+            $('<div id="tooltip">' + contents + '</div>').css({
+                position: 'absolute',
+                display: 'none',
+                top: y + 5,
+                left: x + 15,
+                border: '1px solid #333',
+                padding: '4px',
+                color: '#fff',
+                'border-radius': '3px',
+                'background-color': '#333',
+                opacity: 0.80
+            }).appendTo("body").fadeIn(200);
+        }
+        var previousPoint = null;
+        $("#placeholder-h1").bind("plothover", function (event, pos, item) {
+            $("#x").text(pos.x.toFixed(2));
+            $("#y").text(pos.y.toFixed(2));
+            if (item) {
+                if (previousPoint != item.dataIndex) {
+                    previousPoint = item.dataIndex;
+                    $("#tooltip").remove();
+                    var x = item.datapoint[0].toFixed(2),
+                        y = item.datapoint[1].toFixed(2);
+                    showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
+                }
+            } else {
+                $("#tooltip").remove();
+                previousPoint = null;
+            }
+        });
+    };
+    // function to initiate Chart 2
+    var runChart2 = function () {
+        var data_pie = [],
+            series = Math.floor(Math.random() * 6) + 3;
+        for (var i = 0; i < series; i++) {
+            data_pie[i] = {
+                label: "Series" + (i + 1),
+                data: Math.floor(Math.random() * 100) + 1
+            };
+        }
+        $.plot('#placeholder-h2', data_pie, {
+            series: {
+                pie: {
+                    show: true,
+                    radius: 1,
+                    tilt: 0.5,
+                    label: {
+                        show: true,
+                        radius: 1,
+                        formatter: labelFormatter,
+                        background: {
+                            opacity: 0.8
+                        }
+                    },
+                    combine: {
+                        color: '#999',
+                        threshold: 0.1
+                    }
+                }
+            },
+            legend: {
+                show: false
+            }
+        });
+
+        function labelFormatter(label, series) {
+            return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
+        }
+    };
+    // function to initiate Chart 3
+    var runChart3 = function () {
+        var data = [],
+            totalPoints = 300;
+
+        function getRandomData() {
+            if (data.length > 0)
+                data = data.slice(1);
+            // Do a random walk
+            while (data.length < totalPoints) {
+                var prev = data.length > 0 ? data[data.length - 1] : 50,
+                    y = prev + Math.random() * 10 - 5;
+                if (y < 0) {
+                    y = 0;
+                } else if (y > 100) {
+                    y = 100;
+                }
+                data.push(y);
+            }
+            // Zip the generated y values with the x values
+            var res = [];
+            for (var i = 0; i < data.length; ++i) {
+                res.push([i, data[i]]);
+            }
+            return res;
+        }
+        // Set up the control widget
+        var updateInterval = 30;
+        $("#updateInterval").val(updateInterval).change(function () {
+            var v = $(this).val();
+            if (v && !isNaN(+v)) {
+                updateInterval = +v;
+                if (updateInterval < 1) {
+                    updateInterval = 1;
+                } else if (updateInterval > 2000) {
+                    updateInterval = 2000;
+                }
+                $(this).val("" + updateInterval);
+            }
+        });
+        var plot = $.plot("#placeholder-h3", [getRandomData()], {
+            grid: {
+                borderWidth: 1,
+                borderColor: '#eeeeee'
+            },
+            series: {
+                shadowSize: 0 // Drawing is faster without shadows
+            },
+            yaxis: {
+                min: 0,
+                max: 100
+            },
+            xaxis: {
+                show: false
+            }
+        });
+
+        function update() {
+            plot.setData([getRandomData()]);
+            // Since the axes don't change, we don't need to call plot.setupGrid()
+            plot.draw();
+            setTimeout(update, updateInterval);
+        }
+        update();
+    };
+    // function to initiate Sparkline
+    var runSparkline = function () {
+        $(".sparkline_line_good span").sparkline("html", {
+            type: "line",
+            fillColor: "#B1FFA9",
+            lineColor: "#459D1C",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_line_bad span").sparkline("html", {
+            type: "line",
+            fillColor: "#FFC4C7",
+            lineColor: "#BA1E20",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_line_neutral span").sparkline("html", {
+            type: "line",
+            fillColor: "#CCCCCC",
+            lineColor: "#757575",
+            width: "50",
+            height: "24"
+        });
+        $(".sparkline_bar_good span").sparkline('html', {
+            type: "bar",
+            barColor: "#459D1C",
+            barWidth: "5",
+            height: "24"
+        });
+        $(".sparkline_bar_bad span").sparkline('html', {
+            type: "bar",
+            barColor: "#BA1E20",
+            barWidth: "5",
+            height: "24"
+        });
+        $(".sparkline_bar_neutral span").sparkline('html', {
+            type: "bar",
+            barColor: "#757575",
+            barWidth: "5",
+            height: "24"
+        });
+    };
+    // function to initiate EasyPieChart
+    var runEasyPieChart = function () {
+        if (isIE8 || isIE9) {
+            if (!Function.prototype.bind) {
+                Function.prototype.bind = function (oThis) {
+                    if (typeof this !== "function") {
+                        // closest thing possible to the ECMAScript 5 internal IsCallable function
+                        throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+                    }
+                    var aArgs = Array.prototype.slice.call(arguments, 1),
+                        fToBind = this,
+                        fNOP = function () {}, fBound = function () {
+                            return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
+                        };
+                    fNOP.prototype = this.prototype;
+                    fBound.prototype = new fNOP();
+                    return fBound;
+                };
+            }
+        }
+        $('.easy-pie-chart .bounce').easyPieChart({
+            animate: 1000,
+            size: 70
+        });
+        $('.easy-pie-chart .cpu').easyPieChart({
+            animate: 1000,
+            lineWidth: 3,
+            barColor: '#35aa47',
+            size: 70
+            
+        });
+    };*/
+    // function to initiate Full Calendar
+    var runFullCalendar = function () {
+        //calendar
+        /* initialize the calendar
+		 -----------------------------------------------------------------*/
+        var $modal = $('#event-management');
+        $('#event-categories div.event-category').each(function () {
+            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
+            // it doesn't need to have a start or end
+            var eventObject = {
+                title: $.trim($(this).text()) // use the element's text as the event title
+            };
+            // store the Event Object in the DOM element so we can get to it later
+            $(this).data('eventObject', eventObject);
+            // make the event draggable using jQuery UI
+            $(this).draggable({
+                zIndex: 999,
+                revert: true, // will cause the event to go back to its
+                revertDuration: 50 //  original position after the drag
+            });
+        });
+        /* initialize the calendar
+		 -----------------------------------------------------------------*/
+        var date = new Date();
+        var d = date.getDate();
+        var m = date.getMonth();
+        var y = date.getFullYear();
+        var form = '';
+        var calendar = $('#calendar').fullCalendar({
+            buttonText: {
+                prev: '<i class="icon-chevron-left"></i>',
+                next: '<i class="icon-chevron-right"></i>'
+            },
+            header: {
+                left: 'prev,next today',
+                center: 'title',
+                right: 'month,agendaWeek,agendaDay'
+            },
+            events: [{
+                title: 'Meeting with Boss',
+                start: new Date(y, m, 1),
+                className: 'label-default'
+            }, {
+                title: 'Bootstrap Seminar',
+                start: new Date(y, m, d - 5),
+                end: new Date(y, m, d - 2),
+                className: 'label-teal'
+            }, {
+                title: 'Lunch with Nicole',
+                start: new Date(y, m, d - 3, 12, 0),
+                className: 'label-green',
+                allDay: false
+            }],
+            editable: true,
+            droppable: true, // this allows things to be dropped onto the calendar !!!
+            drop: function (date, allDay) { // this function is called when something is dropped
+                // retrieve the dropped element's stored Event Object
+                var originalEventObject = $(this).data('eventObject');
+                var $categoryClass = $(this).attr('data-class');
+                // we need to copy it, so that multiple events don't have a reference to the same object
+                var copiedEventObject = $.extend({}, originalEventObject);
+                // assign it the date that was reported
+                copiedEventObject.start = date;
+                copiedEventObject.allDay = allDay;
+                if ($categoryClass)
+                    copiedEventObject['className'] = [$categoryClass];
+                // render the event on the calendar
+                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
+                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
+                // is the "remove after drop" checkbox checked?
+                if ($('#drop-remove').is(':checked')) {
+                    // if so, remove the element from the "Draggable Events" list
+                    $(this).remove();
+                }
+            },
+            selectable: true,
+            selectHelper: true,
+            select: function (start, end, allDay) {
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                form = $("<form></form>");
+                form.append("<div class='row'></div>");
+                form.find(".row").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>New Event Name</label><input class='form-control' placeholder='Insert Event Name' type=text name='title'/></div></div>").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>").find("select[name='category']").append("<option value='label-default'>Work</option>").append("<option value='label-green'>Home</option>").append("<option value='label-purple'>Holidays</option>").append("<option value='label-orange'>Party</option>").append("<option value='label-yellow'>Birthday</option>").append("<option value='label-teal'>Generic</option>").append("<option value='label-beige'>To Do</option>");
+                $modal.find('.remove-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
+                    form.submit();
+                });
+                $modal.find('form').on('submit', function () {
+                    title = form.find("input[name='title']").val();
+                    $categoryClass = form.find("select[name='category'] option:checked").val();
+                    if (title !== null) {
+                        calendar.fullCalendar('renderEvent', {
+                                title: title,
+                                start: start,
+                                end: end,
+                                allDay: allDay,
+                                className: $categoryClass
+                            }, true // make the event "stick"
+                        );
+                    }
+                    $modal.modal('hide');
+                    return false;
+                });
+                calendar.fullCalendar('unselect');
+            },
+            eventClick: function (calEvent, jsEvent, view) {
+                var form = $("<form></form>");
+                form.append("<label>Change event name</label>");
+                form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success'><i class='icon-ok'></i> Save</button></span></div>");
+                $modal.modal({
+                    backdrop: 'static'
+                });
+                $modal.find('.remove-event').show().end().find('.save-event').hide().end().find('.modal-body').empty().prepend(form).end().find('.remove-event').unbind('click').click(function () {
+                    calendar.fullCalendar('removeEvents', function (ev) {
+                        return (ev._id == calEvent._id);
+                    });
+                    $modal.modal('hide');
+                });
+                $modal.find('form').on('submit', function () {
+                    calEvent.title = form.find("input[type=text]").val();
+                    calendar.fullCalendar('updateEvent', calEvent);
+                    $modal.modal('hide');
+                    return false;
+                });
+            }
+        });
+    };
+    return {
+        init: function () {
+            /*runChart1();
+            runChart2();
+            runChart3();
+            runSparkline();
+            runEasyPieChart();*/
+            runFullCalendar();
+        }
+    };
+}();

assets/js/mhs/login.js

@@ -0,0 +1,210 @@
+var Login = function () {
+    var runLoginButtons = function () {
+        $('.forgot').bind('click', function () {
+            $('.box-login').hide();
+            $('.box-forgot').show();
+        });
+        $('.register').bind('click', function () {
+            $('.box-login').hide();
+            //$('.box-register').show();
+        });
+        $('.go-back').click(function () {
+            $('.box-login').show();
+            $('.box-forgot').hide();
+            //$('.box-register').hide();
+        });
+    };
+    var runSetDefaultValidation = function () {
+        $.validator.setDefaults({
+            errorElement: "span", // contain the error msg in a small tag
+            errorClass: 'help-block',
+            errorPlacement: function (error, element) { // render error placement for each input type
+                if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
+                    error.insertAfter($(element).closest('.form-group').children('div').children().last());
+                } else if (element.attr("name") == "card_expiry_mm" || element.attr("name") == "card_expiry_yyyy") {
+                    error.appendTo($(element).closest('.form-group').children('div'));
+                } else {
+                    error.insertAfter(element);
+                    // for other inputs, just perform default behavior
+                }
+            },
+            ignore: ':hidden',
+            highlight: function (element) {
+                $(element).closest('.help-block').removeClass('valid');
+                // display OK icon
+                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
+                // add the Bootstrap error class to the control group
+            },
+            unhighlight: function (element) { // revert the change done by hightlight
+                $(element).closest('.form-group').removeClass('has-error');
+                // set error class to the control group
+            },
+            success: function (label, element) {
+                label.addClass('help-block valid');
+                // mark the current input as valid and display OK icon
+                $(element).closest('.form-group').removeClass('has-error');
+            },
+            highlight: function (element) {
+                $(element).closest('.help-block').removeClass('valid');
+                // display OK icon
+                $(element).closest('.form-group').addClass('has-error');
+                // add the Bootstrap error class to the control group
+            },
+            unhighlight: function (element) { // revert the change done by hightlight
+                $(element).closest('.form-group').removeClass('has-error');
+                // set error class to the control group
+            }
+        });
+    };
+    var runLoginValidator = function () {
+        var form = $('.form-login');
+        var errorHandler = $('.errorHandler', form);
+        form.validate({
+            rules: {
+                username: {
+                    minlength: 2,
+                    required: true
+                },
+                password: {
+                    minlength: 4,
+                    required: true
+                }
+            },
+            messages:{
+                username :{
+                    minlength:"Karakter minimal {0} Karakter",
+                    required:"Silakan masukkan username anda"
+                },
+                password:{
+                    minlength:"Karakter minimal {0} Karakter",
+                    required:"Silakan masukkan password anda"
+                }
+            },
+            submitHandler: function (form) {
+                errorHandler.hide();
+                //form.submit();
+                $.ajax({
+                    url:'act.auth.php',
+                    data:$('.form-login').serialize(),
+                    type:'post',
+                    dataType:'json',
+                    beforeSend:function(){
+                        $("#logintext").html("Silakan Tunggu..");
+                        form.click(function(event) {
+                            return false;
+                            alert('Please Wait...');
+                        });
+                    },
+                    success:function(json){
+                        if (json.result){
+                            location.href='./'
+                        }else{
+                           //alert(json.msg);
+                           $("#logintext").html("Login");
+                           errorHandler.html(json.msg);
+                           errorHandler.show();
+                        }
+                    }
+                });
+                return false;
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                errorHandler.show();
+            }
+        });
+    };
+    var runForgotValidator = function () {
+        var form2 = $('.form-forgot');
+        var errorHandler2 = $('.errorHandler', form2);
+        form2.validate({
+            rules: {
+                email: {
+                    required: true
+                }
+            },
+            messages:{
+                email: "Silakan masukkan alamat email anda"
+            },
+            submitHandler: function (form) {
+                errorHandler2.hide();
+                $.ajax({
+                    url:'act.auth.php',
+                    data:$('.form-forgot').serialize(),
+                    type:'post',
+                    dataType:'json',
+                    /*beforeSend:function(){
+                        $("#statusLogin").html("Silakan Tunggu..");
+                    },*/
+                    success:function(json){
+                        if (json.result){
+                            alert(json.msg);
+                            //location.href='./'
+                        }else{
+                           errorHandler2.html(json.msg);
+                           errorHandler2.show();
+                        }
+                    }
+                });
+                return false;
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                errorHandler2.show();
+            }
+        });
+    };
+    /*var runRegisterValidator = function () {
+        var form3 = $('.form-register');
+        var errorHandler3 = $('.errorHandler', form3);
+        form3.validate({
+            rules: {
+                full_name: {
+                    minlength: 2,
+                    required: true
+                },
+                address: {
+                    minlength: 2,
+                    required: true
+                },
+                city: {
+                    minlength: 2,
+                    required: true
+                },
+                gender: {
+                    required: true
+                },
+                email: {
+                    required: true
+                },
+                password: {
+                    minlength: 6,
+                    required: true
+                },
+                password_again: {
+                    required: true,
+                    minlength: 5,
+                    equalTo: "#password"
+                },
+                agree: {
+                    minlength: 1,
+                    required: true
+                }
+            },
+            submitHandler: function (form) {
+                errorHandler3.hide();
+            },
+            invalidHandler: function (event, validator) { //display error alert on form submit
+                errorHandler3.show();
+            }
+        });
+    };*/
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runLoginButtons();
+            runSetDefaultValidation();
+            runLoginValidator();
+            runForgotValidator();
+            // runRegisterValidator();
+        }
+    };
+}();

assets/js/pages-gallery.js

@@ -0,0 +1,31 @@
+var PagesGallery = function () {
+    //function to initiate Colorbox
+    var runColorBox = function () {
+        $(".group1").colorbox({
+            rel: 'group1',
+            transition: "none",
+            width: "100%",
+            height: "100%",
+            retinaImage: true
+        });
+    };
+
+    //function to Image Picker
+    var runImagePicker = function () {
+        $('.wrap-image .chkbox').bind('click', function () {
+            if ($(this).parent().hasClass('selected')) {
+                $(this).parent().removeClass('selected').children('a').children('img').removeClass('selected');
+            } else {
+                $(this).parent().addClass('selected').children('a').children('img').addClass('selected');
+            }
+        });
+    };
+
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runColorBox();
+            runImagePicker();
+        }
+    };
+}();

assets/js/pages-user-profile.js

@@ -0,0 +1,20 @@
+var PagesUserProfile = function () {
+    //function to initiate Pulsate
+    var runPulsate = function () {
+        $('.pulsate').pulsate({
+            color: '#C43C35', // set the color of the pulse
+            reach: 20, // how far the pulse goes in px
+            speed: 1000, // how long one pulse takes in ms
+            pause: 0, // how long the pause between pulses is in ms
+            glow: true, // if the glow should be shown too
+            repeat: 3, // will repeat forever if true, if given a number will repeat for that many times
+            onHover: false // if true only pulsate if user hovers over the element
+        });
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runPulsate();
+        }
+    };
+}();

assets/js/table-data.js

@@ -0,0 +1,48 @@
+var TableData = function () {
+    //function to initiate DataTable
+    //DataTable is a highly flexible tool, based upon the foundations of progressive enhancement, 
+    //which will add advanced interaction controls to any HTML table
+    //For more information, please visit https://datatables.net/
+    var runDataTable = function () {
+        var oTable = $('#sample_1').dataTable({
+            "aoColumnDefs": [{
+                "aTargets": [0]
+            }],
+            "oLanguage": {
+                "sLengthMenu": "Show _MENU_ Rows",
+                "sSearch": "",
+                "oPaginate": {
+                    "sPrevious": "",
+                    "sNext": ""
+                }
+            },
+            "aaSorting": [
+                [1, 'asc']
+            ],
+            "aLengthMenu": [
+                [5, 10, 15, 20, -1],
+                [5, 10, 15, 20, "All"] // change per page values here
+            ],
+            // set the initial value
+            "iDisplayLength": 10,
+        });
+        $('#sample_1_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
+        // modify table search input
+        $('#sample_1_wrapper .dataTables_length select').addClass("m-wrap small");
+        // modify table per page dropdown
+        $('#sample_1_wrapper .dataTables_length select').select2();
+        // initialzie select2 dropdown
+        $('#sample_1_column_toggler input[type="checkbox"]').change(function () {
+            /* Get the DataTables object again - this is not a recreation, just a get of the object */
+            var iCol = parseInt($(this).attr("data-column"));
+            var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
+            oTable.fnSetColumnVis(iCol, (bVis ? false : true));
+        });
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runDataTable();
+        }
+    };
+}();

assets/js/ui-buttons.js

@@ -0,0 +1,37 @@
+var UIButtons = function () {
+    //function to initiate LaddaButtons
+    var runLeddaButtons = function () {
+        // Bind normal buttons
+        Ladda.bind('.ladda-button', {
+            timeout: 2000
+        });
+        // Bind progress buttons and simulate loading progress
+        Ladda.bind('.progress-demo button', {
+            callback: function (instance) {
+                var progress = 0;
+                var interval = setInterval(function () {
+                    progress = Math.min(progress + Math.random() * 0.1, 1);
+                    instance.setProgress(progress);
+                    if (progress === 1) {
+                        instance.stop();
+                        clearInterval(interval);
+                    }
+                }, 200);
+            }
+        });
+        // You can control loading explicitly using the JavaScript API
+        // as outlined below:
+        // var l = Ladda.create( document.querySelector( 'button' ) );
+        // l.start();
+        // l.stop();
+        // l.toggle();
+        // l.isLoading();
+        // l.setProgress( 0-1 );
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runLeddaButtons();
+        }
+    };
+}();

assets/js/ui-elements.js

@@ -0,0 +1,204 @@
+var UIElements = function () {
+    //function to initiate bootstrap-paginator
+    var runPaginator = function () {
+        $('#paginator-example-1').bootstrapPaginator({
+            bootstrapMajorVersion: 3,
+            currentPage: 3,
+            totalPages: 10,
+            onPageClicked: function (e, originalEvent, type, page) {
+                $('#paginator-content-1').text("Page item clicked, type: " + type + " page: " + page);
+            }
+        });
+        $('#paginator-example-2').bootstrapPaginator({
+            bootstrapMajorVersion: 3,
+            currentPage: 3,
+            totalPages: 10,
+            onPageChanged: function (e, oldPage, newPage) {
+                $('#paginator-content-2').text("Current page changed, old: " + oldPage + " new: " + newPage);
+            }
+        });
+        $('#paginator-changed-select').change(function () {
+            var page = $(this).val();
+            $('#paginator-example-2').bootstrapPaginator("show", page);
+        });
+    };
+    //function to initiate jQuery.pulsate
+    var runPulsate = function () {
+        $('#pulsate-regular').pulsate({
+            color: '#C43C35', // set the color of the pulse
+            reach: 20, // how far the pulse goes in px
+            speed: 1000, // how long one pulse takes in ms
+            pause: 0, // how long the pause between pulses is in ms
+            glow: true, // if the glow should be shown too
+            repeat: true, // will repeat forever if true, if given a number will repeat for that many times
+            onHover: false // if true only pulsate if user hovers over the element
+        });
+    };
+    //function to initiate jquery.gritter
+    var runGritterNotification = function () {
+        $.extend($.gritter.options, {
+            class_name: 'gritter-light', // for light notifications (can be added directly to $.gritter.add too)
+            position: 'top-right', // possibilities: bottom-left, bottom-right, top-left, top-right
+            fade_in_speed: 100, // how fast notifications fade in (string or int)
+            fade_out_speed: 100, // how fast the notices fade out
+            time: 3000 // hang on the screen for...
+        });
+        $('#add-sticky').click(function () {
+            var unique_id = $.gritter.add({
+                // (string | mandatory) the heading of the notification
+                title: 'This is a sticky notice!',
+                // (string | mandatory) the text inside the notification
+                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
+                // (string | optional) the image to display on the left
+                image: 'assets/images/avatar-1.jpg',
+                // (bool | optional) if you want it to fade out on its own or just sit there
+                sticky: true,
+                // (int | optional) the time you want it to be alive for before fading out
+                time: '',
+                // (string | optional) the class name you want to apply to that specific message
+                class_name: 'my-sticky-class'
+            });
+            // You can have it return a unique id, this can be used to manually remove it later using
+            /*
+					 	setTimeout(function(){
+					 $.gritter.remove(unique_id, {
+					 fade: true,
+					 speed: 'slow'
+					 });
+					 }, 6000)
+					 */
+            return false;
+        });
+        $('#add-regular').click(function () {
+            $.gritter.add({
+                // (string | mandatory) the heading of the notification
+                title: 'This is a regular notice!',
+                // (string | mandatory) the text inside the notification
+                text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
+                // (string | optional) the image to display on the left
+                image: 'assets/images/avatar-2.jpg',
+                // (bool | optional) if you want it to fade out on its own or just sit there
+                sticky: false,
+                // (int | optional) the time you want it to be alive for before fading out
+                time: ''
+            });
+            return false;
+        });
+        $('#add-max').click(function () {
+            $.gritter.add({
+                // (string | mandatory) the heading of the notification
+                title: 'This is a notice with a max of 3 on screen at one time!',
+                // (string | mandatory) the text inside the notification
+                text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
+                // (string | optional) the image to display on the left
+                image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
+                // (bool | optional) if you want it to fade out on its own or just sit there
+                sticky: false,
+                // (function) before the gritter notice is opened
+                before_open: function () {
+                    if ($('.gritter-item-wrapper').length == 3) {
+                        // Returning false prevents a new gritter from opening
+                        return false;
+                    }
+                }
+            });
+            return false;
+        });
+        $('#add-without-image').click(function () {
+            $.gritter.add({
+                // (string | mandatory) the heading of the notification
+                title: 'This is a notice without an image!',
+                // (string | mandatory) the text inside the notification
+                text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.'
+            });
+            return false;
+        });
+        $('#add-gritter-light').click(function () {
+            $.gritter.add({
+                // (string | mandatory) the heading of the notification
+                title: 'This is a light notification',
+                // (string | mandatory) the text inside the notification
+                text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
+                class_name: 'gritter-light'
+            });
+            return false;
+        });
+        $('#add-with-callbacks').click(function () {
+            $.gritter.add({
+                // (string | mandatory) the heading of the notification
+                title: 'This is a notice with callbacks!',
+                // (string | mandatory) the text inside the notification
+                text: 'The callback is...',
+                // (function | optional) function called before it opens
+                before_open: function () {
+                    alert('I am called before it opens');
+                },
+                // (function | optional) function called after it opens
+                after_open: function (e) {
+                    alert("I am called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
+                },
+                // (function | optional) function called before it closes
+                before_close: function (e, manual_close) {
+                    var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
+                    alert("I am called before it closes: I am passed the jQuery object for the Gritter element... \n" + manually);
+                },
+                // (function | optional) function called after it closes
+                after_close: function (e, manual_close) {
+                    var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
+                    alert('I am called after it closes. ' + manually);
+                }
+            });
+            return false;
+        });
+        $('#add-sticky-with-callbacks').click(function () {
+            $.gritter.add({
+                // (string | mandatory) the heading of the notification
+                title: 'This is a sticky notice with callbacks!',
+                // (string | mandatory) the text inside the notification
+                text: 'Sticky sticky notice.. sticky sticky notice...',
+                // Stickeh!
+                sticky: true,
+                // (function | optional) function called before it opens
+                before_open: function () {
+                    alert('I am a sticky called before it opens');
+                },
+                // (function | optional) function called after it opens
+                after_open: function (e) {
+                    alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
+                },
+                // (function | optional) function called before it closes
+                before_close: function (e) {
+                    alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
+                },
+                // (function | optional) function called after it closes
+                after_close: function () {
+                    alert('I am a sticky called after it closes');
+                }
+            });
+            return false;
+        });
+        $("#remove-all").click(function () {
+            $.gritter.removeAll();
+            return false;
+        });
+        $("#remove-all-with-callbacks").click(function () {
+            $.gritter.removeAll({
+                before_close: function (e) {
+                    alert("I am called before all notifications are closed.  I am passed the jQuery object containing all  of Gritter notifications.\n" + e);
+                },
+                after_close: function () {
+                    alert('I am called after everything has been closed.');
+                }
+            });
+            return false;
+        });
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runPaginator();
+            runPulsate();
+            runGritterNotification();
+        }
+    };
+}();

assets/js/ui-modals.js

@@ -0,0 +1,38 @@
+var UIModals = function () {
+    //function to initiate bootstrap extended modals
+    var initModals = function () {
+        $.fn.modalmanager.defaults.resize = true;
+        $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner =
+            '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
+            '<div class="progress progress-striped active">' +
+            '<div class="progress-bar" style="width: 100%;"></div>' +
+            '</div>' +
+            '</div>';
+        var $modal = $('#ajax-modal');
+        $('.ajax .demo').on('click', function () {
+            // create the backdrop and wait for next modal to be triggered
+            $('body').modalmanager('loading');
+            setTimeout(function () {
+                $modal.load('modal_ajax_test.html', '', function () {
+                    $modal.modal();
+                });
+            }, 1000);
+        });
+        $modal.on('click', '.update', function () {
+            $modal.modal('loading');
+            setTimeout(function () {
+                $modal
+                    .modal('loading')
+                    .find('.modal-body')
+                    .prepend('<div class="alert alert-info fade in">' +
+                        'Updated!<button type="button" class="close" data-dismiss="alert">&times;</button>' +
+                        '</div>');
+            }, 1000);
+        });
+    };
+    return {
+        init: function () {
+            initModals();
+        }
+    };
+}();

assets/js/ui-nestable.js

@@ -0,0 +1,43 @@
+var UINestable = function () {
+    //function to initiate jquery.nestable
+    var updateOutput = function (e) {
+        var list = e.length ? e : $(e.target),
+            output = list.data('output');
+        if (window.JSON) {
+            output.val(window.JSON.stringify(list.nestable('serialize')));
+            //, null, 2));
+        } else {
+            output.val('JSON browser support required for this demo.');
+        }
+    };
+    var runNestable = function () {
+        // activate Nestable for list 1
+        $('#nestable').nestable({
+            group: 1
+        }).on('change', updateOutput);
+        // activate Nestable for list 2
+        $('#nestable2').nestable({
+            group: 1
+        }).on('change', updateOutput);
+        // output initial serialised data
+        updateOutput($('#nestable').data('output', $('#nestable-output')));
+        updateOutput($('#nestable2').data('output', $('#nestable2-output')));
+        $('#nestable-menu').on('click', function (e) {
+            var target = $(e.target),
+                action = target.data('action');
+            if (action === 'expand-all') {
+                $('.dd').nestable('expandAll');
+            }
+            if (action === 'collapse-all') {
+                $('.dd').nestable('collapseAll');
+            }
+        });
+        $('#nestable3').nestable();
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runNestable();
+        }
+    };
+}();

assets/js/ui-sliders.js

@@ -0,0 +1,127 @@
+var UISliders = function () {
+    //function to initiate jQRangeSlider
+    var runRangeSliders = function () {
+        //jQRangeSlider is highly dependant on CSS. Be sure to include one of the provided stylesheets.
+        $("#slider_example_1").rangeSlider();
+        $("#slider_example_2").editRangeSlider();
+        $("#slider_example_3").dateRangeSlider({
+            bounds: {
+                min: new Date(2013, 0, 1),
+                max: new Date(2014, 11, 31)
+            },
+            defaultValues: {
+                min: new Date(2013, 2, 1),
+                max: new Date(2014, 2, 31)
+            }
+        });
+        $("#slider_example_4").rangeSlider({
+            valueLabels: "change",
+            delayOut: 1000
+        });
+        $("#slider_example_5").rangeSlider({
+            valueLabels: "change",
+            durationIn: 1000,
+            durationOut: 1000
+        });
+        $("#slider_example_6").rangeSlider({
+            enabled: false
+        });
+        $("#slider_example_7").rangeSlider({
+            range: {
+                min: 10,
+                max: 40
+            }
+        });
+        $("#slider_example_8").rangeSlider({
+            step: 10
+        });
+    };
+    //function to initiate jQuery Knob
+    var runKnob = function () {
+        $(".knob").knob({
+            draw: function () {
+                // "tron" case
+                if (this.$.data('skin') == 'tron') {
+                    var a = this.angle(this.cv) // Angle
+                        ,
+                        sa = this.startAngle // Previous start angle
+                        ,
+                        sat = this.startAngle // Start angle
+                        ,
+                        ea // Previous end angle
+                        , eat = sat + a // End angle
+                        ,
+                        r = true;
+                    this.g.lineWidth = this.lineWidth;
+                    this.o.cursor && (sat = eat - 0.3) && (eat = eat + 0.3);
+                    if (this.o.displayPrevious) {
+                        ea = this.startAngle + this.angle(this.value);
+                        this.o.cursor && (sa = ea - 0.3) && (ea = ea + 0.3);
+                        this.g.beginPath();
+                        this.g.strokeStyle = this.previousColor;
+                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
+                        this.g.stroke();
+                    }
+                    this.g.beginPath();
+                    this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
+                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
+                    this.g.stroke();
+                    this.g.lineWidth = 2;
+                    this.g.beginPath();
+                    this.g.strokeStyle = this.o.fgColor;
+                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
+                    this.g.stroke();
+                    return false;
+                }
+            }
+        });
+        // Example of infinite knob, iPod click wheel
+        var v, up = 0,
+            down = 0,
+            i = 0,
+            $idir = $("div.idir"),
+            $ival = $("div.ival"),
+            incr = function () {
+                i++;
+                $idir.show().html("+").fadeOut();
+                $ival.html(i);
+            }, decr = function () {
+                i--;
+                $idir.show().html("-").fadeOut();
+                $ival.html(i);
+            };
+        $("input.infinite").knob({
+            min: 0,
+            max: 20,
+            stopper: false,
+            change: function () {
+                if (v > this.cv) {
+                    if (up) {
+                        decr();
+                        up = 0;
+                    } else {
+                        up = 1;
+                        down = 0;
+                    }
+                } else {
+                    if (v < this.cv) {
+                        if (down) {
+                            incr();
+                            down = 0;
+                        } else {
+                            down = 1;
+                            up = 0;
+                        }
+                    }
+                }
+                v = this.cv;
+            }
+        });
+    };
+    return {
+        init: function () {
+            runRangeSliders();
+            runKnob();
+        }
+    };
+}();

assets/js/ui-treeview.js

@@ -0,0 +1,219 @@
+var UITreeview = function () {
+    //function to initiate jquery.dynatree
+    var runTreeView = function () {
+        //Default Tree
+        $("#tree").dynatree({
+            // using default options
+        });
+        //Init from JS object 
+        $("#tree2").dynatree({
+            onActivate: function (node) {
+                // A DynaTreeNode object is passed to the activation handler
+                // Note: we also get this event, if persistence is on, and the page is reloaded.
+                alert("You activated " + node.data.title);
+            },
+            children: [{
+                title: "Item 1"
+            }, {
+                title: "Folder 2",
+                isFolder: true,
+                key: "folder2",
+                children: [{
+                    title: "Sub-item 2.1"
+                }, {
+                    title: "Sub-item 2.2"
+                }]
+            }, {
+                title: "Item 3"
+            }]
+        });
+        //External data 
+        $("#tree3").dynatree({
+            // In real life we would call a URL on the server like this:
+            //          initAjax: {
+            //              url: "/getTopLevelNodesAsJson",
+            //              data: { mode: "funnyMode" }
+            //              },
+            // .. but here we use a local file instead:
+            initAjax: {
+                url: "assets/plugins/dynatree/tests/sample-data1.json"
+            },
+            onActivate: function (node) {
+                $("#echoActive").text(node.data.title);
+            },
+            onDeactivate: function (node) {
+                $("#echoActive").text("-");
+            }
+        });
+        var treeData = [{
+            title: "item1 with key and tooltip",
+            tooltip: "Look, a tool tip!"
+        }, {
+            title: "item2: selected on init",
+        }, {
+            title: "Folder",
+            isFolder: true,
+            key: "id3",
+            children: [{
+                title: "Sub-item 3.1",
+                children: [{
+                    title: "Sub-item 3.1.1",
+                    key: "id3.1.1"
+                }, {
+                    title: "Sub-item 3.1.2",
+                    key: "id3.1.2"
+                }]
+            }, {
+                title: "Sub-item 3.2",
+                children: [{
+                    title: "Sub-item 3.2.1",
+                    key: "id3.2.1"
+                }, {
+                    title: "Sub-item 3.2.2",
+                    key: "id3.2.2"
+                }]
+            }]
+        }, {
+            title: "Document with some children (expanded on init)",
+            key: "id4",
+            children: [{
+                title: "Sub-item 4.1 (active on init)",
+                activate: true,
+                children: [{
+                    title: "Sub-item 4.1.1",
+                    key: "id4.1.1"
+                }, {
+                    title: "Sub-item 4.1.2",
+                    key: "id4.1.2"
+                }]
+            }, {
+                title: "Sub-item 4.2 (selected on init)",
+                select: true,
+                children: [{
+                    title: "Sub-item 4.2.1",
+                    key: "id4.2.1"
+                }, {
+                    title: "Sub-item 4.2.2",
+                    key: "id4.2.2"
+                }]
+            }, {
+                title: "Sub-item 4.3 (hideCheckbox)",
+                hideCheckbox: true
+            }, {
+                title: "Sub-item 4.4 (unselectable)",
+                unselectable: true
+            }]
+        }];
+        //Checkbox
+        $("#tree4").dynatree({
+            checkbox: true,
+            // Override class name for checkbox icon:
+            classNames: {
+                checkbox: "dynatree-radio"
+            },
+            selectMode: 1,
+            children: treeData,
+            onActivate: function (node) {
+                $("#echoActive1").text(node.data.title);
+            },
+            onSelect: function (select, node) {
+                // Display list of selected nodes
+                var s = node.tree.getSelectedNodes().join(", ");
+                $("#echoSelection1").text(s);
+            },
+            onDblClick: function (node, event) {
+                node.toggleSelect();
+            },
+            onKeydown: function (node, event) {
+                if (event.which == 32) {
+                    node.toggleSelect();
+                    return false;
+                }
+            },
+            // The following options are only required, if we have more than one tree on one page:
+            //      initId: "treeData",
+            cookieId: "dynatree-Cb1",
+            idPrefix: "dynatree-Cb1-"
+        });
+        //Multi-Selection 
+        $("#tree5").dynatree({
+            checkbox: true,
+            selectMode: 2,
+            children: treeData,
+            onSelect: function (select, node) {
+                // Display list of selected nodes
+                var selNodes = node.tree.getSelectedNodes();
+                // convert to title/key array
+                var selKeys = $.map(selNodes, function (node) {
+                    return "[" + node.data.key + "]: '" + node.data.title + "'";
+                });
+                $("#echoSelection3").text(selKeys.join(", "));
+            },
+            onClick: function (node, event) {
+                // We should not toggle, if target was "checkbox", because this
+                // would result in double-toggle (i.e. no toggle)
+                if (node.getEventTargetType(event) == "title")
+                    node.toggleSelect();
+            },
+            onKeydown: function (node, event) {
+                if (event.which == 32) {
+                    node.toggleSelect();
+                    return false;
+                }
+            },
+            // The following options are only required, if we have more than one tree on one page:
+            cookieId: "dynatree-Cb2",
+            idPrefix: "dynatree-Cb2-"
+        });
+        // Drag-and-drop 
+        $("#tree6").dynatree({
+            initAjax: {
+                url: "assets/plugins/dynatree/tests/sample-data1.json"
+            },
+            onLazyRead: function (node) {
+                // Mockup a slow reqeuest ...
+                node.appendAjax({
+                    url: "sample-data2.json",
+                    debugLazyDelay: 750 // don't do this in production code
+                });
+            },
+            dnd: {
+                preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
+                onDragStart: function (node) {
+                    /** This function MUST be defined to enable dragging for the tree.
+                     *  Return false to cancel dragging of node.
+                     */
+                    return true;
+                },
+                onDragEnter: function (node, sourceNode) {
+                    /** sourceNode may be null for non-dynatree droppables.
+                     *  Return false to disallow dropping on node. In this case
+                     *  onDragOver and onDragLeave are not called.
+                     *  Return 'over', 'before, or 'after' to force a hitMode.
+                     *  Return ['before', 'after'] to restrict available hitModes.
+                     *  Any other return value will calc the hitMode from the cursor position.
+                     */
+                    // Prevent dropping a parent below another parent (only sort
+                    // nodes under the same parent)
+                    if (node.parent !== sourceNode.parent) {
+                        return false;
+                    }
+                    // Don't allow dropping *over* a node (would create a child)
+                    return ["before", "after"];
+                },
+                onDrop: function (node, sourceNode, hitMode, ui, draggable) {
+                    /** This function MUST be defined to enable dropping of items on
+                     *  the tree.
+                     */
+                    sourceNode.move(node, hitMode);
+                }
+            }
+        });
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runTreeView();
+        }
+    };
+}();

assets/js/utility-coming-soon.js

@@ -0,0 +1,95 @@
+var ComingSoon = function () {
+    //function to initiate Countdown
+    var runComingSoon = function () {
+        $("#countdown").countdown({
+            date: "10 august 2015 12:00:00",
+            format: "on"
+        }, function () {
+            // callback function
+        });
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runComingSoon();
+        }
+    };
+}();
+//Countdown plugin
+(function ($) {
+    $.fn.countdown = function (options, callback) {
+        //custom 'this' selector
+        thisEl = $(this);
+        //array of custom settings
+        var settings = {
+            'date': null,
+            'format': null
+        };
+        //append the settings array to options
+        if (options) {
+            $.extend(settings, options);
+        }
+        //main countdown function
+        function countdown_proc() {
+            eventDate = Date.parse(settings['date']) / 1000;
+            currentDate = Math.floor($.now() / 1000);
+            if (eventDate <= currentDate) {
+                callback.call(this);
+                clearInterval(interval);
+            }
+            seconds = eventDate - currentDate;
+            days = Math.floor(seconds / (60 * 60 * 24));
+            //calculate the number of days
+            seconds -= days * 60 * 60 * 24;
+            //update the seconds variable with no. of days removed
+            hours = Math.floor(seconds / (60 * 60));
+            seconds -= hours * 60 * 60;
+            //update the seconds variable with no. of hours removed
+            minutes = Math.floor(seconds / 60);
+            seconds -= minutes * 60;
+            //update the seconds variable with no. of minutes removed
+            //conditional Ss
+            if (days == 1) {
+                thisEl.find(".timeRefDays").text("day");
+            } else {
+                thisEl.find(".timeRefDays").text("days");
+            }
+            if (hours == 1) {
+                thisEl.find(".timeRefHours").text("hour");
+            } else {
+                thisEl.find(".timeRefHours").text("hours");
+            }
+            if (minutes == 1) {
+                thisEl.find(".timeRefMinutes").text("minute");
+            } else {
+                thisEl.find(".timeRefMinutes").text("minutes");
+            }
+            if (seconds == 1) {
+                thisEl.find(".timeRefSeconds").text("second");
+            } else {
+                thisEl.find(".timeRefSeconds").text("seconds");
+            }
+            //logic for the two_digits ON setting
+            if (settings['format'] == "on") {
+                days = (String(days).length >= 2) ? days : "0" + days;
+                hours = (String(hours).length >= 2) ? hours : "0" + hours;
+                minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
+                seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
+            }
+            //update the countdown's html values.
+            if (!isNaN(eventDate)) {
+                thisEl.find(".days").text(days);
+                thisEl.find(".hours").text(hours);
+                thisEl.find(".minutes").text(minutes);
+                thisEl.find(".seconds").text(seconds);
+            } else {
+                alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
+                clearInterval(interval);
+            }
+        }
+        //run the function
+        countdown_proc();
+        //loop the function
+        interval = setInterval(countdown_proc, 1000);
+    };
+})(jQuery);

assets/js/utility-error404.js

@@ -0,0 +1,35 @@
+var Error404 = function () {
+    //function to initiate RainyDay
+    var getURLParameter = function (name) {
+        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
+    };
+    var runRainyDay = function () {
+        var image = document.getElementById('background');
+        image.onload = function () {
+            var engine = new RainyDay('canvas', 'background', window.innerWidth, window.innerHeight, 1, getURLParameter("blur") || 20);
+            var preset = 3 || 1;
+            if (preset == 1) {
+                engine.gravity = engine.GRAVITY_NON_LINEAR;
+                engine.trail = engine.TRAIL_DROPS;
+                engine.rain([engine.preset(3, 3, 0.88), engine.preset(5, 5, 0.9), engine.preset(6, 2, 1)], 100);
+            } else if (preset == 2) {
+                engine.gravity = engine.GRAVITY_NON_LINEAR;
+                engine.trail = engine.TRAIL_DROPS;
+                engine.VARIABLE_GRAVITY_ANGLE = Math.PI / 8;
+                engine.rain([engine.preset(0, 2, 0.5), engine.preset(4, 4, 1)], 50);
+            } else if (preset == 3) {
+                engine.gravity = engine.GRAVITY_NON_LINEAR;
+                engine.trail = engine.TRAIL_SMUDGE;
+                engine.rain([engine.preset(0, 2, 0.5), engine.preset(4, 4, 1)], 50);
+            }
+        };
+        image.crossOrigin = "anonymous";
+        image.src = "assets/images/back-error-page.jpg";
+    };
+    return {
+        //main function to initiate template pages
+        init: function () {
+            runRainyDay();
+        }
+    };
+}();