package/luci/applications/luci-app-opkg/luasrc/view/opkg.htm

   1 <%#
   2  Copyright 2018 Jo-Philipp Wich <jo@mein.io>
   3  Licensed to the public under the Apache License 2.0.
   4 -%>
   5
   6 <%+header%>
   7
   8 <style type="text/css">
   9         .controls {
  10                 display: flex;
  11                 margin: .5em 0 1em 0;
  12                 flex-wrap: wrap;
  13                 justify-content: space-around;
  14         }
  15
  16         .controls > * {
  17                 padding: .25em;
  18                 white-space: nowrap;
  19                 flex: 1 1 33%;
  20                 box-sizing: border-box;
  21                 display: flex;
  22                 flex-wrap: wrap;
  23         }
  24
  25         .controls > *:first-child,
  26         .controls > * > label {
  27                 flex-basis: 100%;
  28                 min-width: 250px;
  29         }
  30
  31         .controls > * > .btn {
  32                 flex-basis: 20px;
  33                 text-align: center;
  34         }
  35
  36         .controls > * > * {
  37                 flex-grow: 1;
  38                 align-self: center;
  39         }
  40
  41         .controls > div > input {
  42                 width: auto;
  43         }
  44
  45         .td.version,
  46         .td.size {
  47                 white-space: nowrap;
  48         }
  49
  50         ul.deps, ul.deps ul, ul.errors {
  51                 margin-left: 1em;
  52         }
  53
  54         ul.deps li, ul.errors li {
  55                 list-style: none;
  56         }
  57
  58         ul.deps li:before {
  59                 content: "↳";
  60                 display: inline-block;
  61                 width: 1em;
  62                 margin-left: -1em;
  63         }
  64
  65         ul.deps li > span {
  66                 white-space: nowrap;
  67         }
  68
  69         ul.errors li {
  70                 color: #c44;
  71                 font-size: 90%;
  72                 font-weight: bold;
  73                 padding-left: 1.5em;
  74         }
  75
  76         ul.errors li:before {
  77                 content: "⚠";
  78                 display: inline-block;
  79                 width: 1.5em;
  80                 margin-left: -1.5em;
  81         }
  82 </style>
  83
  84 <h2><%:Software%></h2>
  85
  86 <div class="controls">
  87         <div>
  88                 <label><%:Free space%>:</label>
  89                 <div class="cbi-progressbar" title="<%:unknown%>">
  90                         <div>&#160;</div>
  91                 </div>
  92         </div>
  93
  94         <div>
  95                 <label><%:Filter%>:</label>
  96                 <input type="text" name="filter" placeholder="<%:Type to filter…%>"<%=attr("value", luci.http.formvalue("query") or "")%> /><!--
  97                 --><button class="btn cbi-button" onclick="handleReset(event)"><%:Clear%></button>
  98         </div>
  99
 100         <div>
 101                 <label><%:Download and install package%>:</label>
 102                 <input type="text" name="install" placeholder="<%:Package name or URL…%>" onkeydown="if (event.keyCode === 13) handleManualInstall(event)" /><!--
 103                 --><button class="btn cbi-button cbi-button-action" onclick="handleManualInstall(event)"><%:OK%></button>
 104         </div>
 105
 106         <div>
 107                 <label><%:Actions%>:</label>
 108                 <button class="btn cbi-button-positive" data-command="update" onclick="handleOpkg(event)"><%:Update lists…%></button>
 109                 &#160;
 110                 <button class="btn cbi-button-neutral" onclick="handleConfig(event)"><%:Configure opkg…%></button>
 111         </div>
 112 </div>
 113
 114 <ul class="cbi-tabmenu mode">
 115         <li data-mode="available" class="available cbi-tab"><a href="#"><%:Available%></a></li>
 116         <li data-mode="installed" class="installed cbi-tab-disabled"><a href="#"><%:Installed%></a></li>
 117         <li data-mode="updates" class="installed cbi-tab-disabled"><a href="#"><%:Updates%></a></li>
 118 </ul>
 119
 120 <div class="controls" style="display:none">
 121         <div id="pager" class="center">
 122                 <button class="btn cbi-button-neutral prev" aria-label="<%:Previous page%>">«</button>
 123                 <div class="text">dummy</div>
 124                 <button class="btn cbi-button-neutral next" aria-label="<%:Next page%>">»</button>
 125         </div>
 126 </div>
 127
 128 <div class="table" id="packages">
 129         <div class="tr cbi-section-table-titles">
 130                 <div class="th col-2 left"><%:Package name%></div>
 131                 <div class="th col-2 left version"><%:Version%></div>
 132                 <div class="th col-1 center size"><%:Size (.ipk)%></div>
 133                 <div class="th col-10 left"><%:Description%></div>
 134                 <div class="th right">&#160;</div>
 135         </div>
 136 </div>
 137
 138 <script type="text/javascript" src="<%=resource%>/view/opkg.js"></script>
 139
 140 <%+footer%>