iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

change shift table to html5

This commit is contained in:
msquare 2016-11-05 10:06:06 +01:00
parent 902866ff3a
commit cf8cc5f592
11 changed files with 439 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
includes/engelsystem_provider.php
View File

@ -29,6 +29,7 @@ require_once realpath(__DIR__ . '/../includes/view/AngelTypes_view.php');
require_once realpath(__DIR__ . '/../includes/view/EventConfig_view.php');
require_once realpath(__DIR__ . '/../includes/view/Questions_view.php');
require_once realpath(__DIR__ . '/../includes/view/Rooms_view.php');
require_once realpath(__DIR__ . '/../includes/view/ShiftCalendarLane.php');
require_once realpath(__DIR__ . '/../includes/view/ShiftCalendarRenderer.php');
require_once realpath(__DIR__ . '/../includes/view/ShiftsFilterRenderer.php');
require_once realpath(__DIR__ . '/../includes/view/Shifts_view.php');

2
includes/model/NeededAngelTypes_model.php
View File

@ -57,7 +57,7 @@ function NeededAngelTypes_delete_by_room($room_id) {
*/
function NeededAngelTypes_by_shift($shiftId) {
$needed_angeltypes_source = sql_select("
SELECT `NeededAngelTypes`.*, `AngelTypes`.`name`, `AngelTypes`.`restricted`
SELECT `NeededAngelTypes`.*, `AngelTypes`.`id`, `AngelTypes`.`name`, `AngelTypes`.`restricted`
FROM `NeededAngelTypes`
JOIN `AngelTypes` ON `AngelTypes`.`id` = `NeededAngelTypes`.`angel_type_id`
WHERE `shift_id`='" . sql_escape($shiftId) . "'

5
includes/sys_template.php
View File

@ -42,8 +42,11 @@ function glyph_bool($boolean) {
}
function div($class, $content = [], $dom_id = "") {
if (is_array($content)) {
$content = join("\n", $content);
}
$dom_id = $dom_id != '' ? ' id="' . $dom_id . '"' : '';
return '<div' . $dom_id . ' class="' . $class . '">' . join("\n", $content) . '</div>';
return '<div' . $dom_id . ' class="' . $class . '">' . $content . '</div>';
}
function heading($content, $number = 1) {

63
includes/view/ShiftCalendarLane.php Normal file
View File

@ -0,0 +1,63 @@
<?php
namespace Engelsystem;
/**
* Represents a single lane in a shifts calendar.
*/
class ShiftCalendarLane {
private $firstBlockStartTime;
private $blockCount;
private $header;
private $shifts = [];
public function __construct($header, $firstBlockStartTime, $blockCount) {
$this->header = $header;
$this->firstBlockStartTime = $firstBlockStartTime;
$this->blockCount = $blockCount;
}
/**
* Adds a shift to the lane, but only if it fits.
* Returns true on success.
*
* @param Shift $shift
* The shift to add
* @return boolean true on success
*/
public function addShift($shift) {
if ($this->shiftFits($shift)) {
$this->shifts[] = $shift;
return true;
}
return false;
}
/**
* Returns true if given shift fits into this lane.
*
* @param Shift $shift
* The shift to fit into this lane
*/
public function shiftFits($newShift) {
foreach ($this->shifts as $laneShift) {
if (! ($newShift['start'] >= $laneShift['end'] || $newShift['end'] <= $laneShift['start'])) {
return false;
}
}
return true;
}
public function getHeader() {
return $this->header;
}
public function getShifts() {
return $this->shifts;
}
}
?>

296
includes/view/ShiftCalendarRenderer.php
View File

@ -7,72 +7,186 @@ class ShiftCalendarRenderer {
/**
* 15m * 60s/m = 900s
*/
const MINUTES_PER_ROW = 900;
const SECONDS_PER_ROW = 900;
const EMPTY_CELL = '<td class="empty"></td>';
/**
* Height of a block in pixel.
* Do not change - corresponds with theme/css
*/
const BLOCK_HEIGHT = 30;
private $shifts;
/**
* Distance between two shifts in pixels
*/
const MARGIN = 5;
private $lanes;
private $shiftsFilter;
private $firstBlockStartTime = null;
private $blocksPerSlot = null;
public function __construct($shifts, ShiftsFilter $shiftsFilter) {
$this->shifts = $shifts;
$this->shiftsFilter = $shiftsFilter;
$this->firstBlockStartTime = $this->calcFirstBlockStartTime($shifts);
$this->lanes = $this->assignShiftsToLanes($shifts);
}
public function render() {
$rooms = $this->rooms();
/**
* Assigns the shifts to different lanes per room if they collide
*
* @param Shift[] $shifts
* The shifts to assign
*
* @return Returns an array that assigns a room_id to an array of ShiftCalendarLane containing the shifts
*/
private function assignShiftsToLanes($shifts) {
// array that assigns a room id to a list of lanes (per room)
$lanes = [];
$first_block_start_time = $this->calcFirstBlockStartTime();
$blocks_per_slot = $this->calcBlocksPerSlot($first_block_start_time);
$slotSizes = $this->calcSlotSizes($rooms, $first_block_start_time, $blocks_per_slot);
return $this->renderTable($rooms, $slotSizes, $first_block_start_time, $blocks_per_slot);
}
private function renderTableHead($rooms, $slotSizes) {
$shifts_table = '<thead><tr><th>' . _("Time") . '</th>';
foreach ($rooms as $room_id => $room_name) {
$colspan = $slotSizes[$room_id];
$shifts_table .= "<th" . (($colspan > 1) ? ' colspan="' . $colspan . '"' : '') . ">" . Room_name_render([
'RID' => $room_id,
'Name' => $room_name
]) . "</th>\n";
}
$shifts_table .= "</tr></thead>";
return $shifts_table;
}
private function initTableBody($slotSizes, $first_block_start_time, $blocks_per_slot) {
// Slot sizes plus 1 for the time
$columns_needed = array_sum($slotSizes) + 1;
$table_line = array_fill(0, $columns_needed, ShiftCalendarRenderer::EMPTY_CELL);
$table = array_fill(0, $blocks_per_slot, $table_line);
for ($block = 0; $block < $blocks_per_slot; $block ++) {
$thistime = $first_block_start_time + ($block * ShiftCalendarRenderer::MINUTES_PER_ROW);
if ($thistime % (24 * 60 * 60) == 23 * 60 * 60 && $this->shiftsFilter->getEndTime() - $this->shiftsFilter->getStartTime() > 24 * 60 * 60) {
$table[$block][0] = '<th class="row-day">' . date('Y-m-d<b\r />H:i', $thistime) . '</th>';
} elseif ($thistime % (60 * 60) == 0) {
$table[$block][0] = '<th class="row-hour">' . date('H:i', $thistime) . '</th>';
} else {
$table[$block][0] = '<th class="empty"></th>';
foreach ($shifts as $shift) {
$room_id = $shift['RID'];
if (! isset($lanes[$room_id])) {
// initialize room with one lane
$header = Room_name_render([
'RID' => $room_id,
'Name' => $shift['room_name']
]);
$lanes[$room_id] = [
new ShiftCalendarLane($header, $this->getFirstBlockStartTime(), $this->getBlocksPerSlot())
];
}
// Try to add the shift to the existing lanes for this room
$shift_added = false;
foreach ($lanes[$room_id] as $lane) {
$shift_added = $lane->addShift($shift);
if ($shift_added == true) {
break;
}
}
// If all lanes for this room are busy, create a new lane and add shift to it
if ($shift_added == false) {
$newLane = new ShiftCalendarLane("", $this->getFirstBlockStartTime(), $this->getBlocksPerSlot());
if (! $newLane->addShift($shift)) {
engelsystem_error("Unable to add shift to new lane.");
}
$lanes[$room_id][] = $newLane;
}
}
return $table;
return $lanes;
}
private function calcRoomSlots($rooms, $slotSizes) {
$result = [];
$slot = 1; // 1 for the time
foreach (array_keys($rooms) as $room_id) {
$result[$room_id] = $slot;
$slot += $slotSizes[$room_id];
public function getFirstBlockStartTime() {
return $this->firstBlockStartTime;
}
public function getBlocksPerSlot() {
if ($this->blocksPerSlot == null) {
$this->blocksPerSlot = $this->calcBlocksPerSlot();
}
return $this->blocksPerSlot;
}
/**
* Renders the whole calendar
*
* @return the generated html
*/
public function render() {
return div('shift-calendar', [
$this->renderTimeLane(),
$this->renderShiftLanes()
]);
}
/**
* Renders the lanes containing the shifts
*/
private function renderShiftLanes() {
$html = "";
foreach ($this->lanes as $room_id => $room_lanes) {
foreach ($room_lanes as $lane) {
$html .= $this->renderLane($lane);
}
}
return $html;
}
/**
* Renders a single lane
*
* @param ShiftCalendarLane $lane
* The lane to render
*/
private function renderLane(ShiftCalendarLane $lane) {
$html = "";
$rendered_until = $this->getFirstBlockStartTime();
foreach ($lane->getShifts() as $shift) {
while ($rendered_until + ShiftCalendarRenderer::SECONDS_PER_ROW <= $shift['start']) {
$html .= $this->renderTick($rendered_until);
$rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW;
}
list($shift_height, $shift_html) = $this->renderShift($shift);
$html .= $shift_html;
$rendered_until += $shift_height * ShiftCalendarRenderer::SECONDS_PER_ROW;
}
while ($rendered_until <= $this->shiftsFilter->getEndTime()) {
$html .= $this->renderTick($rendered_until);
$rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW;
}
return $result;
return div('lane', [
div('header', $lane->getHeader()),
$html
]);
}
/**
* Renders a tick/block for given time
*
* @param int $time
* unix timestamp
* @param boolean $label
* Should time labels be generated?
* @return rendered tick html
*/
private function renderTick($time, $label = false) {
if ($time % (24 * 60 * 60) == 23 * 60 * 60) {
if (! $label) {
return div('tick day');
}
return div('tick day', [
date('Y-m-d<b\r />H:i', $time)
]);
} elseif ($time % (60 * 60) == 0) {
if (! $label) {
return div('tick hour');
}
return div('tick hour', [
date('H:i', $time)
]);
}
return div('tick');
}
/**
* Renders the left time lane including hour/day ticks
*/
private function renderTimeLane() {
$time_slot = [
div('header', [
_("Time")
])
];
for ($block = 0; $block < $this->getBlocksPerSlot(); $block ++) {
$thistime = $this->getFirstBlockStartTime() + ($block * ShiftCalendarRenderer::SECONDS_PER_ROW);
$time_slot[] = $this->renderTick($thistime, true);
}
return div('lane time', $time_slot);
}
private function collides() {
@ -172,15 +286,14 @@ class ShiftCalendarRenderer {
$class = 'success';
}
$blocks = ceil(($shift["end"] - $shift["start"]) / ShiftCalendarRenderer::MINUTES_PER_ROW);
$blocks = ceil(($shift["end"] - $shift["start"]) / ShiftCalendarRenderer::SECONDS_PER_ROW);
if ($blocks < 1) {
$blocks = 1;
}
$shift_length = ($shift["end"] - $shift["start"]) / (60 * 60);
$shift_heading = date('H:i', $shift['start']) . ' &dash; ' . date('H:i', $shift['end']) . ' &mdash; ' . ShiftType($shift['shifttype_id'])['name'];
return [
$blocks,
'<td class="shift" rowspan="' . $blocks . '">' . div('panel panel-' . $class . '" style="min-height: ' . ($shift_length * 100) . 'px"', [
'<td class="shift" rowspan="' . $blocks . '">' . div('shift panel panel-' . $class . '" style="height: ' . ($blocks * ShiftCalendarRenderer::BLOCK_HEIGHT - ShiftCalendarRenderer::MARGIN) . 'px"', [
div('panel-heading', [
'<a href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
$header_buttons
@ -198,87 +311,18 @@ class ShiftCalendarRenderer {
];
}
private function renderTableBody($rooms, $slotSizes, $first_block_start_time, $blocks_per_slot) {
$table = $this->initTableBody($slotSizes, $first_block_start_time, $blocks_per_slot);
$room_slots = $this->calcRoomSlots($rooms, $slotSizes);
foreach ($this->shifts as $shift) {
list($blocks, $shift_content) = $this->renderShift($shift);
$start_block = floor(($shift['start'] - $first_block_start_time) / ShiftCalendarRenderer::MINUTES_PER_ROW);
$slot = $room_slots[$shift['RID']];
while ($table[$start_block][$slot] != ShiftCalendarRenderer::EMPTY_CELL) {
$slot ++;
}
$table[$start_block][$slot] = $shift_content;
for ($block = 1; $block < $blocks; $block ++) {
$table[$start_block + $block][$slot] = '';
}
}
$result = '<tbody>';
foreach ($table as $table_line) {
$result .= '<tr>' . join('', $table_line) . '</tr>';
}
$result .= '</tbody>';
return $result;
}
private function renderTable($rooms, $slotSizes, $first_block_start_time, $blocks_per_slot) {
return div('shifts-table', [
'<table id="shifts" class="table scrollable">',
$this->renderTableHead($rooms, $slotSizes),
$this->renderTableBody($rooms, $slotSizes, $first_block_start_time, $blocks_per_slot),
'</table>'
]);
}
/**
* Calculates the slots for each room that appears in the shifts
*/
private function rooms() {
$rooms = [];
foreach ($this->shifts as $shift) {
if (! isset($rooms[$shift['RID']])) {
$rooms[$shift['RID']] = $shift['room_name'];
}
}
return $rooms;
}
private function calcFirstBlockStartTime() {
private function calcFirstBlockStartTime($shifts) {
$start_time = $this->shiftsFilter->getEndTime();
foreach ($this->shifts as $shift) {
foreach ($shifts as $shift) {
if ($shift['start'] < $start_time) {
$start_time = $shift['start'];
}
}
return ShiftCalendarRenderer::MINUTES_PER_ROW * floor(($start_time - 60 * 60) / ShiftCalendarRenderer::MINUTES_PER_ROW);
return ShiftCalendarRenderer::SECONDS_PER_ROW * floor(($start_time - 60 * 60) / ShiftCalendarRenderer::SECONDS_PER_ROW);
}
private function calcBlocksPerSlot($first_block_start_time) {
return ceil(($this->shiftsFilter->getEndTime() - $first_block_start_time) / ShiftCalendarRenderer::MINUTES_PER_ROW);
}
private function calcSlotSizes($rooms, $first_block_start_time, $blocks_per_slot) {
$parallel_blocks = [];
// initialize $block array
foreach (array_keys($rooms) as $room_id) {
$parallel_blocks[$room_id] = array_fill(0, $blocks_per_slot, 0);
}
// calculate number of parallel shifts in each timeslot for each room
foreach ($this->shifts as $shift) {
$room_id = $shift["RID"];
$shift_blocks = ($shift["end"] - $shift["start"]) / ShiftCalendarRenderer::MINUTES_PER_ROW;
$firstblock = floor(($shift["start"] - $first_block_start_time) / ShiftCalendarRenderer::MINUTES_PER_ROW);
for ($block = $firstblock; $block < $shift_blocks + $firstblock && $block < $blocks_per_slot; $block ++) {
$parallel_blocks[$room_id][$block] ++;
}
}
return array_map('max', $parallel_blocks);
private function calcBlocksPerSlot() {
return ceil(($this->shiftsFilter->getEndTime() - $this->getFirstBlockStartTime()) / ShiftCalendarRenderer::SECONDS_PER_ROW);
}
}

49
public/css/theme0.css
View File

@ -6730,25 +6730,46 @@ body {
.footer a {
color: #777777;
}
#shifts.table td,
#shifts.table th {
background-color: #f0f0f0;
.shift-calendar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-itmes: stretch;
width: 100%;
}
#shifts.table .row-hour {
border-top-color: #777777;
.shift-calendar .lane {
background: #f9f9f9;
min-width: 300px;
width: 300px;
flex-grow: 1;
}
#shifts.table td.shift {
height: 1px;
padding: 0;
.shift-calendar .lane .header {
background: #fff;
height: 30px;
padding: 5px;
}
#shifts.table td.shift .panel {
margin: 0px 0px 0px 5px;
.shift-calendar .lane .tick {
height: 30px;
border-top: 1px solid #f4f4f4;
}
.row-day {
border-top: 2px solid #777777;
.shift-calendar .lane .tick.hour {
border-top: 2px solid #dddddd;
font-size: 0.9em;
padding-left: 5px;
}
.row-header {
min-width: 90px;
.shift-calendar .lane .tick.day {
border-top: 2px solid #337ab7;
font-size: 0.9em;
padding-left: 5px;
}
.shift-calendar .lane.time {
min-width: 100px;
width: 100px;
flex-grow: 0;
}
.shift-calendar .shift {
margin: 0 5px 5px 0;
overflow: hidden;
}
.space-top {
margin-top: 15px;

49
public/css/theme1.css
View File

@ -6753,25 +6753,46 @@ body {
.footer a {
color: #888888;
}
#shifts.table td,
#shifts.table th {
background-color: #f0f0f0;
.shift-calendar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-itmes: stretch;
width: 100%;
}
#shifts.table .row-hour {
border-top-color: #888888;
.shift-calendar .lane {
background: #080808;
min-width: 300px;
width: 300px;
flex-grow: 1;
}
#shifts.table td.shift {
height: 1px;
padding: 0;
.shift-calendar .lane .header {
background: #fff;
height: 30px;
padding: 5px;
}
#shifts.table td.shift .panel {
margin: 0px 0px 0px 5px;
.shift-calendar .lane .tick {
height: 30px;
border-top: 1px solid #030303;
}
.row-day {
border-top: 2px solid #888888;
.shift-calendar .lane .tick.hour {
border-top: 2px solid #282828;
font-size: 0.9em;
padding-left: 5px;
}
.row-header {
min-width: 90px;
.shift-calendar .lane .tick.day {
border-top: 2px solid #428bca;
font-size: 0.9em;
padding-left: 5px;
}
.shift-calendar .lane.time {
min-width: 100px;
width: 100px;
flex-grow: 0;
}
.shift-calendar .shift {
margin: 0 5px 5px 0;
overflow: hidden;
}
.space-top {
margin-top: 15px;

49
public/css/theme2.css
View File

@ -6730,25 +6730,46 @@ body {
.footer a {
color: #777777;
}
#shifts.table td,
#shifts.table th {
background-color: #f0f0f0;
.shift-calendar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-itmes: stretch;
width: 100%;
}
#shifts.table .row-hour {
border-top-color: #777777;
.shift-calendar .lane {
background: #f9f9f9;
min-width: 300px;
width: 300px;
flex-grow: 1;
}
#shifts.table td.shift {
height: 1px;
padding: 0;
.shift-calendar .lane .header {
background: #fff;
height: 30px;
padding: 5px;
}
#shifts.table td.shift .panel {
margin: 0px 0px 0px 5px;
.shift-calendar .lane .tick {
height: 30px;
border-top: 1px solid #f4f4f4;
}
.row-day {
border-top: 2px solid #777777;
.shift-calendar .lane .tick.hour {
border-top: 2px solid #dddddd;
font-size: 0.9em;
padding-left: 5px;
}
.row-header {
min-width: 90px;
.shift-calendar .lane .tick.day {
border-top: 2px solid #758499;
font-size: 0.9em;
padding-left: 5px;
}
.shift-calendar .lane.time {
min-width: 100px;
width: 100px;
flex-grow: 0;
}
.shift-calendar .shift {
margin: 0 5px 5px 0;
overflow: hidden;
}
.space-top {
margin-top: 15px;

49
public/css/theme3.css
View File

@ -6739,25 +6739,46 @@ body {
.footer a {
color: #777777;
}
#shifts.table td,
#shifts.table th {
background-color: #f0f0f0;
.shift-calendar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-itmes: stretch;
width: 100%;
}
#shifts.table .row-hour {
border-top-color: #777777;
.shift-calendar .lane {
background: #f9f9f9;
min-width: 300px;
width: 300px;
flex-grow: 1;
}
#shifts.table td.shift {
height: 1px;
padding: 0;
.shift-calendar .lane .header {
background: #fff;
height: 30px;
padding: 5px;
}
#shifts.table td.shift .panel {
margin: 0px 0px 0px 5px;
.shift-calendar .lane .tick {
height: 30px;
border-top: 1px solid #f4f4f4;
}
.row-day {
border-top: 2px solid #777777;
.shift-calendar .lane .tick.hour {
border-top: 2px solid #dddddd;
font-size: 0.9em;
padding-left: 5px;
}
.row-header {
min-width: 90px;
.shift-calendar .lane .tick.day {
border-top: 2px solid #f19224;
font-size: 0.9em;
padding-left: 5px;
}
.shift-calendar .lane.time {
min-width: 100px;
width: 100px;
flex-grow: 0;
}
.shift-calendar .shift {
margin: 0 5px 5px 0;
overflow: hidden;
}
.space-top {
margin-top: 15px;

51
shift_markup.html
View File

@ -4,52 +4,13 @@
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="public/css/theme3.css" />
<style>
.shift-calendar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-itmes: stretch;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-itmes: stretch;
width: 100%;
}
.shift-calendar .lane {
background: #f0f0f0;
flex-grow: 1;
min-width: 300px;
width: 300px;
flex-grow: 1;
}
.shift-calendar .lane.time {
flex-grow: 0;
min-width: 100px;
width: 100px;
flex-grow: 0;
}
.shift-calendar .lane .tick {
height: 20px;
border-top: 1px solid #ddd;
}
.shift-calendar .lane .tick.hour {
border-top: 1px solid #aaa;
}
.shift-calendar .shift {
margin-bottom: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="shift-calendar">
<div class="lane time">
<div class="tick hour">10:00</div>
<div class="header">Time</div>
<div class="tick day">2016-12-27 00:00</div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
@ -67,7 +28,10 @@
<div class="tick"></div>
</div>
<div class="lane">
<div class="tick hour"></div>
<div class="header">
<span class="glyphicon glyphicon-map-marker"></span> Bottle Sorting (Hall H)
</div>
<div class="tick day"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>
@ -99,7 +63,8 @@
<div class="tick"></div>
</div>
<div class="lane">
<div class="tick hour"></div>
<div class="header"></div>
<div class="tick day"></div>
<div class="tick"></div>
<div class="tick"></div>
<div class="tick"></div>

69
themes/base.less
View File

@ -10,32 +10,59 @@ body {
color: @text-muted;
}
#shifts.table {
td, th {
background-color: #f0f0f0;
}
.shift-calendar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-itmes: stretch;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-itmes: stretch;
width: 100%;
.row-hour {
border-top-color: @gray-light;
}
.lane {
background: @table-bg-accent;
flex-grow: 1;
min-width: 300px;
width: 300px;
flex-grow: 1;
td.shift {
height: 1px;
padding: 0;
.panel {
margin: 0px 0px 0px 5px;
overflow: hidden;
.header {
background: #fff;
height: 30px;
padding: 5px;
}
}
}
.row-day {
border-top: 2px solid @gray-light;
}
.tick {
height: 30px;
border-top: 1px solid darken(@table-bg-accent, 2%);
}
.row-header {
min-width: 90px;
.tick.hour {
border-top: 2px solid @table-border-color;
font-size: 0.9em;
padding-left: 5px;
}
.tick.day {
border-top: 2px solid @brand-primary;
font-size: 0.9em;
padding-left: 5px;
}
}
.lane.time {
flex-grow: 0;
min-width: 100px;
width: 100px;
flex-grow: 0;
}
.shift {
margin: 0 5px 5px 0;
overflow: hidden;
}
}
.space-top {