web interface: mobile friendly
This commit is contained in:
SG
parent
32327166da
commit
a905cdefa0
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
let server = "";
|
||||
if (development_mode) {
|
||||
server = "http://172.30.1.84";
|
||||
server = "http://172.30.1.223";
|
||||
}
|
||||
|
||||
async function api_post(api, data) {
|
||||
|
|
@ -140,26 +140,34 @@
|
|||
<div class="grid">
|
||||
{#await api_get(server + "/api/v1/wifi/get_credentials")}
|
||||
<div class="value-name">Mode:</div>
|
||||
<div><Spinner /></div>
|
||||
<div class="value-name">STA</div>
|
||||
<div>(join another network)</div>
|
||||
<div class="value"><Spinner /></div>
|
||||
|
||||
<div class="value-name splitter">STA</div>
|
||||
<div class="value mobile-hidden">(join another network)</div>
|
||||
|
||||
<div class="value-name">SSID:</div>
|
||||
<div><Spinner /></div>
|
||||
<div class="value"><Spinner /></div>
|
||||
|
||||
<div class="value-name">Pass:</div>
|
||||
<div><Spinner /></div>
|
||||
<div class="value-name">AP</div>
|
||||
<div>(own access point)</div>
|
||||
<div class="value"><Spinner /></div>
|
||||
|
||||
<div class="value-name splitter">AP</div>
|
||||
<div class="value mobile-hidden">(own access point)</div>
|
||||
|
||||
<div class="value-name">SSID:</div>
|
||||
<div><Spinner /></div>
|
||||
<div class="value"><Spinner /></div>
|
||||
|
||||
<div class="value-name">Pass:</div>
|
||||
<div><Spinner /></div>
|
||||
<div>class="value"<Spinner /></div>
|
||||
|
||||
<div class="value-name">Hostname:</div>
|
||||
<div><Spinner /></div>
|
||||
<div class="value"><Spinner /></div>
|
||||
|
||||
<div class="value-name">USB mode:</div>
|
||||
<div><Spinner /></div>
|
||||
<div class="value"><Spinner /></div>
|
||||
{:then json}
|
||||
<div class="value-name">Mode:</div>
|
||||
<div>
|
||||
<div class="value">
|
||||
<Select
|
||||
bind:this={mode_select}
|
||||
items={[
|
||||
|
|
@ -171,10 +179,11 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="value-name">STA</div>
|
||||
<div>(join another network)</div>
|
||||
<div class="value-name splitter">STA</div>
|
||||
<div class="value mobile-hidden">(join another network)</div>
|
||||
|
||||
<div class="value-name">SSID:</div>
|
||||
<div>
|
||||
<div class="value">
|
||||
<Input
|
||||
value={json.sta_ssid}
|
||||
bind:this={sta_ssid_input}
|
||||
|
|
@ -182,29 +191,30 @@
|
|||
</div>
|
||||
|
||||
<div class="value-name">Pass:</div>
|
||||
<div>
|
||||
<div class="value">
|
||||
<Input value={json.sta_pass} bind:this={sta_pass_input} />
|
||||
</div>
|
||||
|
||||
<div class="value-name">AP</div>
|
||||
<div>(own access point)</div>
|
||||
<div class="value-name splitter">AP</div>
|
||||
<div class="value mobile-hidden">(own access point)</div>
|
||||
|
||||
<div class="value-name">SSID:</div>
|
||||
<div>
|
||||
<div class="value">
|
||||
<Input value={json.ap_ssid} bind:this={ap_ssid_input} />
|
||||
</div>
|
||||
|
||||
<div class="value-name">Pass:</div>
|
||||
<div>
|
||||
<div class="value">
|
||||
<Input value={json.ap_pass} bind:this={ap_pass_input} />
|
||||
</div>
|
||||
|
||||
<div class="value-name">Hostname:</div>
|
||||
<div>
|
||||
<div class="value">
|
||||
<Input value={json.hostname} bind:this={hostname_input} />
|
||||
</div>
|
||||
|
||||
<div class="value-name">USB mode:</div>
|
||||
<div>
|
||||
<div class="value">
|
||||
<Select
|
||||
bind:this={usb_mode_select}
|
||||
items={[
|
||||
|
|
@ -230,24 +240,27 @@
|
|||
<div class="grid">
|
||||
{#await api_get(server + "/api/v1/system/info")}
|
||||
<div class="value-name">IP:</div>
|
||||
<div><Spinner /></div>
|
||||
<div class="value"><Spinner /></div>
|
||||
{:then json}
|
||||
<div class="value-name">IP:</div>
|
||||
<div>{print_ip(json.ip)}</div>
|
||||
<div class="value">{print_ip(json.ip)}</div>
|
||||
<div class="value-name">Mac:</div>
|
||||
<div>{print_mac(json.mac)}</div>
|
||||
<div class="value">{print_mac(json.mac)}</div>
|
||||
<div class="value-name">IDF ver:</div>
|
||||
<div>{json.idf_version}</div>
|
||||
<div class="value">{json.idf_version}</div>
|
||||
<div class="value-name">Model:</div>
|
||||
<div>{json.model}.{json.revision} {json.cores}-core</div>
|
||||
<div class="value">
|
||||
{json.model}.{json.revision}
|
||||
{json.cores}-core
|
||||
</div>
|
||||
<div class="value-name">Min free:</div>
|
||||
<div>{json.heap.minimum_free_bytes}</div>
|
||||
<div class="value">{json.heap.minimum_free_bytes}</div>
|
||||
<div class="value-name">Free:</div>
|
||||
<div>{json.heap.total_free_bytes}</div>
|
||||
<div class="value">{json.heap.total_free_bytes}</div>
|
||||
<div class="value-name">Alloc:</div>
|
||||
<div>{json.heap.total_allocated_bytes}</div>
|
||||
<div class="value">{json.heap.total_allocated_bytes}</div>
|
||||
<div class="value-name">Max block:</div>
|
||||
<div>{json.heap.largest_free_block}</div>
|
||||
<div class="value">{json.heap.largest_free_block}</div>
|
||||
{:catch error}
|
||||
<error>{error.message}</error>
|
||||
{/await}
|
||||
|
|
@ -262,11 +275,11 @@
|
|||
<span><Spinner /></span>
|
||||
{:then json}
|
||||
<task-list>
|
||||
<span>Name</span>
|
||||
<span>State</span>
|
||||
<span>Handle</span>
|
||||
<span>Stack base</span>
|
||||
<span>WMRK</span>
|
||||
<span class="mobile-hidden">Name</span>
|
||||
<span class="mobile-hidden">State</span>
|
||||
<span class="mobile-hidden">Handle</span>
|
||||
<span class="mobile-hidden">Stack base</span>
|
||||
<span class="mobile-hidden">WMRK</span>
|
||||
{#each json.list.sort(function (a, b) {
|
||||
return a.number - b.number;
|
||||
}) as task}
|
||||
|
|
@ -411,4 +424,59 @@
|
|||
grid-template-columns: auto auto auto auto auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
task-list {
|
||||
grid-template-columns: auto auto auto auto;
|
||||
}
|
||||
|
||||
task-list > span:nth-child(5n + 3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
task-list {
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
|
||||
task-list > span:nth-child(5n + 4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.grid {
|
||||
grid-template-columns: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.value-name {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.splitter {
|
||||
background-color: #000;
|
||||
width: 100%;
|
||||
color: #ffa21d;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
task-list {
|
||||
grid-template-columns: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
task-list > span:nth-child(5n + 1) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
task-list > span:nth-child(5n + 5) {
|
||||
border-bottom: 4px dashed #000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,13 +21,12 @@
|
|||
autocomplete="off"
|
||||
type="text"
|
||||
{value}
|
||||
class="input-text-css"
|
||||
size={value.length > 3 ? value.length : 3}
|
||||
on:input={text_input}
|
||||
/>
|
||||
|
||||
<style>
|
||||
.input-text-css {
|
||||
input {
|
||||
display: inline-block;
|
||||
color: #000;
|
||||
font-size: 28px;
|
||||
|
|
@ -47,9 +46,15 @@
|
|||
height: 32px;
|
||||
}
|
||||
|
||||
.input-text-css:focus-visible,
|
||||
.input-text-css:hover {
|
||||
input:focus-visible,
|
||||
input:hover {
|
||||
outline: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
input {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -55,4 +55,10 @@
|
|||
select option {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue