<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <title>ピックアップ</title> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <!-- favicons --> <link href="../common/img/favicon.ico" rel="icon"> <link href="../common/img/apple-touch-icon.png" rel="apple-touch-icon"> <!-- main css --> <link rel="stylesheet" type="text/css" href="../common/css/newdash/app.css"> <link rel="stylesheet" type="text/css" href="../common/css/newdash/header.css"> <link rel="stylesheet" type="text/css" href="../common/css/newdash/style.css"> <!-- vender css --> <link rel="stylesheet" type="text/css" href="../common/css/newdash/fontawesome_relative_path.css"> <!-- main js --> <script type="text/javascript" src="../js/pickup/pickup.js"></script> </head> <body onload="PICKUP.init();"> <!-- header --> <?php include('common/header.html');?> <!-- pickup --> <main> <div class="container"> <!-- breadcrumb --> <nav aria-label="breadcrumb"> <ol class="breadcrumb px-0 mb-0"> <li class="breadcrumb-item"><a href="dashboard.html" class="text-decoration-none text-underline">ダッシュボード</a></li> <li class="breadcrumb-item active" aria-current="page"><span>ピックアップ</span></li> </ol> </nav> <!-- title --> <h1 class="fs-14 font-weight-bold pt-sm-4 pt-2 pb-3 mb-0">ピックアップ</h1> <!-- tab --> <ul class="nav nav-tabs line" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-expanded="true"> <div class="text-center">新規追加</div> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2"> <div class="text-center">工程作業</div> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3"> <div class="text-center">警告を含む報告</div> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab4" role="tab" aria-controls="tab4"> <div class="text-center">0件表示パターン</div> </a> </li> </ul> <!-- tab content--> <!-- new --> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="1-tab"> <!-- view menu --> <nav aria-label="view" class="view-menu mt-2"> <div class="d-flex justify-content-between align-items-center"> <div class="fs-9">20<span>件表示</span></div> <div class="view"> <a href="#" class="text-decoration-none view-btn view-list-btn"> <img src="../common/img/icon_view_list.svg" alt="リスト表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="リスト表示"> </a> <a href="#" class="text-decoration-none view-btn view-block-btn active"> <img src="../common/img/icon_view_block.svg" alt="グリッド表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="グリッド表示"> </a> </div> </div> </nav> <!-- task list --> <ul class="p-0 mt-3 card-list task-list view-content view-block"> <li class="card mb-2"> <a href="#" class="d-block px-3 py-3 text-decoration-none text-dark"> <div class="fs-12 text-truncate">作業名が入ります。</div> </a> </li> <li class="card mb-2"> <a href="#" class="d-block px-3 py-3 text-decoration-none text-dark"> <div class="fs-12 text-truncate">作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。</div> </a> </li> </ul> </div> <!-- proccess --> <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="2-tab"> <!-- view menu --> <nav aria-label="view" class="view-menu mt-2"> <div class="d-flex justify-content-between align-items-center"> <div class="fs-9">100<span>件表示</span></div> <div class="view"> <a href="#" class="text-decoration-none view-btn view-list-btn"> <img src="../common/img/icon_view_list.svg" alt="リスト表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="リスト表示"> </a> <a href="#" class="text-decoration-none view-btn view-block-btn active"> <img src="../common/img/icon_view_block.svg" alt="グリッド表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="グリッド表示"> </a> </div> </div> </nav> <!-- task list --> <ul class="p-0 mt-3 card-list task-list view-content view-block"> <li class="card mb-2"> <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative"> <div class="position-absolute translate-middle top-50 left-0 ml-3"> <div class="type-icon"> <span class="proccess"></span> </div> </div> <div class="pl-5 h-100 d-flex align-items-center"> <div class="w-100"> <div class="fs-8 bg-dark10 px-2 py-1 mr-2 rounded mb-1 w-fit-content text-truncate mw-100">工程名が入ります。</div> <div class="fs-12 text-truncate">作業名が入ります。</div> <div class="d-flex justify-content-between align-items-center"> <div class="fs-10 text-truncate">報告名が入ります。</div> <div class="fs-8 text-secondary text-truncate">code-9999</div> </div> </div> </div> </a> </li> <li class="card mb-2"> <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative"> <div class="position-absolute translate-middle top-50 left-0 ml-3"> <div class="type-icon"> <span class="proccess"></span> </div> </div> <div class="pl-5 h-100 d-flex align-items-center"> <div class="w-100"> <div class="fs-8 bg-dark10 px-2 py-1 mr-2 rounded mb-1 w-fit-content text-truncate mw-100">工程名が入ります。工程名が入ります。工程名が入ります。工程名が入ります。工程名が入ります。</div> <div class="fs-12 text-truncate">作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。</div> <div class="d-flex justify-content-between align-items-center"> <div class="fs-10 text-truncate">報告名が入ります。報告名が入ります。報告名が入ります。報告名が入ります。報告名が入ります。報告名が入ります。</div> <div class="fs-8 text-secondary text-truncate">code-9999</div> </div> </div> </div> </a> </li> </ul> </div> <!-- alert --> <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="3-tab"> <!-- view menu --> <nav aria-label="view" class="view-menu mt-2"> <div class="d-flex justify-content-between align-items-center"> <div class="fs-9">100<span>件表示</span></div> <div class="view"> <a href="#" class="text-decoration-none view-btn view-list-btn"> <img src="../common/img/icon_view_list.svg" alt="リスト表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="リスト表示"> </a> <a href="#" class="text-decoration-none view-btn view-block-btn active"> <img src="../common/img/icon_view_block.svg" alt="グリッド表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="グリッド表示"> </a> </div> </div> </nav> <!-- task list --> <ul class="p-0 mt-3 card-list task-list view-content view-block"> <li class="card mb-2"> <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative"> <div class="position-absolute translate-middle top-50 left-0 ml-3"> <div class="type-icon"> <span class="report"></span> </div> </div> <div class="pl-5 h-100 d-flex align-items-center"> <div class="w-100"> <div class="fs-12 text-truncate">作業名が入ります。</div> <div class="d-flex justify-content-between align-items-center"> <div class="fs-10 text-truncate">報告名が入ります。</div> <div class="fs-8 text-secondary text-truncate">code-9999</div> </div> </div> </div> </a> </li> <li class="card mb-2"> <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative"> <div class="position-absolute translate-middle top-50 left-0 ml-3"> <div class="type-icon"> <span class="inspection"></span> </div> </div> <div class="pl-5 h-100 d-flex align-items-center"> <div class="w-100"> <div class="fs-12 text-truncate">作業名が入ります。</div> <div class="d-flex justify-content-between align-items-center"> <div class="fs-10 text-truncate">報告名が入ります。</div> <div class="fs-8 text-secondary text-truncate">10/20~10/23</div> </div> </div> </div> </a> </li> <li class="card mb-2"> <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative"> <div class="position-absolute translate-middle top-50 left-0 ml-3"> <div class="type-icon"> <span class="questionary"></span> </div> </div> <div class="pl-5 h-100 d-flex align-items-center"> <div class="w-100"> <div class="fs-8 bg-dark10 px-2 py-1 mr-2 rounded mb-1 w-fit-content text-truncate mw-100">報告</div> <div class="fs-12 text-truncate">作業名が入ります。</div> <div class="d-flex justify-content-between align-items-center"> <div class="fs-10 text-truncate">報告名が入ります。</div> <div class="fs-8 text-secondary text-truncate">code-9999</div> </div> </div> </div> </a> </li> <li class="card mb-2"> <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative"> <div class="position-absolute translate-middle top-50 left-0 ml-3"> <div class="type-icon"> <span class="questionary"></span> </div> </div> <div class="pl-5 h-100 d-flex align-items-center"> <div class="w-100"> <div class="fs-8 bg-dark10 px-2 py-1 mr-2 rounded mb-1 w-fit-content text-truncate mw-100">回答</div> <div class="fs-12 text-truncate">作業名が入ります。</div> <div class="d-flex justify-content-between align-items-center"> <div class="fs-10 text-truncate">報告名が入ります。</div> <div class="fs-8 text-secondary text-truncate">code-9999</div> </div> </div> </div> </a> </li> </ul> </div> <!-- 0 match --> <div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="4-tab"> <ul class="p-0 mt-3 card-list"> <li class="card mb-2 not-found"> <div class="text-dark mb-1 px-3 py-5 text-center m-auto"> <img src="../common/img/icon_not_found.svg" alt="該当する作業がありません。" class="not-found-img mb-2"> <div class="fs-9 text-secondary font-weight-bold">該当する作業がありません。</div> </div> </li> </ul> </div> </div> </div> </main> <!-- confirm --> <?php include('common/confirm-modal.html');?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script type="text/javascript" src="../common/js/app.js"></script> <script type="text/javascript" src="../common/js/common.js"></script> </body> </html>