Думаю, многие сталкиваются с необходимостью наглядно представлять расположение оборудования в стойках. Сразу же визуально видно заполнение, также удобно при планировании установки нового оборудования, произведения работ с установленным. Вот и у меня появилась такая необходимость, и я написал на JavaScript функцию построения стоек.

Сразу начну с демонстрации результата работы. Если результат вам покажется полезным, читайте дальше 🙂 .

Теперь как это устроено, подключение и отрисовка:

<link rel="stylesheet" type="text/css" href="/pub/javascript/rack/rack.css" />
<script type="text/javascript" src="/pub/javascript/rack/rack.js"></script>
<script type="text/javascript"><!--
document.write(generate_rack_html({
 "id": 1,
 "units": 16,
 "name": "My rack #1",
 "types": {
   "server": { "color": "#FFFFFF", "background": "#696969" },
   "switch": { "color": "#FFFFFF", "background": "#9370DB" }
 },
 "data": [
   { "name": "fishing.pl.ua", "url": "http://fishing.pl.ua/", "unit": 4, "units": 1, "type": "server"},
   { "name": "deltahost.ua", "url": "http://deltahost.ua/", "unit": 5, "units": 3, "type": "server"},
   { "name": "ras.pl.ua", "url": "http://ras.pl.ua/", "unit": 10, "units": 2, "type": "server"},
   { "name": "core switch", "unit": 16, "units": 1, "type": "switch"}
 ]
 }));
//--></script>

Функция generate_rack_html из файла rack.js генерирует HTML-код, используются стили из css-файла rack.css.

Параметры данных, передаваемых функции:

  • id — пока не используется
  • units — количество юнитов стойки
  • name — название стойки (можно не указывать)
  • types — типы, описывается раскраска оборудования данного типа в стойке
  • data — данные оборудования

Данные оборудования имеют следующие параметры:

  • name — название
  • url — ссылка (необязательный параметр)
  • unit — юнит в который устанавливается оборудование
  • units — количество занимаемых оборудованием юнитов
  • type — один из вышеописанных типов оборудования

Функция автоматически заполняет пространство неиспользуемых юнитов.

Файлы:

Facebooktwittergoogle_plusredditpinterestlinkedintumblr

Comments

comments