foosinn/mac4nick
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

nice ui

Browse source
This commit is contained in:
Stefan Schwarz 2020-08-22 01:41:50 +02:00
parent 1780be3104
commit 47784500fb
3 changed files with 93 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Cargo.lock generated
View file

@ -1094,6 +1094,7 @@ dependencies = [
"async-std", "async-std",
"chrono", "chrono",
"http-types", "http-types",
"openssl",
"serde", "serde",
"sqlx 0.4.0-beta.1", "sqlx 0.4.0-beta.1",
"tide", "tide",
@ -1274,6 +1275,15 @@ version = "0.1.2"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "77af24da69f9d9341038eba93a073b1fdaaa1b788221b00a69bce9e762cb32de" checksum = "77af24da69f9d9341038eba93a073b1fdaaa1b788221b00a69bce9e762cb32de"
[[package]]
name = "openssl-src"
version = "111.10.2+1.1.1g"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a287fdb22e32b5b60624d4a5a7a02dbe82777f730ec0dbc42a0554326fef5a70"
dependencies = [
"cc",
]
[[package]] [[package]]
name = "openssl-sys" name = "openssl-sys"
version = "0.9.58" version = "0.9.58"
@ -1283,6 +1293,7 @@ dependencies = [
"autocfg 1.0.0", "autocfg 1.0.0",
"cc", "cc",
"libc", "libc",
"openssl-src",
"pkg-config", "pkg-config",
"vcpkg", "vcpkg",
] ]

8
src/forms.rs
View file

@ -83,7 +83,7 @@ impl ChangeForm {
.execute(&request.state().pool) .execute(&request.state().pool)
.await .await
{ {
Ok(_) => (Level::Info, "updated device".to_string()), Ok(_) => (Level::Info, format!("updated device \"{}\"", device.descr)),
Err(_) => (Level::Error, "unable to update device".to_string()), Err(_) => (Level::Error, "unable to update device".to_string()),
} }
} }
@ -101,13 +101,17 @@ impl ChangeForm {
) )
} }
}; };
let descr = device.descr.clone();
match device match device
.delete() .delete()
.unwrap() .unwrap()
.execute(&request.state().pool) .execute(&request.state().pool)
.await .await
{ {
Ok(_) => (Level::Info, "delete device".to_string()), Ok(_) => (
Level::Info,
format!("device \"{}\" has been deleted", descr),
),
Err(_) => (Level::Error, "unable to delete device".to_string()), Err(_) => (Level::Error, "unable to delete device".to_string()),
} }
} }

108
templates/index.html
View file

