mirror of
https://github.com/Threnklyn/wg-ui.git
synced 2026-06-13 17:43:34 +02:00
Change ui to use svelte material ui everywhere
This commit is contained in:
Daniel Lundin
Generated
+153
@@ -1074,6 +1074,26 @@
|
||||
"@material/typography": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"@material/dialog": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-3.2.0.tgz",
|
||||
"integrity": "sha512-qcxPxIxEYlDWvWAIaYbgRXluctzIvuCMZISuIUomXnd8t7nc4xVLuNHRubXGCtnIHyoE3Vb7IQEqAGM2ZjWxuw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@material/animation": "^3.1.0",
|
||||
"@material/base": "^3.1.0",
|
||||
"@material/dom": "^3.1.0",
|
||||
"@material/elevation": "^3.1.0",
|
||||
"@material/feature-targeting": "^3.1.0",
|
||||
"@material/ripple": "^3.2.0",
|
||||
"@material/rtl": "^3.2.0",
|
||||
"@material/shape": "^3.1.0",
|
||||
"@material/theme": "^3.1.0",
|
||||
"@material/typography": "^3.1.0",
|
||||
"focus-trap": "^5.0.0",
|
||||
"tslib": "^1.9.3"
|
||||
}
|
||||
},
|
||||
"@material/dom": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/dom/-/dom-3.1.0.tgz",
|
||||
@@ -1116,6 +1136,20 @@
|
||||
"integrity": "sha512-aXAa1Pv6w32URacE9LfMsl9zI6hFwx1K0Lp3Xpyf4rAkmaAB6z0gOkhicOrVFc0f64YheJgHjE7hJFieVenQdw==",
|
||||
"dev": true
|
||||
},
|
||||
"@material/floating-label": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-3.2.0.tgz",
|
||||
"integrity": "sha512-szzsSou+xXj3E6InEuOCr8E28IE5EdcBfKRaHoR5EBkzgcRxLuZkFSqD19zsUgVErdTCcRSbeU9mYa6cP8+Nzw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@material/animation": "^3.1.0",
|
||||
"@material/base": "^3.1.0",
|
||||
"@material/rtl": "^3.2.0",
|
||||
"@material/theme": "^3.1.0",
|
||||
"@material/typography": "^3.1.0",
|
||||
"tslib": "^1.9.3"
|
||||
}
|
||||
},
|
||||
"@material/icon-button": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-3.2.0.tgz",
|
||||
@@ -1129,6 +1163,33 @@
|
||||
"tslib": "^1.9.3"
|
||||
}
|
||||
},
|
||||
"@material/line-ripple": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-3.1.0.tgz",
|
||||
"integrity": "sha512-o6E6wrDqoOK4esCnM1MQ9t7DC/JQrzSrwYsYdqtOpGnr3G5Jx7WWVt6GEVh2eNXy8OnVYkJdQbMjyPVEVJb/Dg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@material/animation": "^3.1.0",
|
||||
"@material/base": "^3.1.0",
|
||||
"@material/theme": "^3.1.0",
|
||||
"tslib": "^1.9.3"
|
||||
}
|
||||
},
|
||||
"@material/notched-outline": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-3.2.0.tgz",
|
||||
"integrity": "sha512-IFuxVoQqlOy/WSSawI2Fglh/U1hS0QtVUiGsc8GUoVUd1pifn7RXidHP3vQrMDEo8M/RwA9p6uveQKjPwW41RA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@material/animation": "^3.1.0",
|
||||
"@material/base": "^3.1.0",
|
||||
"@material/floating-label": "^3.2.0",
|
||||
"@material/rtl": "^3.2.0",
|
||||
"@material/shape": "^3.1.0",
|
||||
"@material/theme": "^3.1.0",
|
||||
"tslib": "^1.9.3"
|
||||
}
|
||||
},
|
||||
"@material/ripple": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-3.2.0.tgz",
|
||||
@@ -1158,6 +1219,26 @@
|
||||
"@material/feature-targeting": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"@material/textfield": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-3.2.0.tgz",
|
||||
"integrity": "sha512-xPWDkTzurMOxvH0+DsenzboF7dFoUeLcbqX/9vyhWe3aPlO6ZWFNn3lAmYN24ElqR5FEr5zXNYfeIQ4JLT5mYw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@material/animation": "^3.1.0",
|
||||
"@material/base": "^3.1.0",
|
||||
"@material/dom": "^3.1.0",
|
||||
"@material/floating-label": "^3.2.0",
|
||||
"@material/line-ripple": "^3.1.0",
|
||||
"@material/notched-outline": "^3.2.0",
|
||||
"@material/ripple": "^3.2.0",
|
||||
"@material/rtl": "^3.2.0",
|
||||
"@material/shape": "^3.1.0",
|
||||
"@material/theme": "^3.1.0",
|
||||
"@material/typography": "^3.1.0",
|
||||
"tslib": "^1.9.3"
|
||||
}
|
||||
},
|
||||
"@material/theme": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/theme/-/theme-3.1.0.tgz",
|
||||
@@ -1251,6 +1332,16 @@
|
||||
"svelte": "^3.0"
|
||||
}
|
||||
},
|
||||
"@smui/dialog": {
|
||||
"version": "1.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@smui/dialog/-/dialog-1.0.0-beta.16.tgz",
|
||||
"integrity": "sha512-TOgOUV6lCul3tLfX5Bc7zQrpHQ26RpDtGSy5SDof+K5Q5pQhHU/tCNbAuXaDqnfS9j9nEuaDiDuGFiLecKKMUw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@material/dialog": "^3.1.0",
|
||||
"@smui/common": "^1.0.0-beta.15"
|
||||
}
|
||||
},
|
||||
"@smui/fab": {
|
||||
"version": "1.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@smui/fab/-/fab-1.0.0-beta.16.tgz",
|
||||
@@ -1263,6 +1354,16 @@
|
||||
"@smui/ripple": "^1.0.0-beta.16"
|
||||
}
|
||||
},
|
||||
"@smui/floating-label": {
|
||||
"version": "1.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@smui/floating-label/-/floating-label-1.0.0-beta.16.tgz",
|
||||
"integrity": "sha512-I3LxKegj2dn9FZzdqvoPsBxYXbTjUXEkvzVYZTqVg/tvo8gQgCSCxg4CNet62hw1sk6VHoXfQDvnoksqoTikzw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@material/floating-label": "^3.1.0",
|
||||
"@smui/common": "^1.0.0-beta.15"
|
||||
}
|
||||
},
|
||||
"@smui/icon-button": {
|
||||
"version": "1.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@smui/icon-button/-/icon-button-1.0.0-beta.16.tgz",
|
||||
@@ -1274,6 +1375,26 @@
|
||||
"@smui/ripple": "^1.0.0-beta.16"
|
||||
}
|
||||
},
|
||||
"@smui/line-ripple": {
|
||||
"version": "1.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@smui/line-ripple/-/line-ripple-1.0.0-beta.16.tgz",
|
||||
"integrity": "sha512-4RH/8GAxD2erIMM+2JZRn7UkNxPaeNztstD0KNAY6VEb4cT8XjWs6RNN+Vvp7UD1zkWB/4A9h+JZ0NX5WBZ77Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@material/line-ripple": "^3.1.0",
|
||||
"@smui/common": "^1.0.0-beta.15"
|
||||
}
|
||||
},
|
||||
"@smui/notched-outline": {
|
||||
"version": "1.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@smui/notched-outline/-/notched-outline-1.0.0-beta.16.tgz",
|
||||
"integrity": "sha512-2OX+JfelIY6emb6RPf1+TIQ70Z1q5a+nunDTXQUKKRblv1VKwaPhlvWwh6MJAgn0r49HQ9x1HqXUvGD+cpvBJQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@material/notched-outline": "^3.1.0",
|
||||
"@smui/common": "^1.0.0-beta.15"
|
||||
}
|
||||
},
|
||||
"@smui/paper": {
|
||||
"version": "1.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@smui/paper/-/paper-1.0.0-beta.16.tgz",
|
||||
@@ -1297,6 +1418,22 @@
|
||||
"@material/ripple": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"@smui/textfield": {
|
||||
"version": "1.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@smui/textfield/-/textfield-1.0.0-beta.16.tgz",
|
||||
"integrity": "sha512-PKzp8Nua4j7DhOnDe1ysmFb1tx6ypXVTBl0c2SPMKTqI6jqdacrIrLhuD0AMjzMYtktWslKwHCAV0BHwLA07Dw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@material/feature-targeting": "^3.1.0",
|
||||
"@material/ripple": "^3.1.0",
|
||||
"@material/rtl": "^3.1.0",
|
||||
"@material/textfield": "^3.1.0",
|
||||
"@smui/common": "^1.0.0-beta.15",
|
||||
"@smui/floating-label": "^1.0.0-beta.16",
|
||||
"@smui/line-ripple": "^1.0.0-beta.16",
|
||||
"@smui/notched-outline": "^1.0.0-beta.16"
|
||||
}
|
||||
},
|
||||
"@smui/top-app-bar": {
|
||||
"version": "1.0.0-beta.16",
|
||||
"resolved": "https://registry.npmjs.org/@smui/top-app-bar/-/top-app-bar-1.0.0-beta.16.tgz",
|
||||
@@ -4294,6 +4431,16 @@
|
||||
"readable-stream": "^2.3.6"
|
||||
}
|
||||
},
|
||||
"focus-trap": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-5.0.2.tgz",
|
||||
"integrity": "sha512-jQf4ZkX9qOhiNrga4pRh9N2vMqYLRuGM7RZ6VRDLgti04cbG8m7XD4xlU/N0M0cqwDYtXbdzSBQDbRIwqn0FIg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tabbable": "^4.0.0",
|
||||
"xtend": "^4.0.1"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.9.0.tgz",
|
||||
@@ -10668,6 +10815,12 @@
|
||||
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
|
||||
"dev": true
|
||||
},
|
||||
"tabbable": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
|
||||
"integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==",
|
||||
"dev": true
|
||||
},
|
||||
"tapable": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
|
||||
|
||||
@@ -20,9 +20,11 @@
|
||||
"@babel/preset-env": "^7.6.2",
|
||||
"@material/typography": "^3.1.0",
|
||||
"@smui/button": "^1.0.0-beta.16",
|
||||
"@smui/dialog": "^1.0.0-beta.16",
|
||||
"@smui/fab": "^1.0.0-beta.16",
|
||||
"@smui/icon-button": "^1.0.0-beta.16",
|
||||
"@smui/paper": "^1.0.0-beta.16",
|
||||
"@smui/textfield": "^1.0.0-beta.16",
|
||||
"@smui/top-app-bar": "^1.0.0-beta.16",
|
||||
"babel-jest": "^24.9.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
|
||||
+65
-51
@@ -1,4 +1,11 @@
|
||||
<script>
|
||||
import Dialog, {Actions, InitialFocus} from '@smui/dialog';
|
||||
import Textfield, {Input, Textarea} from '@smui/textfield';
|
||||
import Icon from '@smui/textfield/icon/index';
|
||||
import HelperText from '@smui/textfield/helper-text/index';
|
||||
import Button, {Group, GroupItem, Label} from '@smui/button';
|
||||
import Paper, {Title, Subtitle, Content} from '@smui/paper';
|
||||
|
||||
import Cookie from "cookie-universal";
|
||||
import { onMount } from 'svelte';
|
||||
import { link, navigate } from "svelte-routing";
|
||||
@@ -10,14 +17,21 @@
|
||||
const clientUrl = `/api/v1/users/` + user + `/clients/` + clientId;
|
||||
|
||||
let client = {};
|
||||
let clientName = "";
|
||||
let clientNotes = "";
|
||||
let deleteDialog;
|
||||
|
||||
async function getClient() {
|
||||
const res = await fetch(clientUrl);
|
||||
client = await res.json();
|
||||
clientName = client.Name;
|
||||
clientNotes = client.Notes;
|
||||
console.log("Fetched client", client);
|
||||
}
|
||||
|
||||
async function handleSubmit(event) {
|
||||
client.Name = clientName;
|
||||
client.Notes = clientNotes;
|
||||
const res = await fetch(clientUrl, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
@@ -40,75 +54,75 @@
|
||||
console.log("Delete!");
|
||||
}
|
||||
|
||||
async function deleteHandler(e) {
|
||||
switch (e.detail.action) {
|
||||
case 'delete':
|
||||
const res = await fetch(clientUrl, {
|
||||
method: "DELETE",
|
||||
});
|
||||
await res;
|
||||
navigate("/", { replace: true });
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(getClient);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<h2>Client Properties <small class="text-muted"> {client.Name}</h2>
|
||||
|
||||
<h3 class="mdc-typography--headline3">Client Properties <small class="text-muted">({client.Name})</small></h3>
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit}>
|
||||
<div class="form-group">
|
||||
<label for="name" class="bmd-label-floating">Name</label>
|
||||
<input type="text" class="form-control" id="name" bind:value={client.Name}>
|
||||
<span class="bmd-help">Friendly name of client.</span>
|
||||
|
||||
<div class="margins">
|
||||
<Textfield input$id="name" bind:value={clientName} variant="outlined" label="Client Name" input$aria-controls="client-name" input$aria-describedby="client-name-help" />
|
||||
<HelperText id="client-name-help">Friendly name of client / device</HelperText>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="notes" class="bmd-label-floating">Notes</label>
|
||||
<textarea class="form-control" id="notes" rows="3" bind:value={client.Notes}/>
|
||||
<span class="bmd-help">Notes about client.</span>
|
||||
<div class="margins">
|
||||
<Textfield input$id="notes" fullwidth textarea bind:value={clientNotes} label="Label" input$aria-controls="client-notes" input$aria-describedby="client-notes-help" />
|
||||
<HelperText id="client-notes-help">Notes about the client.</HelperText>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-raised btn-primary">Save Changes</button>
|
||||
<Button variant="raised"><Label>Save Changes</Label></Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h3>Additional Properties</h3>
|
||||
<dl class="row">
|
||||
<dt class="col-sm-2">IP Address</dt>
|
||||
<dd class="col-sm-10">{client.IP}</dd>
|
||||
<dt class="col-sm-2">Private Key</dt>
|
||||
<dd class="col-sm-10">{client.PrivateKey}</dd>
|
||||
<dt class="col-sm-2">Public Key</dt>
|
||||
<dd class="col-sm-10">{client.PublicKey}</dd>
|
||||
<h3 class="mdc-typography--headline5">Additional Properties</h3>
|
||||
<dl>
|
||||
<dt>IP Address</dt>
|
||||
<dd>{client.IP}</dd>
|
||||
<dt>Private Key</dt>
|
||||
<dd>{client.PrivateKey}</dd>
|
||||
<dt>Public Key</dt>
|
||||
<dd>{client.PublicKey}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h3>Danger Zone</h3>
|
||||
<button type="button" class="btn btn-sm btn-secondary btn-raised btn-danger" data-toggle="modal" data-target="#deleteClient">
|
||||
Delete Client Config
|
||||
</button>
|
||||
<h3 class="mdc-typography--headline4">Danger Zone</h3>
|
||||
|
||||
<div class="modal fade" id="deleteClient" tabindex="-1" role="dialog" aria-labelledby="deleteClientLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="deleteClientLabel">Delete {client.Name}</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Are you sure you want to delete this client configuration?
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||
<button on:click={handleDeleteClick} type="button" class="btn btn-primary btn-danger" data-dismiss="modal">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog bind:this={deleteDialog} aria-labelledby="delete-title" aria-describedby="delete-content" on:MDCDialog:closed={deleteHandler}>
|
||||
<div class="container">
|
||||
<Title id="delete-title">Delete Client Config</Title>
|
||||
<Content id="delete-content">
|
||||
Are you sure you want to delete this client configuration?
|
||||
</Content>
|
||||
<Actions>
|
||||
<Button action="none">
|
||||
<Label>No</Label>
|
||||
</Button>
|
||||
<Button action="delete" default use={[InitialFocus]}>
|
||||
<Label>Yes</Label>
|
||||
</Button>
|
||||
</Actions>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<Button id="delete" variant="raised" on:click={() => deleteDialog.open()}><Label>Delete Client Config</Label></Button>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -39,6 +39,7 @@ module.exports = {
|
||||
? "source-map" // For development
|
||||
: "#eval-source-map",
|
||||
output: {
|
||||
publicPath: "/",
|
||||
path: __dirname + "/dist",
|
||||
filename: "[name].js",
|
||||
chunkFilename: "[name].[id].js"
|
||||
|
||||
Reference in New Issue
Block a user