<ons-page id="externalPage">
<ons-toolbar>
  <div class="left">
	<ons-back-button>Home</ons-back-button>
  </div>
  <div class="center"></div>
</ons-toolbar>
<ons-pull-hook id="pull-hook-notif" threshold-height="120px">
  <ons-icon id="pull-hook-icon-notif" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
</ons-pull-hook>
<ons-list id="data-list-notif">
  <ons-list-header style="text-align:center;"><small><em>(Pull to refresh)</em></small> </ons-list-header>
</ons-list>
<script>
  ons.getScriptPage().onInit = function () {
	this.querySelector('ons-toolbar div.center').textContent = this.data.title;
	var pullHookNotif = document.getElementById('pull-hook-notif');
	var iconNotif = document.getElementById('pull-hook-icon-notif');
	pullHookNotif.addEventListener('changestate', function (event) {
	  switch (event.state) {
		case 'initial':
		  iconNotif.setAttribute('icon', 'fa-arrow-down');
		  iconNotif.removeAttribute('rotate');
		  iconNotif.removeAttribute('spin');
		  break;
		case 'preaction':
		  iconNotif.setAttribute('icon', 'fa-arrow-down');
		  iconNotif.setAttribute('rotate', '180');
		  iconNotif.removeAttribute('spin');
		  break;
		case 'action':
		  iconNotif.setAttribute('icon', 'fa-spinner');
		  iconNotif.removeAttribute('rotate');
		  iconNotif.setAttribute('spin', true);
		  break;
	  }
	});
	loadData = function(){
		var jdata = (window.localStorage.getItem('HK_'+appVersion+'_notif'))?JSON.parse(window.localStorage.getItem('HK_'+appVersion+'_notif')):[];
		$("#data-list-notif").find("ons-list-item").remove();
		if(jdata.length>0){
			jdata.sort();
			jdata.reverse();
			jdata.sort(function(a, b) {
				return a.read > b.read;
			});
			jdata.sort();
			for(var i=0;i<jdata.length;i++){
				if(jdata[i].read==0){
					var bg = 'class="bold"'
				}else{
					var bg = '';	
				}
				var data = ons.createElement(`
							  <ons-list-item ${bg} onclick="readNotif(${jdata[i].id});replacePage('${jdata[i].url}','${jdata[i].title}',{'notif':${jdata[i].id}});">
								<div class="center">
									<table>
									<tr class="title"><td>${jdata[i].title}</td></tr>
									<tr class="msg"><td>${jdata[i].msg}</td></tr>
									<tr class="tm"><td class="time" data-time="${jdata[i].tgl}"></td></tr>
									</table>
								</div>
							  </ons-list-item>`);
				document.getElementById('data-list-notif').appendChild(data);
				initTimeAgo();
			}
		}else{
			var data = ons.createElement(`
							  <ons-list-item>
								<div class="center" style="text-align:center;">No data...</div>
							  </ons-list-item>`
						  );
			document.getElementById('data-list-notif').appendChild(data);
		}
	};
	pullHookNotif.onAction = function (done) {
	  loadData();
	  done();
	};
	readNotif=function(id){
		var bd = (window.localStorage.getItem('HK_'+appVersion+'_notif'))?JSON.parse(window.localStorage.getItem('HK_'+appVersion+'_notif')):[];
		for(i in bd){
			if(bd[i].id==id){
				bd[i].read=1;
				window.localStorage.setItem('HK_'+appVersion+'_notif',JSON.stringify(bd));
				loadData();
			}
		};
	};
	pullHookNotif.onAction(function(){});
  };
</script>
<style>
  #notifikasi .pull-hook-content {
	color: #666;
	transition: transform .25s ease-in-out;
  }
  #notifikasi .bold{
	font-weight:bold !important;
  }
  #notifikasi .title{
	font-size:16px;
  }
  #notifikasi .msg{
	font-size:12px;
  }
  #notifikasi .tm{
	font-size:11px;
  }
</style>
</ons-page>