summaryrefslogblamecommitdiffstats
path: root/modules-available/locationinfo/frontend/panel.html
blob: 356c948b4200ab728bfe849b8d88db71e2c9decd (plain) (tree)
1
2
3
4
5
6
7
8
9





                                                                                      


                                                                                    








                                                                                    
                                       












                                                                                    


                        
                                             
                                         

                            

                                         



                                                                                    
                                         


                                                                                    

                                               




                                                                    

                                      
                                           
                                         
                                         
                                               



























                                                   


                                                                                                               






                                           




                                       
                                        

                                    
                                                         
                                                             

 
                                               

                                              
                               

                   

                                                        
                             
                                                                                                                   
                                                       
 

                                                         
                           
 











                                                                         
                                                                     





































                                                                                                                                 
 

















                                                                        
 


























                                                                                                                                                                                 
                                                             


                                                     

                 










                                                                                                                                            
 

























                                                                                                                              



                                                     
 

                                                    

                                                                      
                                                                                                       

                                                                 
                                                                                                       


                                                                 
                         


                                                                        
                         
 
                 
 



                                                   
                                                                                                                    



                         
                                                  
                                    







                                                   


                                         
                                                       
                                                                 

                                                                          


                                                                                    
                                                                                  

                                                 
                                                          

                                 
 
                         
                                       










                                                                      
                                               
                                                                                                               
 


                                                           
 













                                                                                                       
                                                                                                                                 

















                                                                                                                    


                                                        


                                                                   


















                                                                          

                                             


                               








                                                                                                                       
                                                                                     








                                                                                                                                 
 








                                                                
                                                                 





























                                                                                                              



                                                               

























                                                                                                               













                                                                
                                                        
 
                                                                   


                                                                          



                                                                                                      
                                          

                                                                                                   
                                               
                            


                 

                                                          
                                                            




                                                                  

















                                                                               




                                                                                               
 







                                                                                                          

































                                                                                   





















                                                                                           

                                                                     


                   
                                
                             

       
<!DOCTYPE html>
<html lang="de">
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<head>
	<script type='text/javascript' src='../../../script/jquery.js'></script>
	<style type='text/css'>
		body{
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
		.main{
			background-color: lightgrey;

		}

		.child{
			background-color: white;
			display: inline-block;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			padding: 1vmin;
			float:left;
		}
		.parent{
			background-color: white;
			display: inline-block;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			padding: 1vmin;
			float:left
		}
		.childWithBorder{
			display: inline-flex;
			padding: 0.4vmin;
			width:20vm;

		}
		.border{
			display: inline-flex;
			padding: 0.4vmin;
		}
		.courseFont{
			padding: 0.5vmin;
			font-size: 2vmin;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-weight: bold;
		}
		.headerFont{
			font-size: 4vmin;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-weight: bold;
			border: 0px;
			border-bottom: 0.2vmin;
			margin-bottom: 1vmin;
			border-color: grey;
			border-style:solid;

		}
		.divPcOn, .divPcPcUsed, .divPcPcOff, .divPcPcDefect{
			width: 4vmin;
			height: 4vmin;
			text-align: center;
			font-size: 3vmin;
			font-weight: 800;
			border-radius: 0.4vmin;

		}

		.divPcOn {
			background-color: green;
			text-align: center;
		}
		.divPcPcUsed{

			background-color: red;
		}
		.divPcPcOff{
			background-color: darkgrey;
		}
		.divPcPcDefect{
			background-color: black;
			color: white;
		}

		.divAroundPcStates{
			display: flex;
			justify-content: flex-end;

		}
		.paperEffect
		{
			margin: 0 auto;
			background-color: #fff;
			-webkit-box-shadow: 0 0 0.2vmin rgba(0, 0, 0, 0.4), inset 0 0 1vmin rgba(0, 0, 0, 0.1);
			-moz-box-shadow: 0 0 0.2vmin rgba(0, 0, 0, 0.4), inset 0 0 1vmin rgba(0, 0, 0, 0.1);
			box-shadow: 0 0 0.2vmin rgba(0, 0, 0, 0.4), inset 0 0 1vmin rgba(0, 0, 0, 0.1);
			border-radius: 1px;
		}



	</style>
	<script type='text/javascript'>

		var rooms = {};
		var startdate;
		var roomidsString = "";
		var lastPcUpdate;
		var lastTimeTableUpdate;

		// Todo change these
		var pcStateUpdateTime = 60; // in seconds
		var TimeTableUpdateTime = 60*30; //in seconds


		$(document).ready(function () {
			//temp
			SetUpDate(new Date());
			init();
		});

		function init() {
			var ids = getUrlParameter("id");
            console.log(ids);
			$.getJSON("../../../api.php?do=locationinfo&action=roomtree&id=" + ids, function (result) {
				generateLayout(result);

				setInterval(update,1000);

			});

		}

		function SetUpDate(d) {
			startdate = d.getTime()-new Date().getTime();
		}

		function MyDate() {
			return new Date(startdate +new Date().getTime());
		}

		function generateLayout(json) {
			for (var i = 0; i< json.length;i++){
				generateObject(json[i],($("#main")));

			}
		}


		function generateObject(json,myParent){
			if(json.childs.length == 0) {
				generateChild(myParent,json.id,json.name)
			} else {
				generateParent(myParent,json.id,json.name);
				for (var i = 0; i < json.childs.length;i++){

					generateObject(json.childs[i],$("#parent_"+json.id));
				}
			}

		}

		function getNextEvent(json) {
			var event;
			var now = new MyDate();
			for (var i = 0; i < json.length; i++) {
				//event is now active
				if (json[i].start.getTime() < now.getTime() && json[i].end.getTime() > now.getTime()) {
					return json[i];
				}
				//first element to consider
				if (event == null) {
					if (json[i].start.getTime() > now.getTime()) {
						event = json[i];
					}
				}
				if (json[i].start.getTime() > now.getTime() && event.start.getTime() > json[i].start.getTime()) {
					event = json[i];
				}
			}
			return event;
		}

        /**
         * Helper function to generate id string used in query functions
         * @param list A string, wicht contains ids or not(for now)
         * @param id An ID which should be added to the list
         */
        function addIdToUpdateList(list, id) {
            if (list == "") {
                list += id;
            } else {
                list += ("," + id);
            }
            return list;
        }



        var timeSteps = 10;
		function update() {

            if (timeSteps > 9) {
                timeSteps = 0;

                var calendarUpdateIds = "";
                var rommUpdateIds = "";
                for (var property in rooms) {
                    if (rooms[property].config.lastCalendarUpdate == null || rooms[property].config.lastCalendarUpdate + rooms[property].config.calupdate < MyDate().getTime()) {

                        calendarUpdateIds = addIdToUpdateList(calendarUpdateIds, rooms[property].id);
                        rooms[property].config.lastCalendarUpdate = MyDate().getTime();
                    }
                    if (rooms[property].config.lastRoomUpdate == null || rooms[property].config.lastRoomUpdate + rooms[property].config.roomupdate < MyDate().getTime()) {
                        rommUpdateIds = addIdToUpdateList(rommUpdateIds, rooms[property].id);
                        rooms[property].config.lastRoomUpdate = MyDate().getTime();
                    }
                }


                if (calendarUpdateIds != "") {
                    console.log(calendarUpdateIds);
                    queryCalendars(calendarUpdateIds);
                }
                if (rommUpdateIds != "") {
                    queryRooms(rommUpdateIds);
                }
            }
            // TODO
				for (var property in rooms) {
                    upDateRoomState(rooms[property]);
                }


		}
		function UpdateTimeTables(json) {
			var l = json.length;
			for (var i = 0; i < l;i++){
				rooms[json[i].id].timetable = json[i].calendar;
				for (var property in rooms[json[i].id].timetable ) {
					rooms[json[i].id].timetable[property].start = new Date(rooms[json[i].id].timetable[property].start);
					rooms[json[i].id].timetable[property].end = new Date(rooms[json[i].id].timetable[property].end);
				}
				ComputeCurrentState(rooms[json[i].id]);
			}
		}

        /**
         * Querys Pc states
         * @param ids Room ID's which should be queried. Format for e.g.: "20,5,6"
         */
        function queryRooms(ids) {
            $.ajax({
                url: "../../../api.php?do=locationinfo&action=pcstates&id=" + ids,
                dataType: 'json',
                cache: false,
                timeout: 30000,
                success: function (result) {
                    var l = result.length;
                    if (result[0] == null) {
                        console.log("Error: Backend reported null back for RoomUpdate, this might happend if the room isn't" +
                            "configurated.");
                        return;
                    }
                    updatePcStates(result);
                }, error: function () {

                }
            })
        }


        function upDateRoomState(room) {
			if(room === undefined){
				console.log("error");
				return;
			}

			var state = room.getState();

			if(state.state == "ClaendarEvent") {
				updateCourseText(room.id,state.titel);
				updateCoursTimer(room.id,GetTimeDiferenceAsString(state.end,MyDate()));
			} else if(state.state == "Free") {
				updateCourseText(room.id,"Frei");
				updateCoursTimer(room.id,GetTimeDiferenceAsString(state.end,MyDate()));
			} else if(state.state == "FreeNoEnd") {
				updateCourseText(room.id,"Frei");
				updateCoursTimer(room.id,"");
			}
			else if(state.state == "closed") {
				updateCourseText(room.id,"Geschlossen");
				updateCoursTimer(room.id,"");
			}

		}


		function updatePcStates(json){
			var l = json.length;
			for (var i = 0; i < l;i++){
				updateRoomUsage(json[i].id,json[i].idle,json[i].occupied,json[i].off,json[i].broken)
			}

		}

		function addRoom(id,name,config) {
			var room = {
				id: id,
				name: name,
				timetable: null,
				currentEvent: null,
				nextEventEnd: null,
				timeTilFree: null,
				state: null,
				openingTimes: null,
                config: config,
                lastCalendarUpdate: null,
                lastRoomUpdate: null,
				getState: function () {
					if (this.state == null) {
						ComputeCurrentState(this);
						return this.state;
					}
					if (this.state.end != "") {
						if (this.state.end < new MyDate()) {
							ComputeCurrentState(this);
						}
					}
					return this.state;
				}


			}
			rooms[id]=room;

			if(roomidsString == "") {
				roomidsString = id;
			} else {
				roomidsString = roomidsString +","+id;
			}
		}


		//need testing
		function ComputeCurrentState(room) {
			if (!IsOpenNow(room)) {
				room.state = {state: "closed", end: GetNextOpening(room), titel: "", next: ""};

				return;
			}
			var closing = GetNextClosing(room);

			var event = getNextEvent(room.timetable);
			// no event and no closing
			if (closing == null && event == null) {
				room.state = {state: "FreeNoEnd", end: "", titel: "", next: ""};
				return;
			}

			// no event so closing is next
			if (event == null) {
				room.state = {state: "Free", end: closing, titel: "", next: "closing"};
				return;
			}

			// event is at the moment
			if ((closing==null||event.start.getTime() < closing.getTime()) && event.start.getTime() < new MyDate()) {
				room.state = {state: "ClaendarEvent", end: event.end, titel: event.title, next: ""};
				return;
			}

			// no closing so event is next
			if (closing == null) {
				room.state = {state: "Free", end: event.start, titel: "", next: "event"};
				return;
			}

			// event sooner then closing
			if (event.start.getTime() < closing) {
				room.state = {state: "Free", end: event.start, titel: "", next: "event"};
			} else if (event.start.getTime() > closing) {
				room.state = {state: "Free", end: closing, titel: "", next: "closing"};
			}
		}

		function IsOpenNow(room) {
			var now = new MyDate();
			if (room.openingTimes == null) {

				// changes from falls needs testing
				return true;
			}
			var tmp = room.openingTimes[now.getDay()];
			if (tmp == null) {
				return false;
			}
			for (var i = 0; i < tmp.length; i++) {
				var openDate = new MyDate();
				openDate.setHours(tmp[i].HourOpen);
				openDate.setMinutes(tmp[i].MinutesOpen);
				var closeDate = new MyDate();
				closeDate.setHours(tmp[i].HourClose);
				closeDate.setMinutes(tmp[i].MinutesClose);
				if (openDate < now && closeDate > now) {
					return true;
				}
			}
			return false;
		}

		//need testing
		function getNextEvent(json) {
            if (json == null) {
                return;
            }
			var event;
			var now = new MyDate();
			for (var i = 0; i < json.length; i++) {
				//event is now active
				if (json[i].start.getTime() < now.getTime() && json[i].end.getTime() > now.getTime()) {
					return json[i];
				}
				//first element to consider
				if (event == null) {
					if(json[i].start.getTime() > now.getTime()) {
						event = json[i];
					}
				}
				if (json[i].start.getTime() > now.getTime() && event.start.getTime() > json[i].start.getTime()) {
					event = json[i];
				}
			}
			return event;
		}

		function GetNextOpening(room) {
			var now = new MyDate();
			var day = now.getDay();
			var offset = 0;
			var bestdate;
			for (var a = 0; a < 7; a++) {
				if (room.openingTimes == null) {
					return null;
				}
				var tmp = room.openingTimes[day];
				if (tmp != null) {
					for (var i = 0; i < tmp.length; i++) {
						var openDate = new MyDate();
						openDate.setDate(now.getDate() + offset);
						openDate.setHours(tmp[i].HourOpen);
						openDate.setMinutes(tmp[i].MinutesOpen);
						if (openDate > now) {
							if (!IsOpen(new Date(openDate.getTime() - 60000))) {
								if (bestdate == null || bestdate > openDate) {
									bestdate = openDate;
								}
							}
						}
					}
				}
				offset++;
				day++;
				if (day > 6) {
					day = 0;
				}
			}
			return bestdate;
		}

		function GetNextClosing(room) {
			var now = new MyDate();
			var day = now.getDay();
			var offset = 0;
			var bestdate;
			for (var a = 0; a < 7; a++) {
				//Test
				if(room.openingTimes=== null) {
					return null;
				}
				var tmp = room.openingTimes[day];
				if (tmp != null) {
					for (var i = 0; i < tmp.length; i++) {
						var closeDate = new MyDate();
						closeDate.setDate(now.getDate() + offset);
						closeDate.setHours(tmp[i].HourClose);
						closeDate.setMinutes(tmp[i].MinutesClose);
						if (closeDate > now) {
							if (!IsOpen(new Date(closeDate.getTime() + 60000))) {
								if (bestdate == null || bestdate > closeDate) {
									bestdate = closeDate;
								}
							}
						}
					}
				}
				offset++;
				day++;
				if (day > 6) {
					day = 0;
				}
			}
			return bestdate;
		}


		function updateRoomUsage(id,on,used,off,defect){
			$("#div_pc_On_"+id).text(on);
			$("#div_pc_Used_"+id).text(used);
			$("#div_pc_Off_"+id).text(off);
			$("#div_pc_Defect_"+id).text(defect);
		}

		function updateCourseText(id,text) {
			$("#div_course"+id).text(text);
		}
		function updateCoursTimer(id,time) {
			$("#div_Time_"+id).text(time);
		}

		function generateChild(target,id,name) {

			var text="<div class='childWithBorder'>"  +
				"<div class='child paperEffect'>" +
				"<div class='headerFont'>"+name+"</div>" +
				"<div class='divAroundPcStates'>" +
				"<div id = 'div_pc_On_"+id+"'  class='divPcOn '>"+0+"</div>" +
				"<div id = 'div_pc_Used_"+id+"' class='divPcPcUsed'>"+0+"</div>" +
				"<div id = 'div_pc_Off_"+id+"' class='divPcPcOff'>"+0+"</div>" +
				"<div id = 'div_pc_Defect_"+id+"' class='divPcPcDefect'>"+0+"</div>" +
				"</div>" +
				"<div id = 'div_course"+id+"'class='courseFont'></div>" +
				"<div id = 'div_Time_"+id+"'class='courseFont'></div></div></div>";
			$(target).append(text);
            getConfig((id));

		}

		function generateParent(target,id,name) {
			var text="<div class='border'>"  +
			"<div class='parent paperEffect'>" +
			"<div class='headerFont'>"+name+"</div>" +
				"<div id='parent_"+ id +"'</div>"+
				"</div></div>";
			$(target).append(text);
		}

        function getConfig(id) {
            $.ajax({
                url: "../../../api.php?do=locationinfo&action=config&id=" + id,
                dataType: 'json',
                cache: false,
                timeout: 30000,
                success: function (result) {
                        if (result.room != null) {
                            delete result.time;
                            room = addRoom(id, result.room, result);
                        }
                }, error: function () {
                    //Todo Error handling:
                }
            })
        }

		var getUrlParameter = function getUrlParameter(sParam) {
			var sPageURL = decodeURIComponent(window.location.search.substring(1)),
				sURLVariables = sPageURL.split('&'),
				sParameterName,
				i;

			for (i = 0; i < sURLVariables.length; i++) {
				sParameterName = sURLVariables[i].split('=');

				if (sParameterName[0] === sParam) {
					return sParameterName[1] === undefined ? true : sParameterName[1];
				}
			}
		};


        /**
         * querys the Calendar data
         * @param ids ID'S of rooms to query as string, for e.g.: "5,17,8" or "5"
         */
        function queryCalendars(ids) {
            var url = "../../../api.php?do=locationinfo&action=calendar&id=" + ids;

            // Todo reimplement Frontend methode if needed
			/*
			 if(!(room.config.calendarqueryurl === undefined)) {
			 url = room.config.calendarqueryurl;
			 }
			 */
            $.ajax({
                url: url,
                dataType: 'json',
                cache: false,
                timeout: 30000,
                success: function (result) {
                    console.log(result);
                    UpdateTimeTables(result);


                }, error: function () {

                }
            });
        }




		function GetTimeDiferenceAsString(a, b) {
			if (a == null || b == null) {
				return "";
			}
			var milliseconds = a.getTime() - b.getTime();
			var seconds = Math.floor((milliseconds / 1000) % 60);
			milliseconds -= seconds * 1000;
			var minutes = Math.floor((milliseconds / (1000 * 60)) % 60);
			milliseconds -= minutes * 1000 * 60;
			var hours = Math.floor((milliseconds / (1000 * 60 * 60)) % 24);

			var days = Math.floor((milliseconds / (1000 * 60 * 60 * 24)) % 31);
			if (seconds < 10) {
				seconds = "0" + seconds;
			}
			if (minutes < 10) {
				minutes = "0" + minutes;
			}
			if (days != 0) {
				// dont show?
				return "";
			}
			return hours + ":" + minutes + ":" + seconds;
		}
	</script>
</head>
<body class="main">
	<h1>Raum Übersicht</h1>
	<div id="main"></div>
</body>
</html>