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