iobroker.linux-control
Version:
Controlling Linux devices and get information about your system
464 lines (404 loc) • 14.2 kB
HTML
<html>
<head>
<!-- Load ioBroker scripts and styles-->
<link rel="stylesheet" type="text/css" href="../../css/adapter.css" />
<link rel="stylesheet" type="text/css" href="../../lib/css/materialize.css">
<link rel="stylesheet" type="text/css" href="../../lib/css/fancytree/ui.fancytree.min.css" />
<script type="text/javascript" src="../../lib/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
<script type="text/javascript" src="../../lib/js/materialize.js"></script>
<script type="text/javascript" src="../../lib/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../lib/js/selectID.js"></script>
<script type="text/javascript" src="../../lib/js/jquery.fancytree-all.min.js"></script>
<script type="text/javascript" src="./lib/jquery.fancytree.dnd5.min.js"></script>
<script type="text/javascript" src="../../js/translate.js"></script>
<script type="text/javascript" src="../../js/adapter-settings.js"></script>
<!-- Load our own files -->
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="words.js"></script>
<script type="text/javascript" src="index_m.js"></script>
<style>
.m .tabs .tab a:hover {
border-bottom: 2px solid #46a0e9 ;
font-weight: bold ;
}
.m .tabs .myLinkBar a {
border-bottom: 0px solid #46a0e9 ;
font-style: normal ;
text-transform: none ;
font-size: 16px;
}
.m .tabs .myLinkBar a:hover {
border-bottom: 0px solid #46a0e9 ;
background: rgba(161, 161, 161, 0.26);
font-weight: normal ;
text-transform: none ;
font-size: 16px;
}
.fancytree-container {
background: transparent ;
border-style: none ;
font-size: 1rem ;
font-family: "Segoe UI", Tahoma, Arial, "Courier New" ;
}
.fancytree-title {
background: transparent ;
height: 24px;
}
.fancytree-node:hover,
.fancytree-node:hover>.fancytree-title,
.fancytree-title:hover {
background: #64b5f6 ;
color: white ;
font-weight: bold ;
cursor: pointer;
}
ul.fancytree-container ul {
padding: 0 0 0 18px ;
margin: 0;
}
.fancytree-node>span.fancytree-checkbox {
background-position: 0 0;
background-image: url("./img/checkbox.svg");
width: 24px;
height: 24px;
}
.fancytree-node.fancytree-partsel>span.fancytree-checkbox {
background-position: 0 0;
background-image: url("./img/checkbox_intermediate.svg");
width: 24px;
height: 24px;
}
.fancytree-node.fancytree-partsel.fancytree-selected>span.fancytree-checkbox {
background-position: 0 0;
background-image: url("./img/checkbox_marked.svg");
width: 24px;
height: 24px;
}
.fancytree-node>span.fancytree-icon,
.fancytree-node>span.fancytree-icon:hover {
background-position: 0 0;
background-image: url("./img/state.png");
width: 24px;
height: 24px;
}
.fancytree-node.fancytree-folder>span.fancytree-icon {
background-position: 0 0;
background-image: url("./img/folder.png");
width: 24px;
height: 24px;
}
.fancytree-node.fancytree-folder>span.fancytree-expander {
background-position: 0 0;
background-image: url("./img/menu_right.svg");
width: 24px;
height: 24px;
}
.fancytree-node.fancytree-expanded.fancytree-folder>span.fancytree-expander {
background-position: 0 0;
background-image: url("./img/menu_down.svg");
width: 24px;
height: 24px;
}
.fancytree-folder-title-id {
font-size: .9em;
min-width: 130px;
}
.fancytree-item-title-id {
min-width: 130px;
}
.fancytree-item-title-name {
width: auto;
}
.fancytree-node.fancytree-folder {
border-bottom: 0.5px solid #64b5f6;
margin-top: 20px;
}
.fancytree-node.fancytree-folder .fancytree-title {
font-size: 16px;
font-weight: 500;
}
.container_foldersTable {
height: 70%;
}
.container_mycommandsTable {
height: 70%;
}
/* Drag Item Layout */
.fancytree-drag-item-container {
display: flex;
align-items: center;
background: #64b5f6;
width: 250px;
height: 24px;
background: #64b5f6 ;
}
.fancytree-drag-item-image {
width: 24px;
height: 24px;
}
.fancytree-drag-text {
color: white ;
font-size: 0.8rem ;
font-family: "Segoe UI", Tahoma, Arial, "Courier New" ;
font-weight: bold ;
margin-left: 6px;
}
/* all tables */
.m td {
text-align: center;
}
/* Hosts Table */
.values-input[data-name="ip"],
.values-input[data-name="port"],
.values-input[data-name="interval"],
.values-input[data-name="timeout"] {
text-align: center;
}
/* Folders Table */
.container_foldersTable .values-input[data-name="digits"],
.container_foldersTable td:first-child+td+td+td+td+td .select-wrapper>input,
.container_foldersTable td:first-child+td+td+td+td+td .dropdown-content.select-dropdown>li {
text-align: center;
}
/* Commands Table */
.container_mycommandsTable .values-input[data-name="unit"],
.container_mycommandsTable td:first-child+td+td+td+td+td+td .select-wrapper>input,
.container_mycommandsTable td:first-child+td+td+td+td+td+td .dropdown-content.select-dropdown>li {
text-align: center;
}
/* chips */
.m .chips.focus {
border-bottom: 1px solid #64b5f6;
box-shadow: 0 1px 0 0 #64b5f6;
}
.m .chip:focus {
outline: none;
background-color: #64b5f6;
}
.m .chips .input {
width: unset ;
}
.container_blacklistDatapoints {
margin-top: 20px;
}
.blacklistDatapoints_header {
display: block;
background-color: #2196f3;
width: 100%;
color: #fff ;
letter-spacing: .5px;
padding: .3rem;
}
/* Header section */
.help-link {
order: 3 ;
width: auto ;
display: flex ;
align-items: center ;
}
.help-link .btn-floating {
margin-top: 0 ;
}
.card-stacked {
order: 1;
}
.logo {
width: 100px;
height: 100px;
padding: 12px ;
}
/* Card Styles */
.card {
margin: 0 ;
margin-top: 6px ;
}
.card-content.fannytree {
padding: 0 24px ;
}
.card-content.blacklistDatapoints {
padding: 16px 16px 4px 16px ;
}
.card-content.blacklistDatapoints .card-title {
font-size: 20px ;
}
.card-title {
color: #2196f3;
margin-bottom: 12px ;
}
.my-card-subTitle {
font-size: 16px ;
margin-top: 6px ;
font-style: italic ;
color: gray ;
}
.my-card-title {
font-size: 24px ;
font-weight: 300 ;
color: #2196f3 ;
}
</style>
</head>
<body>
<div class="m adapter-container">
<div class="row">
<div class="col s12">
<ul class="tabs" style="height: auto;">
<li class="tab col s6 l2"><a href="#tab_general" class="translate active">general</a></li>
<li class="tab col s6 l2 datapointsTab"><a href="#tab_datapoints" class="translate">datapoints</a>
</li>
<li class="tab col s6 l2 servicesTab"><a href="#tab_services" class="translate">services</a></li>
<li class="tab col s6 l2 foldersTab"><a href="#tab_folders" class="translate">folders</a></li>
<li class="tab col s6 l2 mycommandsTab"><a href="#tab_mycommands" class="translate">mycommands</a>
</li>
</ul>
</div>
<div id="tab_general" class="col s12 page">
<div class="col s12">
<div class="row">
<div class="col s12 m12 l12 card horizontal">
<div class="card-image">
<img class="logo" src="linux-control.png">
</div>
<div class="card-stacked">
<div class="card-content">
<div>
<div class="my-card-title" id="adapterTitle">Linux Control</div>
<div class="my-card-subTitle translate">Controlling Linux devices and get information about your system</div>
</div>
</div>
</div>
</div>
<!-- Put your content here -->
<!-- For example columns with settings: -->
<section>
<div class="col s12 m12 l12 card">
<div class="card-content">
<span class="card-title translate">Documentations</span>
<ul class="tabs" style="height: auto;">
<li class="tab myLinkBar col s6 l2"><a
href="https://github.com/Scrounger/ioBroker.linux-control/blob/master/README.md"
target="_blank" class="translate">lc_settings</a></li>
<li class="tab myLinkBar col s6 l2"><a
href="https://forum.iobroker.net/topic/35870/test-adapter-linux-control-v1-x-x"
target="_blank" class="translate">lc_forum</a></li>
</ul>
</div>
</div>
<div class="col s12 m12 l12 card" style="padding-bottom: 20px;">
<div class="card-content">
<span class="card-title translate">Host configuration table</span>
<div class="col s12" id="hosts">
<div>
<a
class="btn-floating waves-effect waves-light blue table-button-add hostsTable-button-add"><i
class="material-icons">add</i></a>
<span class="my-card-subTitle translate" style="margin-left: 10px;">add_host</span>
</div>
<div class="table-values-div" style="margin-top: 10px;">
<table class="table-values" id="hostsTable">
<thead>
<tr>
<th data-name="enabled" data-type="checkbox" checked="true"
data-default="true" style="width: 20px;"
data-style="width: 20px;" class="translate">enabled</th>
<th data-name="name" style="width: 10%" class="translate">Name</th>
<th data-name="ip" style="width: 10%; text-align: center;"
class="translate">IP</th>
<th data-name="port" data-default="22"
style="width: 5%; text-align: center;" class="translate">Port</th>
<th data-name="interval" data-type="number" data-default="5"
style="width: 10%; text-align: center;" class="translate">pollingInterval</th>
<th data-name="user" style="width: 10%;" class="translate">User</th>
<th data-name="password" data-type="password" style="width: 10%"
class="translate">Password</th>
<th data-name="useSudo" data-type="checkbox"
style="width: 20px;" data-style="width: 20px;"
class="translate">use Sudo</th>
<th data-name="rsakey" style="width: auto" class="translate">RSA Key</th>
<th data-name="timeout" data-type="number" data-default="5"
style="width: 100px; text-align: center;" class="translate">timeout</th>
<th data-buttons="delete up down" style="width: 60px"></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l12 card">
<div class="card-content">
<div style="display: flex; align-items: center; justify-content: center;"><span class="mdi mdi-coffee" style="font-size: 20px; color: #46a0e9; margin-right: 6px;"></span><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VWAXSTS634G88&source=url" target="_blank" class="translate">donation</a></div>
</div>
</div>
</section>
</div>
</div>
</div>
<div id="tab_datapoints" class="col s12 page">
<div class="row">
<section>
<div class="col s7 m7 l7" style="padding-right: 3px;">
<div class="col s12 m12 l12 card">
<div class="card-content fannytree">
<div class="row">
<div class="treeContainer" id="tree_datapoints"></div>
</div>
</div>
</div>
</div>
<div class="col s5" style="margin-top: -20px; padding-left: 3px;">
<div class="row">
<div class="container_blacklistDatapoints">
<!-- dynamically creates table on evey change of the select values -->
</div>
</div>
</div>
</section>
</div>
</div>
<div id="tab_services" class="col s12 page">
<div class="row">
<section>
<div class="container_whitelistServices">
<!-- dynamically creates table on evey change of the select values -->
</div>
</section>
</div>
</div>
<div id="tab_folders" class="col s12 page">
<div class="row">
<section>
<div class="col s12">
<div class="col s12 m12 l12 card" style="padding-bottom: 30px;">
<div class="card-content">
<span class="card-title translate">Table to configure folders to display their size as data points</span>
<div class="container_foldersTable">
<!-- dynamically creates table on evey change of the select values -->
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div id="tab_mycommands" class="col s12 page">
<div class="row">
<section>
<div class="col s12">
<div class="col s12 m12 l12 card" style="padding-bottom: 30px;">
<div class="card-content">
<span class="card-title translate">Table to configure your own commands</span>
<div class="container_mycommandsTable">
<!-- dynamically creates table on evey change of the select values -->
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>