Состояние модулей

Рисунок 87. Пример экрана

Листинг 32. Структура статического содержимого HTML

     <!----------------------------- 1 ----------------------------->
     <div id='modules_status_div'>
         <div class='fs365header'>Состояние модулей</div> <!-- 2 -->
         <!------------------------ 3 ----------------------------->
         <div class='modules_status_div'>
             <div id='status_div_xx' class='module_status_div'>...</div> <!-- 4 -->
             <div id='status_div_yy' class='module_status_div'>...</div> <!-- 4 -->
             ...
         </div>
         <!------------------------ 3 ----------------------------->
     </div>
     <!---------------------------- 1 ----------------------------->

Листинг 33. Пример статического содержимого HTML

    <div id='modules_status_div'><div class='fs365header'>Состояние модулей</div>
        <div class='modules_status_div'>
            <div id='status_div_Bcr' class='module_status_div'><img src = 'file://C:/FS365/Applications/web/images/modules_info/Bcr_green.png'/><div>Сканер штрихкодов</div></div>
            <div id='status_div_BusinessModules' class='module_status_div'><img src = 'file://C:/FS365/Applications/web/images/modules_info/BusinessModules_red.png'/><div>Модули обслуживания клиентов</div></div>
            <div id='status_div_Cards' class='module_status_div'><img src = 'file://C:/FS365/Applications/web/images/modules_info/Cards_green.png'/><div>Считыватель карт</div></div>
            <div id='status_div_CashAccept' class='module_status_div'><img src = 'file://C:/FS365/Applications/web/images/modules_info/CashAccept_yellow.png'/><div>Приём наличных</div></div>
            <div id='status_div_CashOut' class='module_status_div'><img src = 'file://C:/FS365/Applications/web/images/modules_info/CashOut_red.png'/><div>Выдача наличных</div></div>
            <div id='status_div_Epp' class='module_status_div'><img src = 'file://C:/FS365/Applications/web/images/modules_info/Epp_green.png'/><div>Криптоклавиатура</div></div>
            <div id='status_div_Receipts' class='module_status_div'><img src = 'file://C:/FS365/Applications/web/images/modules_info/Receipts_yellow.png'/><div>Печать чеков</div></div>
            <div id='status_div_Siu' class='module_status_div'><img src = 'file://C:/FS365/Applications/web/images/modules_info/Siu_green.png'/><div>Датчики и индикаторы</div></div>
            <div id='status_div_Ups' class='module_status_div'><img src = 'file://C:/FS365/Applications/web/images/modules_info/Ups_green.png'/><div>Источник бесперебойного питания</div></div>
        </div>
    </div>

Иконки состояния модулей, указанные в теге <img>, хранятся в папке FS365\Applications\Web\images\modules_info.

Используемые файлы CSS:

• common<CtrlSuffix>.css (если задано значение параметра CtrlSuffix);

• common.css (если не задано значение параметра CtrlSuffix).

Листинг 34. Пример CSS

.fs365header {
  color: #FFFF99;
  font-size: 125%;
  font-family: Tahoma;
	left: 0%;
	margin: 5% auto 5% auto;
	right: 0%;
	text-align: center;
}
/* Экран статусов узлов УС" */
#modules_status_div  {
	bottom: 0%;
	left: 0%;
	position: absolute;
	right: 0%;
	top: 0%;
}
#modules_status_div  .modules_status_div {
	bottom: 0%;
	font-size: 80%;
	left: 0%;
	position: absolute;
	right: 0%;
	text-align: center;
	top: 20%;
	/* Центрирование содержимого */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#modules_status_div  .modules_status_div .module_status_div {
	flex-basis: 30%;
}
#modules_status_div  .modules_status_div .module_status_div img {
	min-width: 0%;
	max-width: 30%;
}
/* ---- modules_status_div ---- */