app/pages/downloads.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>ダウンロード</title>
   9     <link href="flast://style.css" type="text/css" rel="stylesheet" />
  10     <script>
  11         if (getDarkTheme()) {
  12             document.write(
  13                 `<link href="https://stackpath.bootstrapcdn.com/bootswatch/3.4.1/darkly/bootstrap.min.css" type="text/css" rel="stylesheet" integrity="sha384-pKJMCXwCXq3HwRBt27cwwSmc0/DAo2BjRxGd7nEESEStk++p6LffHmhX9oqzVDUk" crossorigin="anonymous" />`
  14             );
  15         } else {
  16             document.write(
  17                 `<link href="https://stackpath.bootstrapcdn.com/bootswatch/3.4.1/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" integrity="sha384-bfWZLPtvQKHg/nZNhaO/ZW4Ba8ISud5CtEjnCTU6OR1yOq5zrrF+JP2o7om6rzLf" crossorigin="anonymous" />`
  18             );
  19         }
  20     </script>
  21     <link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css" type="text/css" rel="stylesheet" />
  22     <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Sans+JP|Roboto" type="text/css"
  23         rel="stylesheet" />
  24     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" type="text/css" rel="stylesheet" />
  25     <link rel="icon" sizes="any" href="flast://public.svg" type="image/svg+xml">
  26     <link rel="mask-icon" href="flast://public.svg" color="black">
  27 </head>
  28
  29 <body style="padding-top: 75px;">
  30     <nav class="navbar navbar-default navbar-fixed-top">
  31         <div class="container-fluid">
  32             <div class="navbar-header">
  33                 <a class="navbar-brand">
  34                     <script>document.write(getAppName());</script></a>
  35                 <ul class="nav navbar-nav navbar-right">
  36                     <li><a href="#" data-toggle="modal" data-target="#clearModal">履歴をクリア</a></li>
  37                 </ul>
  38             </div>
  39         </div>
  40     </nav>
  41     <div class="container-fluid">
  42         <div class="row">
  43             <div class="col-md-3">
  44                 <ul class="nav nav-pills nav-stacked">
  45                     <li>
  46                         <a href="flast://home/">
  47                             <i class="material-icons" style="vertical-align: text-bottom; font-size: 16px;">home</i>
  48                             ホーム
  49                         </a>
  50                     </li>
  51                     <hr>
  52                     <li>
  53                         <a href="flast://history/">
  54                             <i class="material-icons" style="vertical-align: text-bottom; font-size: 16px;">history</i>
  55                             履歴
  56                         </a>
  57                     </li>
  58                     <li>
  59                         <a href="flast://downloads/">
  60                             <i class="material-icons" style="vertical-align: text-bottom; font-size: 16px;">get_app</i>
  61                             ダウンロード
  62                         </a>
  63                     </li>
  64                     <li>
  65                         <a href="flast://bookmarks/">
  66                             <i class="material-icons"
  67                                 style="vertical-align: text-bottom; font-size: 16px;">bookmarks</i> ブックマーク
  68                         </a>
  69                     </li>
  70                     <li>
  71                         <a href="flast://store/">
  72                             <i class="material-icons" style="vertical-align: text-bottom; font-size: 16px;">shop</i>
  73                             WebApp Store
  74                         </a>
  75                     </li>
  76                     <li class="dropdown">
  77                         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  78                             <i class="material-icons" style="vertical-align: text-bottom; font-size: 16px;">settings</i>
  79                             設定
  80                         </a>
  81                         <ul class="dropdown-menu" style="width: 100%;">
  82                             <li><a href="flast://settings/">ホーム</a></li>
  83                             <li class="divider"></li>
  84                             <li><a href="flast://settings/#design">デザイン</a></li>
  85                             <li><a href="flast://settings/#engine">検索エンジン</a></li>
  86                             <li><a href="flast://settings/#adblock">広告ブロック</a></li>
  87                             <li><a href="flast://settings/#window">ウィンドウ</a></li>
  88                             <li class="divider"></li>
  89                             <li><a href="flast://settings/#about">
  90                                     <script>document.write(getAppName());</script> について</a></li>
  91                         </ul>
  92                     </li>
  93                     <li>
  94                         <a href="flast://help/">
  95                             <i class="material-icons"
  96                                 style="vertical-align: text-bottom; font-size: 16px;">help_outline</i> ヘルプ
  97                         </a>
  98                     </li>
  99                 </ul>
 100             </div>
 101             <div class="col-md-9" style="padding-right: 0px;">
 102                 <div style="padding: 15px; overflow-y: auto; height: calc(100vh - 75px);">
 103                     <h3>ダウンロード</h3>
 104                     <hr>
 105                     <div class="table-responsive">
 106                         <table class="table table-striped table-hover table-style" id="downloadsList">
 107                             <thead>
 108                                 <tr>
 109                                     <th class="table-title" style="width: 200px;">タイトル</th>
 110                                     <th class="table-url" style="width: calc(100% - 450px);">URL</th>
 111                                     <th style="width: 100px; white-space: nowrap;">情報</th>
 112                                     <th style="width: 150px; white-space: nowrap;">開始日時</th>
 113                                 </tr>
 114                             </thead>
 115                             <tbody>
 116                             </tbody>
 117                         </table>
 118                     </div>
 119                 </div>
 120             </div>
 121         </div>
 122     </div>
 123     <div class="modal fade" id="clearModal" tabindex="-1">
 124         <div class="modal-dialog" style="z-index: 9999;">
 125             <div class="modal-content">
 126                 <div class="modal-header">
 127                     <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
 128                     <h4 class="modal-title">ダウンロード履歴をクリア</h4>
 129                 </div>
 130                 <div class="modal-body">
 131                     これまでのダウンロード履歴をクリアします。<br>
 132                     続行を押すとダウンロード履歴がクリアされます。
 133                 </div>
 134                 <div class="modal-footer">
 135                     <button type="button" class="btn btn-link" data-dismiss="modal">閉じる</button>
 136                     <button type="button" class="btn btn-primary" id="clearDownloads">続行</button>
 137                 </div>
 138             </div>
 139         </div>
 140     </div>
 141     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 142     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 143     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 144     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
 145     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/ja.js"></script>
 146     <script type="text/javascript">
 147         $(document).ready(function () {
 148             $(`a[href="${window.location.href}"]`).parent().addClass('active');
 149
 150             $('#clearDownloads').click(function () {
 151                 clearDownloads(true);
 152                 location.reload();
 153             });
 154
 155             getDownloads().then((data) => {
 156                 data.forEach((item, i) => {
 157                     $('#downloadsList').append(
 158                         $('<tr></tr>')
 159                             .append($('<td class="table-title"></td>').append($(`<span title="${item.path}"></span>`).text(item.name)))
 160                             .append($('<td class="table-url"></td>').text(item.url))
 161                             .append($('<td></td>').text(item.status))
 162                             .append($('<td></td>').text(moment(item.createdAt).format('YYYY/MM/DD HH:mm')))
 163                     );
 164                 });
 165             });
 166         });
 167     </script>
 168 </body>
 169
 170 </html>