zurfyx/timetable.html

## timetable.html
<html>
<head>
  <title>Timetable</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#fcdbff">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
</head>
<body>
  <div ng-app="timetable" ng-controller="sidebarCtrl">
  	<div class="header">
  		<div id="menu" ng-click="hidePanel=false">
  			<i class="fa fa-bars fa-2x"></i>
  		</div>
  		<div id="logo">
  			<img src="http://goo.gl/x4frbp">
  		</div>
  	</div>
  	<div class="content">
  		<div class="sidebar" ng-class="{hide: hidePanel}">
  			<img src="http://goo.gl/x4frbp">
  			<ul>
  				<li ng-class="{selected: !$root.all}" ng-click="enableRecent()">Recent</li>
  				<li ng-class="{selected: $root.all}" ng-click="enableAll()">Tots</li>
  			</ul>
  		</div>
  		<div class="timetable" ng-controller="timetableCtrl">
  			<!-- RECENT -->
  			<div class="day" ng-repeat="day in showSchedules() track by $index">
  				<header>
  					<div class="day-head">
  						<span ng-show="!all">{{day | uppercase}} ({{getDayToday($index)}})</span>
  						<span ng-show="all">{{getDayToday($index) | uppercase}}</span>
  					</div>
  				</header>
  				<description>
  					<div class="day-description">
  						<li ng-repeat="e in todaySchedules($index)">
  							<ul>
  									<div><time>{{e.start}} - {{e.end}}</time> {{e.descrip}}</div>
  									<div class="comment">{{e.group}} {{e.loc}}</div>
  							</ul>
  						</li>
  						<div class="no-schedules">
  							<span ng-show="!todaySchedules($index).length">N/A</span>
  						</div>
  					</div>
  				</description>
  			</div>
  		</div>
  	</div>
  </div>
  <style>
    html,body{
  	background-color:#eeeeee;
  	margin:0;
  	padding:0;
  	font: 14px Verdana;
  }

  li{
  	display: block;
  }

  li ul{
  	margin: 0;
  	padding: 0;
  }

  .hide{
  	display: none;
  }

  /* SIDEBAR */
  .sidebar {
  	border-right: 1px solid #ccc;
  	position: fixed;
  	background-color: #fff;
  	top: 0;
  	left: 0;
  	width: 80%;
  	height: 100%;
  	z-index:3;
  }

  .sidebar img {
  	padding: 15px;
  }

  .sidebar ul, .sidebar ul li {
  	padding: 0;
  	margin: 0;
  }

  .sidebar ul li {
  	padding: 10px;
  	margin-top: 10px;
  }

  .sidebar ul li.selected {
  	background-color: #ddd;
  }

  /* TIMETABLE */

  .content{
  	padding-top:90px;
  }

  .day{
  	margin-bottom:20px;
  }

  .day header{
  	padding:7px 14px 7px 14px;
  	font-weight:600;
  	font-size:15px;
  }

  .day .no-schedules{
  	color:#999;
  }

  .day .comment{
  	color:#555;
  	font-size:9px;
  	position:relative;
  	text-align:right;
  	top: 10px;
  }

  .day li{
  	padding:4px 7px 4px 7px;
  }

  .day ul, .day .no-schedules{
  	padding:15px 10px 15px 10px;
  }

  .day time{
  	font-size:15px;
  }

  /*.day header span{
  	background-color:#e3e3e3;
  	padding:3px 15px 3px 15px;
  	border-radius:10px;
  }*/

  .day header{
  	color:#3e3e3e;
  }

  .day description ul{
  	background-color:#fff;
  	border:1px solid #ddd;
  	border-radius:3px;
  	box-shadow:0px 1px 0px #d3d3d3;
  }

  #logo{
  	background-color:#fcdbff;
  	box-shadow: 0px 2px 1px #dcdbdb;
  	text-align:center;
  	margin-bottom:8px;
  	padding-bottom:4px;
  	border-bottom: 1px solid #ccc;
  	position:fixed;
  	width:100%;
  }

  #menu{
  	color: #333;
  	position: fixed;
  	left: 10px;
  	top: 10px;
  	z-index: 2;
  }
  </style>
  <script>
    var app = angular.module('timetable',
  	[]
  );

  app.factory('timetableDate',[function(){
  	return{
  		getDayToday: function(i){
  			var datenow = new Date();
  			var dayn = (datenow.getDay()+i)%7;
  			var weekDays = ['diumenge','dilluns','dimarts','dimecres','dijous','divendres','dissabte'];
  			return weekDays[dayn];
  		}
  	};
  }]);

  app.controller('timetableCtrl',['$scope','$rootScope','timetableDate',function($scope,$rootScope,timetableDate){
  	//data
  	var schedules = { // gestió i millora, models de procés, sistemes web, enginyeria requeriments, ampliació
  		'diumenge': [],
  		'dilluns': [
  			{'start':'9:00','end':'10:50','group':'GG','loc':'P2.09','descrip':'Sistemes i tecnologies web'},
  			{'start':'11:10','end':'13:00','group':'GMB','loc':'Alcatel','descrip':'Sistemes i tecnologies web'},
  			{'start':'13:10','end':'14:00','group':'GG','loc':'P2.09','descrip':'AmpBBDD i enginyeria del programari'},
  			{'start':'19:00','end':'21:00','group':'','loc':'P1.09','descrip':'Els enginyers i el seu entorn socioprofessional'}
  		],
  		'dimarts': [
  			{'start':'9:00','end':'10:50','group':'GG','loc':'P1.08','descrip':'Enginyeria de requeriments'},
  			{'start':'11:10','end':'13:00','group':'GMB','loc':'P2.09','descrip':'AmpBBDD i enginyeria del programari'},
  		],
  		'dimecres': [
  			{'start':'9:00','end':'10:50','group':'GG','loc':'P1.08','descrip':'Process models'},
  			{'start':'11:10','end':'13:00','group':'GG','loc':'P1.08','descrip':'Quality management and improvement'},
  		],
  		'dijous': [
  			{'start':'9:00','end':'10:50','group':'GG','loc':'P1.08','descrip':'Enginyeria de requeriments'},
  			{'start':'11:10','end':'12:00','group':'GG','loc':'P2.09','descrip':'AmpBBDD i enginyeria del programari'},
  		],
  		'divendres': [
  			{'start':'9:00','end':'10:50','group':'GG','loc':'P1.08','descrip':'Process models'},
  			{'start':'11:10','end':'13:00','group':'GG','loc':'P2.09','descrip':'Quality management and improvement'},
  		],
  		'dissabte': []
  	}

  	$rootScope.all = false;
  	$scope.getDayToday = timetableDate.getDayToday;
  	$scope.schedules = schedules;
  	$scope.todaySchedules = function(i){
  		return schedules[timetableDate.getDayToday(i)];
  	}
  	$scope.showSchedules = function() {
  		return $rootScope.all ? schedules : ['avui','demà'];
  	}

  }]);

  app.controller('sidebarCtrl', ['$scope','$rootScope', function($scope, $rootScope){
  	var hidePanel = function(){
  		$scope.hidePanel = true;
  	}

  	$scope.enableRecent = function(){
  		$rootScope.all = false;
  		hidePanel();
  	}

  	$scope.enableAll = function() {
  		$rootScope.all = true;
  		hidePanel();
  	}

  	$scope.hidePanel = true;
  }]);
  </script>
