<!DOCTYPE html>
<html ng-app="agendaEditor">
<head>
<meta charset="UTF-8">
<title>AgendaEditor</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="import/import.js"></script>
<script src="about/about.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">AgendaEditor</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#import">Import</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</div>
</nav>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
var app = angular.module('agendaEditor', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.otherwise({
redirectTo: '/home',
controller: 'homeController'
});
});
body {
padding-top: 70px;
}
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="form-group col-sm-2 col-sm-offset-9">
<label>Start time</label>
<input type="text" class="form-control" ng-model="startTime">
</div>
<table class="table">
<tr>
<td class="col-sm-5">Title</td>
<td class="col-sm-2">Name</td>
<td class="col-sm-2">Surname</td>
<td class="col-sm-2">Time</td>
<td class="col-sm-1"></td>
</tr>
<tr ng-repeat="item in list" ng-click="$last && addItem()">
<td><input class="form-control" type="text" ng-model="item.title"></td>
<td><input class="form-control" type="text" ng-model="item.name"></td>
<td><input class="form-control" type="text" ng-model="item.surname"></td>
<td><input class="form-control" type="text" ng-model="item.time"></td>
<td><button ng-if="!$first" type="button" class="btn btn-danger btn-xs" ng-click="list.splice($index, 1)">-</button></td>
</tr>
</table>
<button type="button" class="btn btn-primary" ng-click="addItem()">Add</button><br />
</div>
<div class="col-sm-4">
<h3>Agenda</h3>
<div class="panel panel-default">
<div class="panel-body">
<span ng-repeat="item in myResult() track by $index">{{item}}<br /></span>
</div>
</div>
</div>
</div>
</div>
angular.module('agendaEditor')
.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home/home.html',
controller: 'homeController'
});
})
.controller('homeController', function($scope) {
$scope.list = [];
$scope.list.push({title: "", name: "", surname: "", time: ""});
$scope.myResult = function () {
var result = [];
if($scope.startTime !== "") {
var lastTime = $scope.startTime;
for (var i = 0; i < $scope.list.length; i++) {
if($scope.list[i].title !== "" && $scope.list[i].time !== "" && $scope.list[i].time !== undefined){
var endTime = addTime(lastTime, $scope.list[i].time);
var concat = lastTime + "–" + endTime + " „" + $scope.list[i].title + "” – " + $scope.list[i].name + " " + $scope.list[i].surname;
result.push(concat);
lastTime = endTime;
}
}
}
return result;
};
$scope.addItem = function(){
$scope.list.push({title: "", name: "", surname: ""});
};
function addTime(start, time) {
var now = new Date();
now.setHours(start.split(":")[0]);
now.setMinutes(start.split(":")[1]);
now.setHours(now.getHours()+parseInt(time.split(":")[0]));
now.setMinutes(now.getMinutes()+parseInt(time.split(":")[1]));
var hours = (now.getHours()<10?'0':'') + now.getHours();
var minutes = (now.getMinutes()<10?'0':'') + now.getMinutes();
return hours + ":" + minutes;
};
});
<div class="container">
Tu będzie import.
</div>
angular.module('agendaEditor')
.config(function($routeProvider) {
$routeProvider
.when('/import', {
templateUrl: 'import/import.html',
controller: 'importController'
})
})
.controller('importController', function($scope) {
});
<div class="container">
O aplikacji.
</div>
angular.module('agendaEditor')
.config(function($routeProvider) {
$routeProvider
.when('/about', {
templateUrl: 'about/about.html',
controller: 'aboutController'
})
})
.controller('aboutController', function($scope) {
});