Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Jeedom V4 UI #15

Merged
merged 1 commit into from Oct 24, 2019
Merged

Jeedom V4 UI #15

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
268 changes: 127 additions & 141 deletions desktop/php/piHole.php
View file
Open in desktop
@@ -1,170 +1,156 @@
<?php
if (!isConnect('admin')) {
throw new Exception('{{401 - Accès non autorisé}}');
throw new Exception('{{401 - Accès non autorisé}}');
}

sendVarToJS('eqType', 'piHole');
$eqLogics = eqLogic::byType('piHole');
?>
<div class="row row-overflow">
<div class="col-lg-2">
<div class="bs-sidebar">
<ul id="ul_eqLogic" class="nav nav-list bs-sidenav">
<li class="filter" style="margin-bottom: 5px;"><input class="filter form-control input-sm" placeholder="{{Rechercher}}" style="width: 100%"/></li>
<?php
foreach ($eqLogics as $eqLogic) {
echo '<li class="cursor li_eqLogic" data-eqLogic_id="' . $eqLogic->getId() . '"><a>' . $eqLogic->getHumanName(true) . '</a></li>';
}
?>
</ul>
</div>
<div class="col-xs-12 eqLogicThumbnailDisplay">
<legend><i class="fa fa-cog"></i> {{Gestion}}</legend>
<div class="eqLogicThumbnailContainer">
<div class="cursor eqLogicAction success" data-action="add">
<i class="fas fa-plus-circle"></i>
<br>
<span>{{Ajouter}}</span>
</div>
<div class="cursor eqLogicAction" data-action="gotoPluginConf">
<i class="fas fa-wrench"></i>
<br>
<span>{{Configuration}}</span>
</div>
<div class="cursor" id="bt_healthpiHole">
<i class="fa fa-medkit"></i>
<br>
<span>{{Santé}}</span>
</div>
</div>
<legend><i class="fa fa-table"></i> {{Mes serveurs piHole}}</legend>
<div class="eqLogicThumbnailContainer">
<?php
foreach ($eqLogics as $eqLogic) {
$opacity = ($eqLogic->getIsEnable()) ? '' : 'disableCard';
echo '<div class="eqLogicDisplayCard cursor '.$opacity.'" data-eqLogic_id="' . $eqLogic->getId() . '">';
echo '<img src="plugins/piHole/plugin_info/piHole_icon.png" />';
echo '<br>';
echo '<span class="name">' . $eqLogic->getHumanName(true, true) . '</span>';
echo '</div>';
}
?>
</div>
<div class="col-lg-10 col-md-9 col-sm-8 eqLogicThumbnailDisplay" style="border-left: solid 1px #EEE; padding-left: 25px;">
<legend><i class="fa fa-cog"></i> {{Gestion}}</legend>
<div class="eqLogicThumbnailContainer">
<div class="cursor eqLogicAction" data-action="add" style="background-color : #ffffff; height : 120px;margin-bottom : 10px;padding : 5px;border-radius: 2px;width : 160px;margin-left : 10px;" >
<center>
<i class="fa fa-plus-circle" style="font-size : 5em;color:#fcc127;"></i>
</center>
<span style="font-size : 1.1em;position:relative; top : 23px;word-break: break-all;white-space: pre-wrap;word-wrap: break-word;;color:#fcc127"><center>Ajouter</center></span>
</div>
<div class="cursor eqLogicAction" data-action="gotoPluginConf" style="background-color : #ffffff; height : 120px;margin-bottom : 10px;padding : 5px;border-radius: 2px;width : 160px;margin-left : 10px;">
<center>
<i class="fa fa-wrench" style="font-size : 5em;color:#767676;"></i>
</center>
<span style="font-size : 1.1em;position:relative; top : 15px;word-break: break-all;white-space: pre-wrap;word-wrap: break-word;color:#767676"><center>{{Configuration}}</center></span>
</div>
<div class="cursor" id="bt_healthpiHole" style="background-color : #ffffff; height : 120px;margin-bottom : 10px;padding : 5px;border-radius: 2px;width : 160px;margin-left : 10px;" >
<center>
<i class="fa fa-medkit" style="font-size : 5em;color:#767676;"></i>
</center>
<span style="font-size : 1.1em;position:relative; top : 15px;word-break: break-all;white-space: pre-wrap;word-wrap: break-word;color:#767676"><center>{{Santé}}</center></span>
</div>
</div>
<legend><i class="fa fa-table"></i> {{Mes serveurs piHole}}</legend>
<div class="eqLogicThumbnailContainer">
<?php
foreach ($eqLogics as $eqLogic) {
$opacity = '';
if ($eqLogic->getIsEnable() != 1) {
$opacity = 'opacity:0.3;';
}
echo '<div class="eqLogicDisplayCard cursor" data-eqLogic_id="' . $eqLogic->getId() . '" style="background-color : #ffffff; height : 200px;margin-bottom : 10px;padding : 5px;border-radius: 2px;width : 160px;margin-left : 10px;' . $opacity . '" >';
echo "<center>";
echo '<img src="plugins/piHole/plugin_info/piHole_icon.png" height="105" width="95" />';
echo "</center>";
echo '<span class="name"><center>' . $eqLogic->getHumanName(true, true) . '</center></span>';
echo '</div>';
}
?>
</div>
</div>
<div class="col-lg-10 col-md-9 col-sm-8 eqLogic" style="border-left: solid 1px #EEE; padding-left: 25px;display: none;">
<a class="btn btn-success eqLogicAction pull-right" data-action="save"><i class="fa fa-check-circle"></i> {{Sauvegarder}}</a>
<a class="btn btn-danger eqLogicAction pull-right" data-action="remove"><i class="fa fa-minus-circle"></i> {{Supprimer}}</a>
<a class="btn btn-default eqLogicAction pull-right" data-action="configure"><i class="fa fa-cogs"></i> {{Configuration avancée}}</a>
<div class="col-xs-12 eqLogic" style="display: none;">
<div class="input-group pull-right" style="display:inline-flex">
<span class="input-group-btn">
<a class="btn btn-sm btn-default eqLogicAction roundedLeft" data-action="configure"><i class="fa fa-cogs"></i> {{Configuration avancée}}
</a><a class="btn btn-sm btn-success eqLogicAction" data-action="save"><i class="fa fa-check-circle"></i> {{Sauvegarder}}
</a><a class="btn btn-sm btn-danger eqLogicAction roundedRight" data-action="remove"><i class="fa fa-minus-circle"></i> {{Supprimer}}</a>
</span>
</div>

