summaryrefslogtreecommitdiffhomepage
path: root/applications/luci-app-opkg/luasrc/view/opkg.htm
blob: 297891dbd83cee1c410768511e1a11be22161e20 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<%#
 Copyright 2018 Jo-Philipp Wich <jo@mein.io>
 Licensed to the public under the Apache License 2.0.
-%>

<%+header%>

<style type="text/css">
	.controls {
		display: flex;
		margin: .5em 0 1em 0;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.controls > * {
		padding: .25em;
		white-space: nowrap;
		flex: 1 1 33%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}

	.controls > *:first-child,
	.controls > * > label {
		flex-basis: 100%;
		min-width: 250px;
	}

	.controls > *:nth-child(2),
	.controls > *:nth-child(3) {
		flex-basis: 20%;
	}

	.controls > * > .btn {
		flex-basis: 20px;
		text-align: center;
	}

	.controls > * > * {
		flex-grow: 1;
		align-self: center;
	}

	.controls > div > input {
		width: auto;
	}

	.td.version,
	.td.size {
		white-space: nowrap;
	}

	ul.deps, ul.deps ul, ul.errors {
		margin-left: 1em;
	}

	ul.deps li, ul.errors li {
		list-style: none;
	}

	ul.deps li:before {
		content: "↳";
		display: inline-block;
		width: 1em;
		margin-left: -1em;
	}

	ul.deps li > span {
		white-space: nowrap;
	}

	ul.errors li {
		color: #c44;
		font-size: 90%;
		font-weight: bold;
		padding-left: 1.5em;
	}

	ul.errors li:before {
		content: "⚠";
		display: inline-block;
		width: 1.5em;
		margin-left: -1.5em;
	}
</style>

<h2><%:Software%></h2>

<div class="controls">
	<div>
		<label><%:Free space%>:</label>
		<div class="cbi-progressbar" title="<%:unknown%>">
			<div>&#160;</div>
		</div>
	</div>

	<div>
		<label><%:Filter%>:</label>
		<input type="text" name="filter" placeholder="<%:Type to filter…%>"<%=attr("value", luci.http.formvalue("query") or "")%> /><!--
		--><button class="btn cbi-button" onclick="handleReset(event)"><%:Clear%></button>
	</div>

	<div>
		<label><%:Download and install package%>:</label>
		<input type="text" name="install" placeholder="<%:Package name or URL…%>" onkeydown="if (event.keyCode === 13) handleManualInstall(event)" /><!--
		--><button class="btn cbi-button cbi-button-action" onclick="handleManualInstall(event)"><%:OK%></button>
	</div>

	<div>
		<label><%:Actions%>:</label>
		<button class="btn cbi-button-positive" data-command="update" onclick="handleOpkg(event)"><%:Update lists…%></button>
		&#160;
		<button class="btn cbi-button-action" onclick="handleUpload(event)"><%:Upload Package…%></button>
		&#160;
		<button class="btn cbi-button-neutral" onclick="handleConfig(event)"><%:Configure opkg…%></button>
	</div>
</div>

<ul class="cbi-tabmenu mode">
	<li data-mode="available" class="available cbi-tab"><a href="#"><%:Available%></a></li>
	<li data-mode="installed" class="installed cbi-tab-disabled"><a href="#"><%:Installed%></a></li>
	<li data-mode="updates" class="installed cbi-tab-disabled"><a href="#"><%:Updates%></a></li>
</ul>

<div class="controls" style="display:none">
	<div id="pager" class="center">
		<button class="btn cbi-button-neutral prev" aria-label="<%:Previous page%>">«</button>
		<div class="text">dummy</div>
		<button class="btn cbi-button-neutral next" aria-label="<%:Next page%>">»</button>
	</div>
</div>

<div class="table" id="packages">
	<div class="tr cbi-section-table-titles">
		<div class="th col-2 left"><%:Package name%></div>
		<div class="th col-2 left version"><%:Version%></div>
		<div class="th col-1 center size"><%:Size (.ipk)%></div>
		<div class="th col-10 left"><%:Description%></div>
		<div class="th right">&#160;</div>
	</div>
</div>

<script type="text/javascript" src="<%=resource%>/view/opkg.js"></script>

<%+footer%>