Skip to content

Commit a835bc0

Browse files
mrloureedmrloureed
authored
Wine cart app cleanup (#21)
* update dependencies * linting * fix typescript, replace vars with let or const appropriately * update dependencies, add Carbon design system * import carbon design theme * update status stylings * style * update title
1 parent dd3d95b commit a835bc0

File tree

11 files changed

+533
-410
lines changed

11 files changed

+533
-410
lines changed

‎pour/vinoweb/index.html‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + Svelte + TS</title>
8-
</head>
9-
<body>
10-
<div id="app"></div>
11-
<script type="module" src="/src/main.ts"></script>
12-
</body>
13-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Wine cart demo</title>
9+
</head>
10+
11+
<body>
12+
<div id="app"></div>
13+
<script type="module" src="/src/main.ts"></script>
14+
</body>
15+
16+
</html>

‎pour/vinoweb/package-lock.json‎

Lines changed: 31 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pour/vinoweb/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@
1818
"vite": "^6.3.5"
1919
},
2020
"dependencies": {
21+
"@bufbuild/protobuf": "^1.10.1",
2122
"@tanstack/svelte-query": "^5.79.0",
2223
"@viamrobotics/sdk": "^0.42.0",
2324
"@viamrobotics/svelte-sdk": "^0.2.0",
25+
"carbon-components-svelte": "^0.89.8",
2426
"typescript-cookie": "^1.0.6"
2527
}
2628
}

‎pour/vinoweb/src/App.svelte‎

