pages/history.html

   1 <!DOCTYPE html>
   2 <html lang="ja">
   3
   4 <head>
   5     <meta charset="UTF-8">
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
   8     <title>履歴 | MyBrowser</title>
   9     <link href="my://style.css" rel="stylesheet">
  10     <link href="https://stackpath.bootstrapcdn.com/bootswatch/3.4.1/paper/bootstrap.min.css" rel="stylesheet"
  11         integrity="sha384-czdUt3c5InCk6AjJWW7zMMS5xcvRAyC6tWoWfXuRYfX6Vvv4Es8m8eRjzMChD493" crossorigin="anonymous">
  12     <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Sans+JP|Roboto" rel="stylesheet">
  13     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  14     <link rel="icon" sizes="any" href="my://public.svg" type="image/svg+xml">
  15     <link rel="mask-icon" href="my://public.svg" color="black">
  16     <style>
  17         .table-style {
  18             table-layout: fixed;
  19             white-space: nowrap;
  20         }
  21
  22         .table-style th.table-title,
  23         .table-style td.table-title {
  24             width: 400px;
  25             overflow: hidden;
  26             white-space: nowrap;
  27             text-overflow: ellipsis;
  28         }
  29
  30         .table-style th.table-url,
  31         .table-style td.table-url {
  32             width: calc(100% - 600px);
  33             overflow: hidden;
  34             white-space: nowrap;
  35             text-overflow: ellipsis;
  36         }
  37     </style>
  38 </head>
  39
  40 <body>
  41     <header class="topbar">
  42         <div class="nav-toggle">
  43             <i class="material-icons">
  44                 menu
  45             </i>
  46         </div>
  47         <h5 class="title">履歴</h5>
  48         <button type="button" class="btn btn-link" style="margin-left: auto;" data-toggle="modal"
  49             data-target="#clearModal">
  50             履歴のクリア
  51         </button>
  52     </header>
  53     <div class="nav">
  54     </div>
  55     <div class="container">
  56         <div class="panel panel-default" id="design">
  57             <div class="panel-heading">履歴</div>
  58             <div class="panel-body">
  59                 <div class="container-fluid">
  60                     <div class="row">
  61                         <div class="col-md-12">
  62                             <div class="table-responsive">
  63                                 <table class="table table-striped table-hover table-style" id="themeList">
  64                                     <thead>
  65                                         <tr>
  66                                             <th class="table-title">タイトル</th>
  67                                             <th class="table-url">URL</th>
  68                                             <th style="width: 200px; white-space: nowrap;">閲覧日時</th>
  69                                         </tr>
  70                                     </thead>
  71                                     <tbody>
  72                                     </tbody>
  73                                 </table>
  74                             </div>
  75                         </div>
  76                     </div>
  77                 </div>
  78             </div>
  79         </div>
  80     </div>
  81     <div class="modal fade" id="clearModal" tabindex="-1">
  82         <div class="modal-dialog" style="z-index: 9999;">
  83             <div class="modal-content">
  84                 <div class="modal-header">
  85                     <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
  86                     <h4 class="modal-title">履歴のクリア</h4>
  87                 </div>
  88                 <div class="modal-body">
  89                     これまでの閲覧履歴をクリアします。
  90                     続行を押すと閲覧履歴がクリアされます。
  91                 </div>
  92                 <div class="modal-footer">
  93                     <button type="button" class="btn btn-link" data-dismiss="modal">閉じる</button>
  94                     <button type="button" class="btn btn-primary" id="clearHistory">続行</button>
  95                 </div>
  96             </div>
  97         </div>
  98     </div>
  99     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 100     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
 101     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js"></script>
 102     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 103     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 104     <script type="text/javascript">
 105         $(document).ready(function () {
 106             $('.nav a[href="' + window.location.pathname + '"]').parent().addClass('active');
 107
 108             $('#clearHistory').click(function () {
 109                 clearHistory(true);
 110                 location.reload();
 111             });
 112
 113             getHistorys().then((data) => {
 114                 data.forEach(function (item, i) {
 115                     $('#themeList').append($('<tr></tr>').append($('<td class="table-title"></td>').html(`<a href="${item.url}">${item.title}</a>`)).append($('<td class="table-url"></td>').text(item.url)).append($('<td></td>').text(moment(item.createdAt).format('YYYY/MM/DD HH:mm'))));
 116                 });
 117             });
 118         });
 119     </script>
 120 </body>
 121
 122 </html>