Initial work at moving to single page app (no php)

This commit is contained in:
Kyle Johnson 2015-02-11 14:09:41 -05:00
parent 9a9f747b67
commit 5cf9677680
4 changed files with 50 additions and 13 deletions

View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en" ng-app="ZoneMinder">
<head>
<title>ZoneMinder</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link rel="icon" type="image/ico" href="graphics/favicon.ico"/>
<link rel="shortcut icon" href="graphics/favicon.ico"/>
<link rel="stylesheet" href="skins/bootstrap/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="skins/bootstrap/css/datetimepicker.css" type="text/css" />
<link rel="stylesheet" href="skins/bootstrap/css/skin.css" type="text/css" />
<script type="text/javascript" src="skins/bootstrap/js/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.min.js"></script>
<script src="skins/bootstrap/js/dirPagination.js"></script>
<script type="text/javascript" src="skins/bootstrap/js/Chart.min.js"></script>
<script src="skins/bootstrap/js/app.js"></script>
<script src="skins/bootstrap/js/controllers.js"></script>
<script type="text/javascript" src="skins/bootstrap/js/tc-angular-chartjs.min.js"></script>
<script type="text/javascript" src="skins/bootstrap/js/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script type="text/javascript" src="skins/bootstrap/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="skins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="skins/bootstrap/js/datetimepicker.js"></script>
</head>
<body>
<div ng-include="'/skins/bootstrap/views/header.html'"></div>
<div ng-view></div>
</body>
</html>

View File

@ -3,11 +3,21 @@ var ZoneMinder = angular.module('ZoneMinder', [
'tc.chartjs', 'tc.chartjs',
'ui.bootstrap', 'ui.bootstrap',
'angularUtils.directives.dirPagination', 'angularUtils.directives.dirPagination',
'ui.bootstrap.datetimepicker' 'ui.bootstrap.datetimepicker',
'ngRoute'
]); ]);
ZoneMinder.config(['$locationProvider', function($locationProvider){ ZoneMinder.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true); $locationProvider.html5Mode(true);
$routeProvider
.when('/skins/bootstrap/', {
templateUrl: '/skins/bootstrap/views/console.html'
})
.when('/#events', {
templateUrl: '/skins/bootstrap/views/events.html'
});
}]); }]);
ZoneMinder.config(function(paginationTemplateProvider) { ZoneMinder.config(function(paginationTemplateProvider) {
paginationTemplateProvider.setPath('skins/bootstrap/js/dirPagination.tpl.html'); paginationTemplateProvider.setPath('skins/bootstrap/js/dirPagination.tpl.html');

View File

@ -1,9 +1,3 @@
<?php xhtmlHeaders(__FILE__, $SLANG['Events'] ); ?>
<body>
<?php include("header.php"); ?>
<div class="container-fluid" ng-controller="EventsController"> <div class="container-fluid" ng-controller="EventsController">
<div class="row"> <div class="row">
@ -30,5 +24,3 @@
</div> <!-- End main .col-md-10 --> </div> <!-- End main .col-md-10 -->
</div> <!-- End .row --> </div> <!-- End .row -->
</div> <!-- End .container-fluid --> </div> <!-- End .container-fluid -->
</body>
</html>

View File

@ -1,15 +1,15 @@
<nav class="navbar navbar-default" role="navigation" ng-controller="HeaderController"> <nav class="navbar navbar-default" role="navigation" ng-controller="HeaderController">
<div class="container-fluid"> <div class="container-fluid">
<a href="?view=console"><span class="navbar-brand">ZoneMinder</span></a> <a href="#"><span class="navbar-brand">ZoneMinder</span></a>
<button type="button" class="btn btn-md navbar-btn pull-right" ng-class="isRunning ? 'btn-success' : 'btn-danger'" data-toggle="modal" data-target="#myModal"> <button type="button" class="btn btn-md navbar-btn pull-right" ng-class="isRunning ? 'btn-success' : 'btn-danger'" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-off"></span> <span class="glyphicon glyphicon-off"></span>
</button> </button>
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
<li><a href="?view=events">Events</a></li> <li><a href="#events">Events</a></li>
<li><a href="?view=timeline">Timeline</a></li> <li><a href="?view=timeline">Timeline</a></li>
<li><a href="?view=options">Options</a></li> <li><a href="#options">Options</a></li>
<li><a href="?view=log">Logs</span></a></li> <li><a href="?view=log">Logs</span></a></li>
<li><a href="?view=devices">Devices</a></li> <li><a href="?view=devices">Devices</a></li>
<li><a href="?view=host">Host</a></li> <li><a href="?view=host">Host</a></li>