Lines changed: 95 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,94 @@
11
<script lang="ts">
2-
import { getCookie, setCookie } from 'typescript-cookie'
3-
import { ViamProvider } from '@viamrobotics/svelte-sdk';
4-
5-
import logo from './assets/viam.svg'
6-
import Main from "./main.svelte"
7-
8-
9-
let myState = $state({error : ""});
10-
11-
function getHostAndCredentials() {
12-
var parts = window.location.pathname.split("/");
13-
if (parts && parts.length >= 3 && parts[1] == "machine") {
14-
var machineId = parts[2];
15-
myState.machineId = machineId;
16-
var x = getCookie(machineId);
17-
if (x) {
18-
var x = JSON.parse(x);
19-
return [x.hostname, {type: 'api-key', payload: x.key, authEntity: x.id}];
20-
}
21-
}
22-
23-
var x = getCookie("default-host");
24-
if (x && x != "") {
25-
var x = JSON.parse(x);
26-
return [x.hostname, {type: 'api-key', payload: x.key, authEntity: x.id}];
27-
}
28-
29-
var host = getCookie("host");
30-
var keyId = getCookie("api-key-id");
31-
var key = getCookie("api-key");
32-
33-
if (host && host != "") {
34-
return [host, {type: 'api-key', payload: key, authEntity: keyId}];
35-
}
36-
37-
return ["", {}];
38-
}
39-
40-
function init() {
41-
const [host, credentials] = getHostAndCredentials();
42-
if (host != "") {
43-
myState.host = host;
44-
myState.credentials = credentials;
45-
}
46-
}
47-
48-
function saveHostInfo() {
49-
if (!myState.machineId) {
50-
throw "neeed a machineId";
51-
}
52-
var host = document.getElementById("in_host").value;
53-
var id = document.getElementById("in_id").value;
54-
var key = document.getElementById("in_key").value;
55-
56-
if (host == "") {
57-
myState.error = "need a host";
58-
return;
59-
}
60-
if (id == "") {
61-
myState.error = "need an id";
62-
return;
63-
}
64-
if (key == "") {
65-
myState.error = "need a key"
66-
return;
67-
}
68-
69-
setCookie(myState.machineId, JSON.stringify({hostname: host, key: key, id: id}))
70-
71-
}
72-
73-
init();
2+
import { getCookie, setCookie } from "typescript-cookie";
3+
import { ViamProvider } from "@viamrobotics/svelte-sdk";
4+
5+
import logo from "./assets/viam.svg";
6+
import Main from "./main.svelte";
7+
8+
let myState = $state({ error: "", machineId: "", host: "", credentials: {} });
9+
10+
function getHostAndCredentials() {
11+
const parts = window.location.pathname.split("/");
12+
if (parts && parts.length >= 3 && parts[1] == "machine") {
13+
const machineId = parts[2];
14+
myState.machineId = machineId;
15+
const cookieValue = getCookie(machineId);
16+
if (cookieValue) {
17+
const parsedValue = JSON.parse(cookieValue);
18+
return [
19+
parsedValue.hostname,
20+
{
21+
type: "api-key",
22+
payload: parsedValue.key,
23+
authEntity: parsedValue.id,
24+
},
25+
];
26+
}
27+
}
28+
29+
const defaultCookie = getCookie("default-host");
30+
if (defaultCookie && defaultCookie != "") {
31+
const parsedDefault = JSON.parse(defaultCookie);
32+
return [
33+
parsedDefault.hostname,
34+
{
35+
type: "api-key",
36+
payload: parsedDefault.key,
37+
authEntity: parsedDefault.id,
38+
},
39+
];
40+
}
41+
42+
const host = getCookie("host");
43+
const keyId = getCookie("api-key-id");
44+
const key = getCookie("api-key");
45+
46+
if (host && host != "") {
47+
return [host, { type: "api-key", payload: key, authEntity: keyId }];
48+
}
49+
50+
return ["", {}];
51+
}
52+
53+
function init() {
54+
const [host, credentials] = getHostAndCredentials();
55+
if (host != "") {
56+
myState.host = host;
57+
myState.credentials = credentials;
58+
}
59+
}
60+
61+
function saveHostInfo() {
62+
if (!myState.machineId) {
63+
throw "neeed a machineId";
64+
}
65+
const host =
66+
(document.getElementById("in_host") as HTMLInputElement)?.value || "";
67+
const id =
68+
(document.getElementById("in_id") as HTMLInputElement)?.value || "";
69+
const key =
70+
(document.getElementById("in_key") as HTMLInputElement)?.value || "";
71+
72+
if (host == "") {
73+
myState.error = "need a host";
74+
return;
75+
}
76+
if (id == "") {
77+
myState.error = "need an id";
78+
return;
79+
}
80+
if (key == "") {
81+
myState.error = "need a key";
82+
return;
83+
}
84+
85+
setCookie(
86+
myState.machineId,
87+
JSON.stringify({ hostname: host, key: key, id: id })
88+
);
89+
}
90+
91+
init();
7492
</script>
7593

7694
<main>
@@ -79,7 +97,7 @@
7997
{myState.error}
8098
</h1>
8199
{/if}
82-
100+
83101
{#if myState.host}
84102
<Main host={myState.host} credentials={myState.credentials} />
85103
<!-- <ComponentPreview host={myState.host} credentials={myState.credentials} /> -->
@@ -88,21 +106,19 @@
88106
<p class="form-text">No host found, want to specify a default?</p>
89107
<div class="form-group">
90108
<label for="in_host">Host:</label>
91-
<input id="in_host" type="text">
109+
<input id="in_host" type="text" />
92110
</div>
93111
<div class="form-group">
94112
<label for="in_id">Key Id:</label>
95-
<input id="in_id" type="text">
113+
<input id="in_id" type="text" />
96114
</div>
97115
<div class="form-group">
98116
<label for="in_key">Key:</label>
99-
<input id="in_key" type="password">
117+
<input id="in_key" type="password" />
100118
</div>
101-
<button onclick="{saveHostInfo}" class="save-button">Save</button>
119+
<button onclick={saveHostInfo} class="save-button">Save</button>
102120
</div>
103121
{/if}
104-
105-
106122
</main>
107123

108124
<style>

0 commit comments

Comments
 (0)