Текст книги "Разработка Android-приложений в деталях"
Автор книги: Тимур Машнин
Жанр: Компьютеры: прочее, Компьютеры
Возрастные ограничения: +12
сообщить о неприемлемом содержимом
Текущая страница: 16 (всего у книги 20 страниц)
</div>
<div class=«form-group»>
<label for=«modal-phone»> Телефон: </label>
<input type=«text» class=«form-control» id=«modal-phone»>
</div>
<div class=«form-group»>
<label for=«modal-position»> Должность: </label>
<input type=«text» class=«form-control» id=«modal-position»>
</div>
<div class=«form-group»>
<label for=«modal-group»> Группа: </label>
<input type=«text» class=«form-control» id=«modal-group»>
</div>
<button id=«modal-submit» class=«btn btn-primary»> Отправить </button>
</form>
</div>
<div class=«modal-footer»>
<button type=«button» class=«btn btn-default» data-dismiss=«modal»> Close </button>
</div>
</div>
</div>
</div>
<script type=«text/javascript»>
$ (document ).ready (function () {
var url = 'http://buisness-control.appspot.com/userslist/?callback=?';
$.ajax ({
type: «GET»,
url: url,
async: true,
jsonpCallback: ’getUsers’,
contentType: «application/json»,
dataType: ’jsonp’,
success: function (json) {
var items = [];
$.each (json.users, function (key, val) {
items. push (» <a href=«#» class=’list-group-item’ data-toggle=’collapse’ data-target=«#» + val.account.replace (/ [.,:,/,, (,),=,?, -,@] /g,»») + «»>" + val.account + "</a> <div id=«» + val.account.replace (/ [.,:,/,, (,),=,?, -,@] /g,»») + «» class=’collapse’> <div class=’row’> <div class=’col-sm-6»> Имя </div> <div class='col-sm-6'>"+val.firstName+"</div> </div> <div class=’row’> <div class=’col-sm-6»> Фамилия </div> <div class='col-sm-6'>"+val.secondName+"</div> </div> <div class=’row’> <div class=’col-sm-6»> Телефон </div> <div class='col-sm-6'>"+val.phone+"</div> </div> <div class=’row’> <div class=’col-sm-6»> Должность </div> <div class=’col-sm-6»>"+val. position+"</div> </div> <div class=’row’> <div class=’col-sm-6»> Группа </div> <div class='col-sm-6'>"+val.group+"</div> </div> <button id='button"+val.account.replace (/ [.,:,/,, (,),=,?, -,@] /g,»») +" type=’button’ class=’btn btn-primary btn-edit-profile’ data-firstName='"+val.firstName+«» data-secondName='"+val.secondName+«» data-phone='"+val.phone+«» data-position=«»+val. position+«» data-group='"+val.group+«» data-account='"+val.account+«»> Редактировать </button> </div>»);
});
$ (» <div/>», {
«class»: «list-group»,
html: items.join (»»)
}).appendTo (".col_3»);
$ (".btn-edit-profile» ).click (function () {
var account = $(this).attr (’data-account’);
$("#modal-account").attr («value», account);
var firstName = $(this).attr (’data-firstName’);
$("#modal-firstName").attr («value», firstName);
var secondName = $(this).attr (’data-secondName’);
$("#modal-secondName").attr («value», secondName);
var phone = $(this).attr (’data-phone’);
$("#modal-phone").attr («value», phone);
var position = $(this).attr (’data-position’);
$("#modal-position").attr («value», position);
var group = $(this).attr (’data-group’);
$("#modal-group").attr («value», group);
$(«#profile»).modal ();
});
}
});
$ («#modal-submit» ).click (function () {
var account = $("#modal-account").val ();
var firstName = $("#modal-firstName").val ();
var secondName = $("#modal-secondName").val ();
var phone = $("#modal-phone").val ();
var position = $("#modal-position").val ();
var group = $("#modal-group").val ();
var url = 'http://buisness-control.appspot.com/putuser/?callback=?';
$.ajax ({
type: «GET»,
url: url,
data: {
«account»: account,
«firstName»: firstName,
«secondName»: secondName,
«phone»: phone,
«position»: position,
«group»: group
},
async: false,
jsonpCallback: ’putUser’,
contentType: «application/json»,
dataType: ’jsonp’,
success: function (json) {
$("#profile").modal («hide»);
location.reload ();
}
});
});
});
</script>
<div class=«clearfix»> </div>
</div>
<div class=«col_1»>
<div class=«col-md-6»>
<div class=«refresh» style=«cursor: pointer; margin-left:22%"> <i class=«fa fa-refresh»> </i> </div>
<div class=«datepicker»> </div>
<script type=«text/javascript»>
var dp = $ (». datepicker’).datepicker ({
language: «ru-RU»
});
$ (".refresh» ).click (function () {
dp. datepicker (’update’);
});
dp. on (’changeDate’, function (ev) {
});
</script>
</div>
<div class=«clearfix»> </div>
</div>
<div class=«span_11»>
<div class=«col-md-12»>
<div class=’row’>
<div class=’col-sm-4»>
<button type=’button’ class=’btn btn-primary btn-mapUpdate’> Обновить карту </button>
</div>
</div>
<div id=«map» style=«height:500px;"> </div>
<script>
var map;
function initMap () {
map = new google.maps.Map(document.getElementById (’map’), {
zoom: 6
});
var infoWindow = new google.maps.InfoWindow ({map: map});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition (function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords. longitude
};
infoWindow.setPosition (pos);
map.setCenter (pos);
}, function () {
handleLocationError (true, infoWindow, map.getCenter ());
});
} else {
// Browser doesn’t support Geolocation
handleLocationError (false, infoWindow, map.getCenter ());
}
}
function handleLocationError (browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition (pos);
infoWindow.setContent (browserHasGeolocation?
«Error: The Geolocation service failed.» :
«Error: Your browser doesn’t support geolocation.»);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb9Iir38HyF_E3_hmf3mHHum_tJbgvjXs&callback=initMap"
async defer> </script>
</div>
<div class=«clearfix»> </div>
</div>
<script>
var url = 'http://buisness-control.appspot.com/tracks/?callback=?';
$.ajax ({
type: «GET»,
url: url,
data: {
},
async: true,
jsonpCallback: ’getTracks’,
contentType: «application/json»,
dataType: ’jsonp’,
success: function (json) {
$.each (json.tracks, function (key, val) {
var name = val.name;
var track = val.track;
$.each (track, function (key, val) {
var account=val.account;
var latLng =new google.maps.LatLng(val.lat, val. lng);
var marker = new google.maps.Marker ({
position: latLng,
title: name+" "+account,
map: map
});
map.setCenter (latLng);
map.setZoom (15);
});
});
}
});
$ (".btn-mapUpdate» ).click (function () {
$.ajax ({
type: «GET»,
url: url,
data: {
},
async: true,
jsonpCallback: ’getTracks’,
contentType: «application/json»,
dataType: ’jsonp’,
success: function (json) {
$.each (json.tracks, function (key, val) {
var name = val.name;
var track = val.track;
$.each (track, function (key, val) {
var account=val.account;
var latLng =new google.maps.LatLng(val.lat, val. lng);
var marker = new google.maps.Marker ({
position: latLng,
title: name+" "+account,
map: map
});
map.setCenter (latLng);
map.setZoom (15);
});
});
}
});
});
</script>
<div class=«copy»>
<p> Copyright © 2015 TM SoftStudio </p>
</div>
</div>
</div>
<! – /#page-wrapper – >
</div>
<! – /#wrapper – >
<! – Bootstrap Core JavaScript – >
<script src=«js/bootstrap. min. js»> </script>
</body>
</html>
Страница «Группы сотрудников» позволяет получить все тот же список сотрудников, только с сортировкой по группам.
<!DOCTYPE HTML>
<html>
<head>
<title> Business Control </title>
<meta name=«viewport» content=«width=device-width, initial-scale=1»>
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» />
<script type=«application/x-javascript»> addEventListener («load», function () {setTimeout (hideURLbar, 0);}, false); function hideURLbar () {window.scrollTo (0,1);} </script>
<! – Bootstrap Core CSS – >
<link href=«css/bootstrap. min. css» rel=’stylesheet’ type=’text/css’ />
<! – Custom CSS – >
<link href=«css/style. css» rel=’stylesheet’ type=’text/css’ />
<link href=«css/font-awesome. css» rel=«stylesheet»>
<! – jQuery – >
<script src=«js/jquery. min. js»> </script>
<! – – webfonts – ->
<link href='//fonts.googleapis.com/css? family=Roboto:400,100,300,500,700,900» rel=’stylesheet’ type=’text/css’>
<! – Nav CSS – >
<link href=«css/custom. css» rel=«stylesheet»>
<! – Metis Menu Plugin JavaScript – >
<script src=«js/metisMenu. min. js»> </script>
<script src=«js/custom. js»> </script>
<! – Calendar – >
<script type=«text/javascript» src=«js/bootstrap-datepicker. js»> </script>
<script type=«text/javascript» src="js/bootstrap-datepicker.ru.js» charset=«UTF-8»> </script>
<link href=«css/datepicker. css» rel=«stylesheet»>
</head>
<body>
<div id=«wrapper»>
<! – Navigation – >
<nav class=«top1 navbar navbar-default navbar-static-top» role=«navigation» style=«margin-bottom: 0»>
<div class=«navbar-header»>
<button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=".navbar-collapse»>
<span class=«sr-only»> Toggle navigation </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
</button>
<a class=«navbar-brand» href=«»> Группы сотрудников </a>
</div>
<! – /.navbar-header – >
<div class=«navbar-default sidebar» role=«navigation»>
<div class=«sidebar-nav navbar-collapse»>
<img src="img/logo.png» />
<ul class=«nav» id=«side-menu»>
<li>
<a href="index.html»> <i class=«fa fa-dashboard fa-fw nav_icon»> </i> Dashboard </a>
</li>
<li>
<a href=«#»> <i class=«fa fa-users»> </i> Сотрудники <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="groups-list.html»> Группы </a>
</li>
<li>
<a href="users-list.html»> Общий список </a>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-truck»> </i> Маршрут <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="route.html»> Выбрать маршрут </a>
</li>
<li>
<a href=«#»> Маршруты <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-routes.html»> Новые </a>
</li>
<li>
<a href="old-routes.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-file»> </i> Задание <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="task.html»> Создать задание </a>
</li>
<li>
<a href=«#»> Задания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-tasks.html»> Новые </a>
</li>
<li>
<a href="old-tasks.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-file-text»> </i> Текст задания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="desc.html»> Создать описание </a>
</li>
<li>
<a href=«#»> Описания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-descs.html»> Новые </a>
</li>
<li>
<a href="old-descs.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-android»> </i> Мобильные приложения </a>
</li>
</ul>
</div>
<! – /.sidebar-collapse – >
</div>
<! – /.navbar-static-side – >
</nav>
<div id=«page-wrapper»>
<div class=«graphs»>
<div class = «col_3»>
<! – Modal – >
<style type=«text/css»>
input {
outline: 1px solid lightgreen;
}
</style>
<div class=«modal fade» id=«profile» role=«dialog»>
<div class=«modal-dialog»>
<! – Modal content – >
<div class=«modal-content»>
<div class=«modal-header»>
<button type=«button» class=«close» data-dismiss=«modal»> × </button>
Профиль
</div>
<div class=«modal-body»>
<form role=«form»>
<div class=«form-group» style=«display: none;»>
<input type=«email» class=«form-control» id=«modal-account»>
</div>
<div class=«form-group»>
<label for=«modal-firstName»> Имя: </label>
<input type=«text» class=«form-control» id=«modal-firstName»>
</div>
<div class=«form-group»>
<label for=«modal-secondName»> Фамилия: </label>
<input type=«text» class=«form-control» id=«modal-secondName»>
</div>
<div class=«form-group»>
<label for=«modal-phone»> Телефон: </label>
<input type=«text» class=«form-control» id=«modal-phone»>
</div>
<div class=«form-group»>
<label for=«modal-position»> Должность: </label>
<input type=«text» class=«form-control» id=«modal-position»>
</div>
<div class=«form-group»>
<label for=«modal-group»> Группа: </label>
<input type=«text» class=«form-control» id=«modal-group»>
</div>
<button id=«modal-submit» class=«btn btn-primary»> Отправить </button>
</form>
</div>
<div class=«modal-footer»>
<button type=«button» class=«btn btn-default» data-dismiss=«modal»> Close </button>
</div>
</div>
</div>
</div>
<script type=«text/javascript»>
$ (document ).ready (function () {
var url = 'http://buisness-control.appspot.com/groupslist/?callback=?';
$.ajax ({
type: «GET»,
url: url,
async: true,
jsonpCallback: ’getGroups’,
contentType: «application/json»,
dataType: ’jsonp’,
success: function (json) {
var items = [];
$.each (json.groups, function (key, val) {
var arrayName=Object.keys(json.groups[key]).toString ();
var subitems = [];
$.each (val [arrayName], function (subkey, subval) {
subitems. push (» <a href=«#» class=’list-group-item’ data-toggle=’collapse’ data-target=«#» + subval.account.replace (/ [.,:,/,, (,),=,?, -,@] /g,»») + «»>" + subval.account + "</a> <div id=«» + subval.account.replace (/ [.,:,/,, (,),=,?, -,@] /g,»») + «» class=’collapse’> <div class=’row’> <div class=’col-sm-6»> Имя </div> <div class='col-sm-6'>"+subval.firstName+"</div> </div> <div class=’row’> <div class=’col-sm-6»> Фамилия </div> <div class='col-sm-6'>"+subval.secondName+"</div> </div> <div class=’row’> <div class=’col-sm-6»> Телефон </div> <div class='col-sm-6'>"+subval.phone+"</div> </div> <div class=’row’> <div class=’col-sm-6»> Должность </div> <div class=’col-sm-6»>"+subval. position+"</div> </div> <div class=’row’> <div class=’col-sm-6»> Группа </div> <div class='col-sm-6'>"+subval.group+"</div> </div> <button id='button"+subval.account.replace (/ [.,:,/,, (,),=,?, -,@] /g,»») +" type=’button’ class=’btn btn-primary btn-edit-profile’ data-firstName='"+subval.firstName+«» data-secondName='"+subval.secondName+«» data-phone='"+subval.phone+«» data-position=«»+subval. position+«» data-group='"+subval.group+«» data-account='"+subval.account+«»> Редактировать </button> </div>»);
});
items. push (» <a href=«#» class=’list-group-item’ data-toggle=’collapse’ data-target=«#» + arrayName.replace (/ [.,:,/,, (,),=,?, -,@] /g,»») + «»>" + Object.keys(json.groups [key]) + «</a> <button type=’button’ class=’btn btn-danger btn-del-group’ data-name=„“+arrayName+„“> Удалить группу </button> <div id=„“ + arrayName.replace (/ [.,:,/,, (,),=,?, -,@] /g,»») + «» class='collapse'>»+subitems.join (»») +"</div>»);
});
$ (» <div/>», {
«class»: «list-group»,
html: items.join (»»)
}).appendTo (".col_3»);
$ (".btn-del-group» ).click (function () {
var name = $(this).attr (’data-name’);
var url = 'http://buisness-control.appspot.com/deletegroup/?callback=?';
$.ajax ({
type: «GET»,
url: url,
data: {
name: name
},
async: false,
jsonpCallback: ’deleteGroup’,
contentType: ’application/json’,
dataType: ’jsonp’,
success: function (json) {
location.reload ();
}
});
});
$ (".btn-edit-profile» ).click (function () {
var account = $(this).attr (’data-account’);
$("#modal-account").attr («value», account);
var firstName = $(this).attr (’data-firstName’);
$("#modal-firstName").attr («value», firstName);
var secondName = $(this).attr (’data-secondName’);
$("#modal-secondName").attr («value», secondName);
var phone = $(this).attr (’data-phone’);
$("#modal-phone").attr («value», phone);
var position = $(this).attr (’data-position’);
$("#modal-position").attr («value», position);
var group = $(this).attr (’data-group’);
$("#modal-group").attr («value», group);
$(«#profile»).modal ();
});
}
});
$ («#modal-submit» ).click (function () {
var account = $("#modal-account").val ();
var firstName = $("#modal-firstName").val ();
var secondName = $("#modal-secondName").val ();
var phone = $("#modal-phone").val ();
var position = $("#modal-position").val ();
var group = $("#modal-group").val ();
var url = 'http://buisness-control.appspot.com/putuser/?callback=?';
$.ajax ({
type: «GET»,
url: url,
data: {
«account»: account,
«firstName»: firstName,
«secondName»: secondName,
«phone»: phone,
«position»: position,
«group»: group
},
async: false,
jsonpCallback: ’putUser’,
contentType: «application/json»,
dataType: ’jsonp’,
success: function (json) {
$("#profile").modal («hide»);
location.reload ();
}
});
});
});
</script>
<div class=«clearfix»> </div>
</div>
<div class=«col_1»>
<div class=«col-md-6»>
<div class=«refresh» style=«cursor: pointer; margin-left:22%"> <i class=«fa fa-refresh»> </i> </div>
<div class=«datepicker»> </div>
<script type=«text/javascript»>
var dp = $ (». datepicker’).datepicker ({
language: «ru-RU»
});
$ (".refresh» ).click (function () {
dp. datepicker (’update’);
});
dp. on (’changeDate’, function (ev) {
});
</script>
</div>
<div class=«clearfix»> </div>
</div>
<div class=«span_11»>
<div class=«col-md-12»>
<div class=’row’>
<div class=’col-sm-4»>
<button type=’button’ class=’btn btn-primary btn-mapUpdate’> Обновить карту </button>
</div>
</div>
<div id=«map» style=«height:500px;"> </div>
<script>
var map;
function initMap () {
map = new google.maps.Map(document.getElementById (’map’), {
zoom: 6
});
var infoWindow = new google.maps.InfoWindow ({map: map});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition (function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords. longitude
};
infoWindow.setPosition (pos);
map.setCenter (pos);
}, function () {
handleLocationError (true, infoWindow, map.getCenter ());
});
} else {
// Browser doesn’t support Geolocation
handleLocationError (false, infoWindow, map.getCenter ());
}
}
function handleLocationError (browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition (pos);
infoWindow.setContent (browserHasGeolocation?
«Error: The Geolocation service failed.» :
«Error: Your browser doesn’t support geolocation.»);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb9Iir38HyF_E3_hmf3mHHum_tJbgvjXs&callback=initMap"
async defer> </script>
</div>
<div class=«clearfix»> </div>
</div>
<script>
var url = 'http://buisness-control.appspot.com/tracks/?callback=?';
$.ajax ({
type: «GET»,
url: url,
data: {
},
async: true,
jsonpCallback: ’getTracks’,
contentType: «application/json»,
dataType: ’jsonp’,
success: function (json) {
$.each (json.tracks, function (key, val) {
var name = val.name;
var track = val.track;
$.each (track, function (key, val) {
var account=val.account;
var latLng =new google.maps.LatLng(val.lat, val. lng);
var marker = new google.maps.Marker ({
position: latLng,
title: name+" "+account,
map: map
});
map.setCenter (latLng);
map.setZoom (15);
});
});
}
});
$ (".btn-mapUpdate» ).click (function () {
$.ajax ({
type: «GET»,
url: url,
data: {
},
async: true,
jsonpCallback: ’getTracks’,
contentType: «application/json»,
dataType: ’jsonp’,
success: function (json) {
$.each (json.tracks, function (key, val) {
var name = val.name;
var track = val.track;
$.each (track, function (key, val) {
var account=val.account;
var latLng =new google.maps.LatLng(val.lat, val. lng);
var marker = new google.maps.Marker ({
position: latLng,
title: name+" "+account,
map: map
});
map.setCenter (latLng);
map.setZoom (15);
});
});
}
});
});
</script>
<div class=«copy»>
<p> Copyright © 2015 TM SoftStudio </p>
</div>
</div>
</div>
<! – /#page-wrapper – >
</div>
<! – /#wrapper – >
<! – Bootstrap Core JavaScript – >
<script src=«js/bootstrap. min. js»> </script>
</body>
</html>
Страница «Выбор Маршрута» позволяет двойным нажатием правой кнопки мышки поставить на карте маркер, а затем сохранить все созданные маркеры в виде маршрута. Двойное нажатие левой кнопки мышки убирает ранее созданный маркер.
<!DOCTYPE HTML>
<html>
<head>
<title> Business Control </title>
<meta name=«viewport» content=«width=device-width, initial-scale=1»>
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» />
<script type=«application/x-javascript»> addEventListener («load», function () {setTimeout (hideURLbar, 0);}, false); function hideURLbar () {window.scrollTo (0,1);} </script>
<! – Bootstrap Core CSS – >
<link href=«css/bootstrap. min. css» rel=’stylesheet’ type=’text/css’ />
<! – Custom CSS – >
<link href=«css/style. css» rel=’stylesheet’ type=’text/css’ />
<link href=«css/font-awesome. css» rel=«stylesheet»>
<! – jQuery – >
<script src=«js/jquery. min. js»> </script>
<! – – webfonts – ->
<link href='//fonts.googleapis.com/css? family=Roboto:400,100,300,500,700,900» rel=’stylesheet’ type=’text/css’>
<! – Nav CSS – >
<link href=«css/custom. css» rel=«stylesheet»>
<! – Metis Menu Plugin JavaScript – >
<script src=«js/metisMenu. min. js»> </script>
<script src=«js/custom. js»> </script>
<! – Calendar – >
<script type=«text/javascript» src=«js/bootstrap-datepicker. js»> </script>
<script type=«text/javascript» src="js/bootstrap-datepicker.ru.js» charset=«UTF-8»> </script>
<link href=«css/datepicker. css» rel=«stylesheet»>
</head>
<body>
<div id=«wrapper»>
<! – Navigation – >
<nav class=«top1 navbar navbar-default navbar-static-top» role=«navigation» style=«margin-bottom: 0»>
<div class=«navbar-header»>
<button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=".navbar-collapse»>
<span class=«sr-only»> Toggle navigation </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
</button>
<a class=«navbar-brand» href=«#»> Выбор Маршрута </a>
</div>
<! – /.navbar-header – >
<div class=«navbar-default sidebar» role=«navigation»>
<div class=«sidebar-nav navbar-collapse»>
<img src="img/logo.png» />
<ul class=«nav» id=«side-menu»>
<li>
<a href="index.html»> <i class=«fa fa-dashboard fa-fw nav_icon»> </i> Dashboard </a>
</li>
<li>
<a href=«#»> <i class=«fa fa-users»> </i> Сотрудники <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="groups-list.html»> Группы </a>
</li>
<li>
<a href="users-list.html»> Общий список </a>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-truck»> </i> Маршрут <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="route.html»> Выбрать маршрут </a>
</li>
<li>
<a href=«#»> Маршруты <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-routes.html»> Новые </a>
</li>
<li>
<a href="old-routes.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-file»> </i> Задание <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="task.html»> Создать задание </a>
</li>
<li>
<a href=«#»> Задания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-tasks.html»> Новые </a>
</li>
<li>
<a href="old-tasks.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-file-text»> </i> Текст задания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="desc.html»> Создать описание </a>
</li>
<li>
<a href=«#»> Описания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-descs.html»> Новые </a>
</li>
<li>
<a href="old-descs.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-android»> </i> Мобильные приложения </a>
</li>
</ul>
</div>
<! – /.sidebar-collapse – >
</div>
<! – /.navbar-static-side – >
</nav>
<div id=«page-wrapper»>
<div class=«graphs»>
<div class = «col_3»>
<button id=«btn-save-route» type=«button» class=«btn btn-primary»> Сохранить маршрут </button>
<div class=«clearfix»> </div>
</div>
<div class=«span_11»>
<div class=«col-md-12»>
<div id=«map» style=«height:500px;"> </div>
<script>
var markers = [];
function initMap () {
var map = new google.maps.Map(document.getElementById (’map’), {
zoom: 15
});
var infoWindow = new google.maps.InfoWindow ({map: map});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition (function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords. longitude
};
infoWindow.setPosition (pos);
map.setCenter (pos);
}, function () {
handleLocationError (true, infoWindow, map.getCenter ());
});
} else {
// Browser doesn’t support Geolocation
handleLocationError (false, infoWindow, map.getCenter ());
}
map.addListener (’dblclick’, function (e) {
var marker = new google.maps.Marker ({
position: e.latLng,
map: map
});
markers. push (marker);
marker.addListener (’rightclick’, function (e) {
marker.setMap (null);
$.each (markers, function (i) {
if (markers [i] === marker) {
markers. splice (i,1);
return false;
}
});
});
map.setZoom (14);
});
}
function handleLocationError (browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition (pos);
infoWindow.setContent (browserHasGeolocation?
«Error: The Geolocation service failed.» :
«Error: Your browser doesn’t support geolocation.»);
}
$ («#btn-save-route» ).click (function () {
if (markers. length!=0) {
var arrJ = new Array ();
$.each (markers, function (i) {
var latlngJ = markers[i].getPosition().toJSON ();
arrJ. push (latlngJ);
});
var url = 'http://buisness-control.appspot.com/putroute/?callback=?';
$.ajax ({
type: «GET»,
url: url,
data: {
json:JSON.stringify (arrJ),
state:’new’,
date: (new Date()).toLocaleString ()
},
async: false,
jsonpCallback: ’putRoute’,
contentType: ’application/json’,
dataType: ’jsonp’,
success: function (json) {
location.reload ();
}
});
}
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCb9Iir38HyF_E3_hmf3mHHum_tJbgvjXs&callback=initMap"
async defer> </script>
</div>
<div class=«clearfix»> </div>
</div>
<div class=«copy»>
<p> Copyright © 2015 TM SoftStudio </p>
</div>
</div>
</div>
<! – /#page-wrapper – >
</div>
<! – /#wrapper – >
<! – Bootstrap Core JavaScript – >
<script src=«js/bootstrap. min. js»> </script>
</body>
</html>
Страница «Новые Маршруты» позволяет просмотреть ранее созданные маршруты, имеющие статус «new».
<!DOCTYPE HTML>
<html>
<head>
<title> Business Control </title>
<meta name=«viewport» content=«width=device-width, initial-scale=1»>
<meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» />
<script type=«application/x-javascript»> addEventListener («load», function () {setTimeout (hideURLbar, 0);}, false); function hideURLbar () {window.scrollTo (0,1);} </script>
<! – Bootstrap Core CSS – >
<link href=«css/bootstrap. min. css» rel=’stylesheet’ type=’text/css’ />
<! – Custom CSS – >
<link href=«css/style. css» rel=’stylesheet’ type=’text/css’ />
<link href=«css/font-awesome. css» rel=«stylesheet»>
<! – jQuery – >
<script src=«js/jquery. min. js»> </script>
<! – – webfonts – ->
<link href='//fonts.googleapis.com/css? family=Roboto:400,100,300,500,700,900» rel=’stylesheet’ type=’text/css’>
<! – Nav CSS – >
<link href=«css/custom. css» rel=«stylesheet»>
<! – Metis Menu Plugin JavaScript – >
<script src=«js/metisMenu. min. js»> </script>
<script src=«js/custom. js»> </script>
<! – Calendar – >
<script type=«text/javascript» src=«js/bootstrap-datepicker. js»> </script>
<script type=«text/javascript» src="js/bootstrap-datepicker.ru.js» charset=«UTF-8»> </script>
<link href=«css/datepicker. css» rel=«stylesheet»>
</head>
<body>
<div id=«wrapper»>
<! – Navigation – >
<nav class=«top1 navbar navbar-default navbar-static-top» role=«navigation» style=«margin-bottom: 0»>
<div class=«navbar-header»>
<button type=«button» class=«navbar-toggle» data-toggle=«collapse» data-target=".navbar-collapse»>
<span class=«sr-only»> Toggle navigation </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
<span class=«icon-bar»> </span>
</button>
<a class=«navbar-brand» href=«#»> Новые Маршруты </a>
</div>
<! – /.navbar-header – >
<div class=«navbar-default sidebar» role=«navigation»>
<div class=«sidebar-nav navbar-collapse»>
<img src="img/logo.png» />
<ul class=«nav» id=«side-menu»>
<li>
<a href="index.html»> <i class=«fa fa-dashboard fa-fw nav_icon»> </i> Dashboard </a>
</li>
<li>
<a href=«#»> <i class=«fa fa-users»> </i> Сотрудники <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="groups-list.html»> Группы </a>
</li>
<li>
<a href="users-list.html»> Общий список </a>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-truck»> </i> Маршрут <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="route.html»> Выбрать маршрут </a>
</li>
<li>
<a href=«#»> Маршруты <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-routes.html»> Новые </a>
</li>
<li>
<a href="old-routes.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-file»> </i> Задание <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="task.html»> Создать задание </a>
</li>
<li>
<a href=«#»> Задания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-tasks.html»> Новые </a>
</li>
<li>
<a href="old-tasks.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-file-text»> </i> Текст задания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="desc.html»> Создать описание </a>
</li>
<li>
<a href=«#»> Описания <span class=«fa arrow»> </span> </a>
<ul class=«nav nav-second-level»>
<li>
<a href="new-descs.html»> Новые </a>
</li>
<li>
<a href="old-descs.html»> Архив </a>
</li>
</ul>
</li>
</ul>
<! – /.nav-second-level – >
</li>
<li>
<a href=«#»> <i class=«fa fa-android»> </i> Мобильные приложения </a>
</li>
</ul>
</div>
<! – /.sidebar-collapse – >
</div>
<! – /.navbar-static-side – >
</nav>
<div id=«page-wrapper»>
<div class=«graphs»>
<div class = «col_3»>
<div class=«clearfix»> </div>
</div>
<div class=«span_11»>
<div class=«col-md-12»>
<div id=«map» style=«height:500px;"> </div>
<script>
var map;
function initMap () {
map = new google.maps.Map(document.getElementById (’map’), {
zoom: 15
});
var infoWindow = new google.maps.InfoWindow ({map: map});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition (function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords. longitude
};
infoWindow.setPosition (pos);
map.setCenter (pos);
}, function () {
Правообладателям!
Это произведение, предположительно, находится в статусе 'public domain'. Если это не так и размещение материала нарушает чьи-либо права, то сообщите нам об этом.
