153 lines
5.5 KiB
PHTML
153 lines
5.5 KiB
PHTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<?php
|
|
$partial = new Partial('head');
|
|
$partial->prepare('baseDir', $BASEDIR);
|
|
$partial->render();
|
|
?>
|
|
<title><?php echo $TITLE ?></title>
|
|
</head>
|
|
<body class="no-transitions">
|
|
<div class="row no-gutters main">
|
|
<div class="col-md-3 d-sm-none"></div>
|
|
<div class="col-md-3 nav-container">
|
|
<?php
|
|
$partial = new Partial('menu');
|
|
$partial->prepare('item', 'rooms');
|
|
$partial->prepare('lang',$LANG);
|
|
$partial->render();
|
|
?>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-md-9 main-body">
|
|
<div class="frame">
|
|
<?php foreach ($ROOMS as $roomId => $room) { ?>
|
|
<div class="single-frame" id="room-<?php echo $roomId; ?>">
|
|
<div class="">
|
|
<h1><?php echo $room['name']; ?></h1>
|
|
<?php foreach ($room['reading'] as $key => $value) { ?>
|
|
<?php echo $LANG[$key] .": ". $value; ?></br>
|
|
<?php } ?>
|
|
<?php if (DEBUGMOD == 1) { ?>
|
|
<pre>
|
|
<?php var_dump($room);?>
|
|
</pre>
|
|
<?php } ?>
|
|
</div>
|
|
<?php foreach ($room['controls'] as $key => $value) { ?>
|
|
<div class="row no-gutters">
|
|
<div class="device-button col-4 col-sm-3 col-xl-2 square-wrap" data-room-id="">
|
|
<div class="square">
|
|
<div class="square-content" id="device-" data-sub-device-id="">
|
|
<div class="content">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h5 unselectable="on" class="fa">&#x<?php echo $value['icon'];?></h5>
|
|
</div>
|
|
<div class="col">
|
|
<h5 unselectable="on" class="device-button-value text-right" title=""><?php echo $value['value'];?></h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col" unselectable="on" >
|
|
<?php echo $value['name'];?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php } ?>
|
|
</div>
|
|
<?php } ?>
|
|
</div>
|
|
<style>
|
|
.single-frame {
|
|
background-color: red;
|
|
width: 100%;
|
|
flex: 0 0 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.frame {
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
body,html{
|
|
height: 100%;
|
|
}
|
|
|
|
.frame .single-frame:nth-child(even) {
|
|
background: red;
|
|
}
|
|
|
|
.frame .single-frame:nth-child(odd) {
|
|
background: green;
|
|
}
|
|
|
|
</style>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
$partial = new Partial('footer');
|
|
$partial->render();
|
|
?>
|
|
<script>
|
|
var prev_id;
|
|
var id;
|
|
var current_element
|
|
var elementWidth = $('.frame').width();
|
|
|
|
$('.frame').scroll(function(){
|
|
//console.log('SCROLLING!');
|
|
//console.log('scrool'+$('.single-frame').scrollLeft());
|
|
var element_width = $('.single-frame').width();
|
|
|
|
var offset = $('.single-frame').offset();
|
|
var positive = Math.abs(offset.left)
|
|
var divided = positive / element_width;
|
|
var round = Math.round(divided);
|
|
|
|
current_element = $('.frame').children().eq(round);
|
|
id = current_element.attr('id');
|
|
|
|
if (prev_id != id){
|
|
prev_id = id;
|
|
console.log(prev_id);
|
|
}
|
|
var scrollTo = $('#'+id).offset().left;
|
|
console.log('s-f: '+ scrollTo)
|
|
|
|
});
|
|
$('.frame').on('touchend', function(){ // listen to mouse up
|
|
console.log('STOPPED SCROLLING!');
|
|
var scrollLeft = $('.frame').scrollLeft();
|
|
console.log('frameLeft' + scrollLeft);
|
|
var a = $('.frame').children();
|
|
for (index = 0; index < a.length; ++index) {
|
|
if(a[index].id == id){
|
|
$('.frame').animate({
|
|
scrollLeft: (index * elementWidth)
|
|
});
|
|
$('.frame').animate({
|
|
scrollLeft: (index * elementWidth)
|
|
});
|
|
}
|
|
console.log(a[index]);
|
|
}
|
|
|
|
if (scrollTo > 160) {
|
|
console.log($('#'+id).left)
|
|
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|