228 lines
11 KiB
PHP
228 lines
11 KiB
PHP
@extends('layouts.app')
|
||
@section('title', '常時表示インフォメーション')
|
||
|
||
@section('content')
|
||
<div class="container-fluid">
|
||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
<div class="col-lg-6">
|
||
<h3 class="m-0 text-dark">{{__('常時表示インフォメーション')}}</h3>
|
||
</div>
|
||
<nav aria-label="breadcrumb" class="mb-0" style="background: transparent;">
|
||
<ol class="breadcrumb px-2 py-2 mb-0" style="background: transparent;">
|
||
<li class="breadcrumb-item"><a href="{{ route('home') }}">ホーム</a></li>
|
||
<li class="breadcrumb-item active" aria-current="page">常時表示インフォメーション</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- 絞り込み -->
|
||
<div class="card mb-3">
|
||
<div class="card-body">
|
||
<h5 class="mb-3">絞り込み</h5>
|
||
<!-- 1行目：表示期間フィルター -->
|
||
<div class="row mb-2">
|
||
<div class="col-md-12 font-weight-bold mb-1">表示期間フィルター</div>
|
||
<div class="col-md-12">
|
||
<div class="row">
|
||
<div class="col-md-3 mb-2">
|
||
<a href="{{ route('information', ['period' => 'month']) }}"
|
||
class="btn btn-sm filter-btn {{ (request('period', $period ?? 'month') == 'month') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="period" data-value="month">
|
||
最新1ヵ月
|
||
</a>
|
||
</div>
|
||
<div class="col-md-3 mb-2"></div>
|
||
<div class="col-md-3 mb-2"></div>
|
||
<div class="col-md-3 mb-2">
|
||
<a href="{{ route('information', ['period' => 'all']) }}"
|
||
class="btn btn-sm filter-btn {{ (request('period', $period ?? 'month') == 'all') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="period" data-value="all">
|
||
全期間表示
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 2行目：種別フィルター -->
|
||
<div class="row mb-2">
|
||
<div class="col-md-12 font-weight-bold mb-1">種別フィルター</div>
|
||
<div class="col-md-12">
|
||
<div class="row">
|
||
<div class="col-md-3 mb-2">
|
||
<a href="#"
|
||
class="btn btn-sm filter-btn {{ (request('type', $type ?? 'all') == 'month') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="type" data-value="month">
|
||
最新1ヵ月
|
||
</a>
|
||
</div>
|
||
<div class="col-md-3 mb-2">
|
||
<a href="#"
|
||
class="btn btn-sm filter-btn {{ (request('type', $type ?? 'all') == 'hard') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="type" data-value="hard">
|
||
ハード異常
|
||
</a>
|
||
</div>
|
||
<div class="col-md-3 mb-2"></div>
|
||
<div class="col-md-3 mb-2">
|
||
<a href="#"
|
||
class="btn btn-sm filter-btn {{ (request('type', $type ?? 'all') == 'all') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="type" data-value="all">
|
||
全種別表示
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 3行目：ステータスフィルター -->
|
||
<div class="row mb-2">
|
||
<div class="col-md-12 font-weight-bold mb-1">ステータスフィルター</div>
|
||
<div class="col-md-12">
|
||
<div class="row">
|
||
<div class="col-md-3 mb-2">
|
||
<a href="#"
|
||
class="btn btn-sm filter-btn {{ (request('status', $status ?? 'untreated') == 'untreated') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="status" data-value="untreated">
|
||
未対応表示
|
||
</a>
|
||
</div>
|
||
<div class="col-md-3 mb-2">
|
||
<a href="#"
|
||
class="btn btn-sm filter-btn {{ (request('status', $status ?? '') == 'inprogress') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="status" data-value="inprogress">
|
||
着手を表示
|
||
</a>
|
||
</div>
|
||
<div class="col-md-3 mb-2">
|
||
<a href="#"
|
||
class="btn btn-sm filter-btn {{ (request('status', $status ?? '') == 'done') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="status" data-value="done">
|
||
対応完了を表示
|
||
</a>
|
||
</div>
|
||
<div class="col-md-3 mb-2">
|
||
<a href="#"
|
||
class="btn btn-sm filter-btn {{ (request('status', $status ?? '') == 'all') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="status" data-value="all">
|
||
全ステータス表示
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 4行目：ステータス変更 -->
|
||
<div class="row mb-2">
|
||
<div class="col-md-12 font-weight-bold mb-1">ステータス変更</div>
|
||
<div class="col-md-12">
|
||
<div class="row">
|
||
<div class="col-md-3 mb-2">
|
||
<a href="#"
|
||
class="btn btn-sm filter-btn {{ (request('change', $change ?? '') == 'inprogress') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="change" data-value="inprogress">
|
||
着手
|
||
</a>
|
||
</div>
|
||
<div class="col-md-3 mb-2">
|
||
<a href="#"
|
||
class="btn btn-sm filter-btn {{ (request('change', $change ?? '') == 'done') ? 'btn-warning' : 'btn-outline-secondary' }}"
|
||
style="width:120px;height:32px;"
|
||
data-group="change" data-value="done">
|
||
対応完了
|
||
</a>
|
||
</div>
|
||
<div class="col-md-3 mb-2"></div>
|
||
<div class="col-md-3 mb-2"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- データテーブル -->
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-hover table-sm">
|
||
<thead class="thead-light">
|
||
<tr>
|
||
<th style="width:30px;"><input type="checkbox"></th>
|
||
<th>キューID</th>
|
||
<th>キュー種別</th>
|
||
<th>利用者</th>
|
||
<th>定期契約ID</th>
|
||
<th>駐輪場</th>
|
||
<th>キューコメント</th>
|
||
<th>キューステータス</th>
|
||
<th>コメント</th>
|
||
<th>登録日時</th>
|
||
<th>更新日時</th>
|
||
<th>更新オペレータ</th>
|
||
<th>リンク</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach($jobs as $job)
|
||
<tr>
|
||
<td style="background-color:#faebd7;"><input type="checkbox"></td>
|
||
<td>{{ $job->job_log_id }}</td>
|
||
<td>{{ $job->process_name }}</td>
|
||
<td>{{ $job->job_name }}</td>
|
||
<td>{{ $job->device_id }}</td>
|
||
<td>{{ $job->park_id }}</td>
|
||
<td>{{ $job->status_comment }}</td>
|
||
<td>{{ $job->status }}</td>
|
||
<td>{{ $job->comment }}</td>
|
||
<td>{{ $job->created_at }}</td>
|
||
<td>{{ $job->updated_at }}</td>
|
||
<td>-</td>
|
||
<td><a href="#">詳細</a></td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
@push('scripts')
|
||
<script>
|
||
// ページロード時にデフォルト選択（初回アクセス時のみperiod, type, statusを自動選択）
|
||
window.addEventListener('DOMContentLoaded', function() {
|
||
// URLにperiod/type/statusパラメータがなければ初期選択
|
||
const url = new URL(window.location.href);
|
||
const hasPeriod = url.searchParams.has('period');
|
||
const hasType = url.searchParams.has('type');
|
||
const hasStatus = url.searchParams.has('status');
|
||
|
||
if (!hasPeriod) {
|
||
document.querySelector('.filter-btn[data-group="period"][data-value="month"]')?.classList.replace('btn-outline-secondary', 'btn-warning');
|
||
}
|
||
if (!hasType) {
|
||
document.querySelector('.filter-btn[data-group="type"][data-value="all"]')?.classList.replace('btn-outline-secondary', 'btn-warning');
|
||
}
|
||
if (!hasStatus) {
|
||
document.querySelector('.filter-btn[data-group="status"][data-value="untreated"]')?.classList.replace('btn-outline-secondary', 'btn-warning');
|
||
}
|
||
});
|
||
|
||
// フィルターボタンの選択状態切替
|
||
document.querySelectorAll('.filter-btn').forEach(function(btn) {
|
||
btn.addEventListener('click', function() {
|
||
var group = btn.getAttribute('data-group');
|
||
document.querySelectorAll('.filter-btn[data-group="' + group + '"]').forEach(function(b) {
|
||
b.classList.remove('btn-warning');
|
||
b.classList.add('btn-outline-secondary');
|
||
});
|
||
btn.classList.remove('btn-outline-secondary');
|
||
btn.classList.add('btn-warning');
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|
||
@endsection |