<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a class="eqLogicAction cursor" aria-controls="home" role="tab" data-action="returnToThumbnailDisplay"><i class="fa fa-arrow-circle-left"></i></a></li>
<li role="presentation" class="active"><a href="#eqlogictab" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-tachometer"></i> {{Equipement}}</a></li>
<li role="presentation"><a href="#commandtab" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-list-alt"></i> {{Commandes}}</a></li>
</ul>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a class="eqLogicAction cursor" aria-controls="home" role="tab" data-action="returnToThumbnailDisplay"><i class="fa fa-arrow-circle-left"></i></a></li>
<li role="presentation" class="active"><a href="#eqlogictab" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-tachometer"></i> {{Equipement}}</a></li>
<li role="presentation"><a href="#commandtab" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-list-alt"></i> {{Commandes}}</a></li>
</ul>

<div class="tab-content" style="height:calc(100% - 50px);overflow:auto;overflow-x: hidden;">
<div role="tabpanel" class="tab-pane active" id="eqlogictab">
<div class="row">
<div class="col-sm-6">
<form class="form-horizontal">
<div class="tab-content" style="height:calc(100% - 50px);overflow:auto;overflow-x: hidden;">
<div id="eqlogictab" role="tabpanel" class="tab-pane active">
<br>
<div class="row">
<div class="col-sm-9">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
</br>
<label class="col-lg-3 control-label">{{Nom de l'équipement}}</label>
<div class="col-lg-4">
<input type="text" class="eqLogicAttr form-control" data-l1key="id" style="display : none;" />
<input type="text" class="eqLogicAttr form-control" data-l1key="name" placeholder="{{Nom de l'équipement}}"/>
</div>

<div class="form-group">
<label class="col-lg-3 control-label">{{Nom de l'équipement}}</label>
<div class="col-lg-4">
<input type="text" class="eqLogicAttr form-control" data-l1key="id" style="display : none;" />
<input type="text" class="eqLogicAttr form-control" data-l1key="name" placeholder="{{Nom de l'équipement}}"/>
</div>
<div class="form-group">
</div>
<div class="form-group">
<label class="col-lg-3 control-label" >{{Objet parent}}</label>
<div class="col-lg-4">
<select id="sel_object" class="eqLogicAttr form-control" data-l1key="object_id">
<option value="">{{Aucun}}</option>
<?php
foreach (jeeObject::all() as $object) {
echo '<option value="' . $object->getId() . '">' . $object->getName() . '</option>';
}
?>
</select>
</div>
<div class="col-lg-4">
<select id="sel_object" class="eqLogicAttr form-control" data-l1key="object_id">
<option value="">{{Aucun}}</option>
<?php
foreach (jeeObject::all() as $object) {
echo '<option value="' . $object->getId() . '">' . $object->getName() . '</option>';
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{Catégorie}}</label>
<label class="col-sm-3 control-label">{{Catégorie}}</label>
<div class="col-sm-9">
<?php
foreach (jeedom::getConfiguration('eqLogic:category') as $key => $value) {
echo '<label class="checkbox-inline">';
echo '<input type="checkbox" class="eqLogicAttr" data-l1key="category" data-l2key="' . $key . '" />' . $value['name'];
echo '</label>';
}
foreach (jeedom::getConfiguration('eqLogic:category') as $key => $value) {
echo '<label class="checkbox-inline">';
echo '<input type="checkbox" class="eqLogicAttr" data-l1key="category" data-l2key="' . $key . '" />' . $value['name'];
echo '</label>';
}
?>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<label class="checkbox-inline"><input type="checkbox" class="eqLogicAttr" data-l1key="isEnable" checked/>{{Activer}}</label>
<label class="checkbox-inline"><input type="checkbox" class="eqLogicAttr" data-l1key="isVisible" checked/>{{Visible}}</label>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<label class="checkbox-inline"><input type="checkbox" class="eqLogicAttr" data-l1key="isEnable" checked/>{{Activer}}</label>
<label class="checkbox-inline"><input type="checkbox" class="eqLogicAttr" data-l1key="isVisible" checked/>{{Visible}}</label>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{Ip du serveur}}</label>
<div class="col-sm-6">
<input type="text" class="eqLogicAttr form-control" data-l1key="configuration" data-l2key="ip" placeholder="{{Ip du serveur piHole}}"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{Ip du serveur}}</label>
<div class="col-sm-6">
<input type="text" class="eqLogicAttr form-control" data-l1key="configuration" data-l2key="ip" placeholder="{{Ip du serveur piHole}}"/>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{Apikey}}</label>
<div class="col-sm-6">
<input type="text" class="eqLogicAttr form-control" data-l1key="configuration" data-l2key="apikey" placeholder="{{Apikey de votre serveur}}"/>
</div>
</div>
<div class="form-group expertModeVisible">
<label class="col-sm-3 control-label">{{Auto-actualisation (cron)}}</label>
<div class="col-sm-3">
<input type="text" class="eqLogicAttr form-control" data-l1key="configuration" data-l2key="autorefresh" placeholder="*/5 * * * *"/>
</div>
<div class="col-sm-1">
<i class="fa fa-question-circle cursor floatright" id="bt_cronGenerator"></i>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">{{Apikey}}</label>
<div class="col-sm-6">
<input type="text" class="eqLogicAttr form-control" data-l1key="configuration" data-l2key="apikey" placeholder="{{Apikey de votre serveur}}"/>
</div>
</div>
<div class="form-group expertModeVisible">
<label class="col-sm-3 control-label">{{Auto-actualisation (cron)}}</label>
<div class="col-sm-3">
<input type="text" class="eqLogicAttr form-control" data-l1key="configuration" data-l2key="autorefresh" placeholder="*/5 * * * *"/>
</div>
<div class="col-sm-1">
<i class="fa fa-question-circle cursor floatright" id="bt_cronGenerator"></i>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-sm-6">
<center>
<img src="plugins/piHole/plugin_info/piHole_icon.png" style="height : 300px;margin-top:5px" />
</center>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="commandtab">
<legend><i class="fa fa-list-alt"></i> {{Tableau de commandes}}</legend>
<table id="table_cmd" class="table table-bordered table-condensed">
<thead>
<tr>
<th>{{Nom}}</th><th>{{Options}}</th><th>{{Action}}</th>
</tr>
</thead>
<tbody>
</form>
</div>

</tbody>
</table>
<form class="form-horizontal col-sm-3">
<fieldset>
<div class="form-group">
<img src="plugins/piHole/plugin_info/piHole_icon.png" style="height: 200px;" />
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="commandtab">
<legend><i class="fa fa-list-alt"></i> {{Tableau de commandes}}</legend>
<table id="table_cmd" class="table table-bordered table-condensed">
<thead>
<tr>
<th>{{Nom}}</th><th>{{Options}}</th><th>{{Action}}</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>

<?php include_file('desktop', 'piHole', 'js', 'piHole'); ?>
<?php include_file('core', 'plugin.template', 'js'); ?>
<?php
include_file('desktop', 'piHole', 'js', 'piHole');
include_file('core', 'plugin.template', 'js');
?>