Smopp_v2/user_activity.php

<?php /** Created by Anton on 05.03.2020. */
$positions = \app\models\entity\Jobtypes::find()
    ->where(['not', ['name' => null]])
    ->andWhere(['company' => $companyID])
    ->all();
?>
<form onsubmit="return false;">
    <div class="activity">
        <input type="text" id="datepicker" value="Выберите дату">
        <select name="shift" id="shift">
            <option value="0">Дневная</option>
            <option value="1">Ночная</option>
        </select>
        <input type="hidden" id="company" value="<?= $companyID ?>">
        <button id="draw">Отрисовать график</button>
        <div class="loader"></div>
    </div>
    <div class="positions">
        <select name="position[]" id="positions" multiple>
            <?php foreach ($positions as $position): ?>
                <option value="<?= $position->id ?>"><?= $position->name ?></option>
            <?php endforeach; ?>
        </select>
        <div class="buttons">
            <button id="draw-positions">Отрисовать график по должностям</button>
            <button class="print" onclick="print()">В печать</button>
        </div>
    </div>
</form>
<div id="content"></div>
<script type="application/javascript">
    $(document).ready(function() {
        //Инициализация datapicker
        $('#datepicker').datetimepicker({
            format: 'Y-m-d',
            lang: 'ru',
            timepicker: false
        });

        //Ajax-запрос и отрисовка при клике
        $('#draw').on('click', function() {
            $('.loader').css('display', 'inline-block');
            $.ajax({
                type: 'GET',
                url: 'get_user_activity.php',
                data: {
                    date: $('#datepicker').val(),
                    shift: $('#shift').val(),
                    company: $('#company').val()
                },
                success: function (data) {
                    $('#content').html(data);
                    $('.loader').css('display', 'none');
                }
            });
        });

        //Отрисовка графика по должностям
        $('#draw-positions').on('click', function() {
            $('.loader').css('display', 'inline-block');
            $.ajax({
                type: 'GET',
                url: 'get_user_activity_by_positions.php',
                data: {
                    date: $('#datepicker').val(),
                    shift: $('#shift').val(),
                    company: $('#company').val(),
                    positions: $('#positions').val(),
                },
                success: function (data) {
                    $('#content').html(data);
                    $('.loader').css('display', 'none');
                }
            });
        });
    });
</script>
<link rel="stylesheet" href="css/preloader.css">
<style type="text/css">
    .main_content {
        overflow: unset;
    }
    form {
        display: flex;
    }
    .activity, .positions {
        border: 1px solid #aaa;
        border-radius: 5px;
        padding: 10px;
        margin: 5px;
        position: relative;
    }
    .activity input, .activity select, .activity button {
        margin: 5px;
    }
    .activity button {
        display: block;
        margin: 7px auto 0;
    }
    .loader {
        left: 137px;
        bottom: 42px;
        margin: 0;
    }
    #positions {
        float: left;
        margin: 0;
    }
    .positions button {
        display: block;
    }
    .buttons {
        display: inline-block;
    }
    #draw-positions {
        margin-left: 10px;
    }
    .print {
        margin: 0 auto;
    }
    @-moz-document url-prefix() {
        .print {
            left: 160px;
        }
    }
    @media print {
        .wrapper {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            grid-template-areas: "content";
        }
        .left, .top, .activity, .positions {
            display: none;
        }
        .main_content {
            top: 0;
            left: 30px;
            padding-top: 0;
        }
    }
</style>