@ -3,40 +3,53 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
<title>macnickenson</title> <title>macnickenson</title>
</head> </head>
<body> <body>
<section class="section">
<div class="container"> <div class="container">
<h1>macnickenson</h1> <section class="hero is-small is-primary is-bold box">
<div class="hero-body">
<div class="container">
<h1 class="title">macnickenson</h1>
</div>
</div>
</section>
{% for message in messages %} {% for message in messages %}
<div class="alert alert-{{ message.0.color() }}">{{ message.1 }}</div> <div class="notification is-{{ message.0.color() }}">
<button class="delete"
></button>
{{ message.1 }}
</div>
{% endfor %} {% endfor %}
<div class="mt-5"> <div class="box">
<h2>Your ({{ nickname }}) Devices:</h2> <h2 class="title is-4">{{ nickname }}'s Devices:</h2>
<table class="table"> <table class="table is-striped is-fullwidth has-mobile-cards">
<thead><tr> <thead><tr>
<th scope="col">Mac-Address</th> <th scope="col">MAC-Address</th>
<th scope="col">Description</th> <th scope="col">Description</th>
<th scope="col">Privacy</th> <th scope="col">Privacy</th>
<th scope="col">Commands</th> <th scope="col">Actions</th>
</tr></thead> </tr></thead>
<tbody> <tbody>
{% for device in my %} {% for device in my %}
<tr><form action="/change" method="POST"> <tr><form action="/change" method="POST">
<td> <td data-label="MAC">
{{ device.macaddr }} <span class="is-family-code">{{ device.macaddr }}</span>
{% if device.present %} {% if device.present %}
<span class="badge badge-success">on</span> <span class="tag is-success">on</span>
{% endif %} {% endif %}
<input type="hidden" name="macaddr" value="{{ device.macaddr }}" /> <input type="hidden" name="macaddr" value="{{ device.macaddr }}" />
</td> </td>
<td><input name="descr" required value="{{ device.descr }}" /></td> <td data-label="Descr">
<td> <input name="descr" required value="{{ device.descr }}" />
</td>
<td data-label="Privacy">
<select name="privacy"> <select name="privacy">
<option value="0" <option value="0"
{{ device.privacy.selected(crate::db::PrivacyLevel::ShowUserAndDevice) }} {{ device.privacy.selected(crate::db::PrivacyLevel::ShowUserAndDevice) }}
@ -55,12 +68,12 @@
>Dont Log</option> >Dont Log</option>
</select> </select>
</td> </td>
<td> <td data-label="Actions">
<div class="btn-group"> <div class="buttons has-addons">
<button type="submit" name="action" value="update" <button type="submit" name="action" value="update"
class="btn btn-primary">Update</button> class="button is-info is-small">Update</button>
<button type="submit" name="action" value="delete" <button type="submit" name="action" value="delete"
class="btn btn-danger">Delete</button> class="button is-danger is-small">Delete</button>
</div> </div>
</td> </td>
</form></tr> </form></tr>
@ -68,28 +81,28 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="mt-5"> <div class="box">
<h2>Unregistred Devices:</h2> <h2 class="title is-4">Unregistred Devices:</h2>
<table class="table"> <table class="table is-striped is-fullwidth has-mobile-cards">
<thead><tr> <thead><tr>
<th>MAC-Address</th> <th>MAC-Address</th>
<th>IP-Address</th> <th>IP-Address</th>
<th>Description</th> <th>Description</th>
<th>Privacy</th> <th>Privacy</th>
<th>Commands</th> <th>Actions</th>
</tr></thead> </tr></thead>
<tbody> <tbody>
{% for device in unassinged %} {% for device in unassinged %}
<tr><form action="/change" method="POST"> <tr><form action="/change" method="POST">
<td> <td data-label="MAC">
{{ device.macaddr }} <span class="is-family-code">{{ device.macaddr }}</span>
<input type="hidden" name="macaddr" value="{{ device.macaddr }}" /> <input type="hidden" name="macaddr" value="{{ device.macaddr }}" />
</td> </td>
<td>{{ device.ip() }}</td> <td data-label="IP-Address">{{ device.ip() }}</td>
<td> <td data-label="Descr">
<input placeholder="awesome new device" required name="descr" /> <input placeholder="awesome new device" required name="descr" />
</td> </td>
<td> <td data-label="Privacy">
<select name="privacy"> <select name="privacy">
<option value="0">Show User and Device</option> <option value="0">Show User and Device</option>
<option value="1">Show User</option> <option value="1">Show User</option>
@ -98,17 +111,48 @@
<option value="4">Dont Log</option> <option value="4">Dont Log</option>
</select> </select>
</td> </td>
<td> <td data-label="Actions">
<button name="action" value="register" type="submit" <button name="action" value="register" type="submit"
class="btn btn-success">Register</button> class="button is-success is-small">Register</button>
</td> </td>
</form></tr> </form></tr>
{% endfor %} {% endfor %}
</table> </table>
</div> </div>
<div>
footer
</div>
</div> </div>
</section>
</body> </body>
<script>
document.addEventListener('DOMContentLoaded', () => {
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
$notification = $delete.parentNode;
$delete.addEventListener('click', () => {
$notification.parentNode.removeChild($notification);
});
});
});
setTimeout(() => {
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
$notification = $delete.parentNode;
$notification.parentNode.removeChild($notification);
});
}, 5000)
</script>
<style>
@media screen and (max-width: 768px) {
.table.has-mobile-cards thead { display: none }
.table.has-mobile-cards tfoot th { border: 0; display: inherit }
.table.has-mobile-cards tr { box-shadow: 0 2px 3px hsla(0,0%,4%,.1),0 0 0 1px hsla(0,0%,4%,.1); max-width: 100%; position: relative; display: block }
.table.has-mobile-cards tr td { border: 0; display: inherit }
.table.has-mobile-cards tr td:last-child { border-bottom: 0 }
.table.has-mobile-cards tr:not(:last-child) { margin-bottom: 1rem }
.table.has-mobile-cards tr:not([class*=is-]) { background: inherit }
.table.has-mobile-cards tr:not([class*=is-]):hover { background-color: inherit }
.table.has-mobile-cards tr.detail { margin-top: -1rem }
.table.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td { display: -ms-flexbox; display: flex; width: auto; -ms-flex-pack: end; justify-content: flex-end; text-align: right; border-bottom: 1px solid #f5f5f5 }
.table.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td:before { content: attr(data-label); font-weight: 600; margin-right: auto; padding-right: .5em; text-align: left }
}
</style>
</html> </html>