</body>
</html>
	<html>
	<head>
	<title>Timetable</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="theme-color" content="#fcdbff">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
	</head>
	<body>
	<div ng-app="timetable" ng-controller="sidebarCtrl">
	<div class="header">
	<div id="menu" ng-click="hidePanel=false">
	<i class="fa fa-bars fa-2x"></i>
	</div>
	<div id="logo">
	<img src="http://goo.gl/x4frbp">
	</div>
	</div>
	<div class="content">
	<div class="sidebar" ng-class="{hide: hidePanel}">
	<img src="http://goo.gl/x4frbp">
	<ul>
	<li ng-class="{selected: !$root.all}" ng-click="enableRecent()">Recent</li>
	<li ng-class="{selected: $root.all}" ng-click="enableAll()">Tots</li>
	</ul>
	</div>
	<div class="timetable" ng-controller="timetableCtrl">
	<!-- RECENT -->
	<div class="day" ng-repeat="day in showSchedules() track by $index">
	<header>
	<div class="day-head">
	<span ng-show="!all">{{day \| uppercase}} ({{getDayToday($index)}})</span>
	<span ng-show="all">{{getDayToday($index) \| uppercase}}</span>
	</div>
	</header>
	<description>
	<div class="day-description">
	<li ng-repeat="e in todaySchedules($index)">
	<ul>
	<div><time>{{e.start}} - {{e.end}}</time> {{e.descrip}}</div>
	<div class="comment">{{e.group}} {{e.loc}}</div>
	</ul>
	</li>
	<div class="no-schedules">
	<span ng-show="!todaySchedules($index).length">N/A</span>
	</div>
	</div>
	</description>
	</div>
	</div>
	</div>
	</div>
	<style>
	html,body{
	background-color:#eeeeee;
	margin:0;
	padding:0;
	font: 14px Verdana;
	}

	li{
	display: block;
	}

	li ul{
	margin: 0;
	padding: 0;
	}

	.hide{
	display: none;
	}

	/* SIDEBAR */
	.sidebar {
	border-right: 1px solid #ccc;
	position: fixed;
	background-color: #fff;
	top: 0;
	left: 0;
	width: 80%;
	height: 100%;
	z-index:3;
	}

	.sidebar img {
	padding: 15px;
	}

	.sidebar ul, .sidebar ul li {
	padding: 0;
	margin: 0;
	}

	.sidebar ul li {
	padding: 10px;
	margin-top: 10px;
	}

	.sidebar ul li.selected {
	background-color: #ddd;
	}

	/* TIMETABLE */

	.content{
	padding-top:90px;
	}

	.day{
	margin-bottom:20px;
	}

	.day header{
	padding:7px 14px 7px 14px;
	font-weight:600;
	font-size:15px;
	}

	.day .no-schedules{
	color:#999;
	}

	.day .comment{
	color:#555;
	font-size:9px;
	position:relative;
	text-align:right;
	top: 10px;
	}

	.day li{
	padding:4px 7px 4px 7px;
	}

	.day ul, .day .no-schedules{
	padding:15px 10px 15px 10px;
	}

	.day time{
	font-size:15px;
	}

	/*.day header span{
	background-color:#e3e3e3;
	padding:3px 15px 3px 15px;
	border-radius:10px;
	}*/

	.day header{
	color:#3e3e3e;
	}

	.day description ul{
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:3px;
	box-shadow:0px 1px 0px #d3d3d3;
	}

	#logo{
	background-color:#fcdbff;
	box-shadow: 0px 2px 1px #dcdbdb;
	text-align:center;
	margin-bottom:8px;
	padding-bottom:4px;
	border-bottom: 1px solid #ccc;
	position:fixed;
	width:100%;
	}

	#menu{
	color: #333;
	position: fixed;
	left: 10px;
	top: 10px;
	z-index: 2;
	}
	</style>
	<script>
	var app = angular.module('timetable',
	[]
	);

	app.factory('timetableDate',[function(){
	return{
	getDayToday: function(i){
	var datenow = new Date();
	var dayn = (datenow.getDay()+i)%7;
	var weekDays = ['diumenge','dilluns','dimarts','dimecres','dijous','divendres','dissabte'];
	return weekDays[dayn];
	}
	};
	}]);

	app.controller('timetableCtrl',['$scope','$rootScope','timetableDate',function($scope,$rootScope,timetableDate){
	//data
	var schedules = { // gestió i millora, models de procés, sistemes web, enginyeria requeriments, ampliació
	'diumenge': [],
	'dilluns': [
	{'start':'9:00','end':'10:50','group':'GG','loc':'P2.09','descrip':'Sistemes i tecnologies web'},
	{'start':'11:10','end':'13:00','group':'GMB','loc':'Alcatel','descrip':'Sistemes i tecnologies web'},
	{'start':'13:10','end':'14:00','group':'GG','loc':'P2.09','descrip':'AmpBBDD i enginyeria del programari'},
	{'start':'19:00','end':'21:00','group':'','loc':'P1.09','descrip':'Els enginyers i el seu entorn socioprofessional'}
	],
	'dimarts': [
	{'start':'9:00','end':'10:50','group':'GG','loc':'P1.08','descrip':'Enginyeria de requeriments'},
	{'start':'11:10','end':'13:00','group':'GMB','loc':'P2.09','descrip':'AmpBBDD i enginyeria del programari'},
	],
	'dimecres': [
	{'start':'9:00','end':'10:50','group':'GG','loc':'P1.08','descrip':'Process models'},
	{'start':'11:10','end':'13:00','group':'GG','loc':'P1.08','descrip':'Quality management and improvement'},
	],
	'dijous': [
	{'start':'9:00','end':'10:50','group':'GG','loc':'P1.08','descrip':'Enginyeria de requeriments'},
	{'start':'11:10','end':'12:00','group':'GG','loc':'P2.09','descrip':'AmpBBDD i enginyeria del programari'},
	],
	'divendres': [
	{'start':'9:00','end':'10:50','group':'GG','loc':'P1.08','descrip':'Process models'},
	{'start':'11:10','end':'13:00','group':'GG','loc':'P2.09','descrip':'Quality management and improvement'},
	],
	'dissabte': []
	}

	$rootScope.all = false;
	$scope.getDayToday = timetableDate.getDayToday;
	$scope.schedules = schedules;
	$scope.todaySchedules = function(i){
	return schedules[timetableDate.getDayToday(i)];
	}
	$scope.showSchedules = function() {
	return $rootScope.all ? schedules : ['avui','demà'];
	}

	}]);

	app.controller('sidebarCtrl', ['$scope','$rootScope', function($scope, $rootScope){
	var hidePanel = function(){
	$scope.hidePanel = true;
	}

	$scope.enableRecent = function(){
	$rootScope.all = false;
	hidePanel();
	}

	$scope.enableAll = function() {
	$rootScope.all = true;
	hidePanel();
	}

	$scope.hidePanel = true;
	}]);
	</script>
	</body>
	</html>