97
Приложение 4. Исходный код рабочей страницы
<html>
<head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerPanel">
<div id="logotype" class="textAlignLeft">
<p style="background-image: url("./img/earth-logo.png");">M3 ATM Monitoring System</p>
</div>
<div style="float: right; margin-top: -25px; color: #444;">
<ul class="tabs">
<li id="settings">
<a>Настройки</a>
<div class="pop-up">
</li>
<li> | </li>
<li id="about-app">
<a>О программе</a>
<div class="pop-up">
<table>
<tbody>
<tr>
<td class="top-corner" colspan="3">
<tr>
<td class="bottom-corner" colspan="3"></td>
</tr>
</tbody>
</table>
</div>
</li>
<li> | </li>
<li id="logout">
<a>Выход</a>
</li>
</ul>
</div>
</div>
</div>
<div id="rightPanel" style="width: 74.4624%; height: 559px;">
<div id="greetingComponent" class="hidden">
<p>Добро пожаловать в программу удаленного мониторинга банкоматов<br><b>«M3 ATM Monitoring
System»</b><br>Для начала работы выберите любую группу банкоматов, которая находится в левой колонке.</p>
</div>
<div id="atmsCompponent" class="hidden">
98
<div class="horisontal-separator"></div>
<div id="atmsStatusTable" class="atmsStatusTable bottomPresenter">
<div id="incidentsComponent" class="">
<div id="incidentsTable" class="incidentsTable topPresenter">
<ul>
<li class="toolBar">
<div>
<div>
<table>
<tbody>
<tr>
<td class="action">
<div class="outer" style="width: 280px;">
<div class="inner" style="width: 280px;">
<a class="button left create" title="Создать">Создать</a><a class="button middle calendar date-selection-field
date-selection-corner-top calendar-field-bottom" style="width: 69px;" title="Календарь" dateselectionoffsetx="0"
dateselectionoffsety="0" calendaroffsetx="0" calendaroffsety="30">Календарь</a><a class="button right appoint"
title="Назначить">Назначить</a>
<td class="search textAlignLeft">
<div class="container">
<label>
<input type="text" value="">
<div class="text">Поиск инцидента:</div>
</label>
<div class="result hidden"></div>
</div>
<div id="mapComponent" class="hidden">
<div id="map-layer" class="mapArea topPresenter"><div class="ol-viewport" data-view="3" style="position:
relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;">
<tr class="repeat">
<td><span>{{localization.repeat}}:</span></td>
<td>
<div class="content">
<a title="">{{repeatSchedule}}</a>
<table class="repeat-timetable">
<tbody>
<tr>
<td class="top" colspan="3"><div></div></td>
</tr>
<tr>
<td class="left"><div></div></td>
<td class="center">
<div>
<ul>
{{#timeTables}}
<li class="{{class}}"><input type="checkbox" {{checked}} /><span>{{description}}</span></li>
99
{{/timeTables}}
</ul>
</div>
</td>
<td class="right"><div></div></td>
</tr>
<tr>
<td class="bottom" colspan="3"><div></div></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="send">
</head>
</html>
<div id="mapComponent" class="hidden">
<div id="map-layer" class="mapArea topPresenter"><div class="ol-viewport" data-view="3" style="position:
relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;"><canvas class="ol-unselectable" style="width:
100%; height: 100%; display: none;"></canvas><div class="ol-overlaycontainer"></div><div class="ol-overlaycontainer-
stopevent"><div class="ol-overlay-container ol-selectable" style="position: absolute; display: none;"><div id="map-popup"
class="ol-popup">
<a href="https://m3.plc.rshb.ru:20443/#" id="map-popup-closer" class="ol-popup-closer"></a>
<div id="map-popup-content"></div>
</div></div><div class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button"
title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">−</button></div><div class="ol-
rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span
class="ol-compass">⇧</span></button></div><div class="ol-attribution ol-unselectable ol-control ol-collapsed" style="display:
none;"><ul><li style="display: none;"></li></ul><button type="button"
title="Attributions"><span>i</span></button></div></div></div></div>
CSS:
{
background: ;
font-family: Segoe UI;
font-size: 81%;
}
#logotype > p {
color: #444;
height: 66px;
font-size: 23px;
100
font-family: "Tahoma";
line-height: 66px;
padding-left: 66px;
background: url(../img/earth-
logo.png) 8px 50% no-repeat;
}
#element.style {
}
table.update-incident-rshb tr.repair-planning p span {
width: 24%;
display: inline-block;
vertical-align: middle;
}
#menu div.outer-menu a:first-child {
position: relative;
top: 0px;
width: 220px;
padding-left: 30px;
}
#incidents div.outer-menu a {
background: url(../../images/incidents.png) 10px 50% no-repeat;
}
#menu a.selected {
color: #dd4b39;
text-decoration: underline;
}
#menu a {
height: 38px;
line-height: 30px;
display: inline-block;
}
a {
font-size: 13px;
cursor: pointer;
font-family: Segoe UI, sans-serif;
}
}
#signin table th {
padding: 20px 0px 25px 0px;
font-size: 25px;
text-align: center;
font-weight: bold;