Skip to content
This repository was archived by the owner on Aug 30, 2023. It is now read-only.

Commit a5b231c

Browse files
MohamedElmdaryMohamedElmdary
committed
added nodeNode (make sure to config them)
1 parent dbe8769 commit a5b231c

File tree

5 files changed

+155
-21
lines changed

5 files changed

+155
-21
lines changed

‎easy-docs/public/build/elements/vm.wc.js‎

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

‎rollup.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ function buildElements() {
6565
const outDir = `.build/build/elements/`;
6666
// return fs
6767
// .readdirSync(dir)
68-
return ["base"]
68+
return ["vm"]
6969
.map(f => {
7070
const name = f.replace(".wc.svelte", "").toLocaleLowerCase();
7171
return build({

‎src/App.svelte‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<script lang="ts">
22
import Base from "./elements/base/Base.wc.svelte";
33
import Profiles from "./elements/profiles/Profiles.wc.svelte";
4-
import DL from "./elements/DeployedList/DeployedList.wc.svelte";
5-
// import C from "./elements/FarmingCalculator/FarmingCalculator.wc.svelte";
4+
import VM from "./elements/vm/Vm.wc.svelte";
65
</script>
76

87
<!-- <C /> -->
98
<Base />
9+
<VM />
1010
<Profiles />
11-
<DL />

‎src/elements/vm/Vm.wc.svelte‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import type { IFlist, IFormField } from "../../types";
66
const { events } = window.configs?.grid3_client ?? {};
77
import deployVM from "../../utils/deployVM";
8+
import findNodes from "../../utils/findNodes";
89
910
const configs = window.configs?.baseConfig;
1011
const deploymentStore = window.configs?.deploymentStore;
@@ -102,6 +103,33 @@
102103
}
103104
104105
const onSelectProfile = (e: Event) => profileIdx = (e.target as any).selectedIndex; // prettier-ignore
106+
107+
const nodeFilters = {
108+
accessNodeV4: false,
109+
accessNodeV6: true,
110+
gateway: false,
111+
city: "",
112+
country: "",
113+
farmId: null,
114+
cru: null,
115+
hru: null,
116+
mru: null,
117+
sru: null,
118+
};
119+
120+
// prettier-ignore
121+
const filtersFields = [
122+
{ label: "Access Node V4 Filter", symbol: "accessNodeV4", type: "checkbox" },
123+
{ label: "Access Node V6 Filter", symbol: "accessNodeV6", type: "checkbox" },
124+
{ label: "Gateway Filter", symbol: "gateway", type: "checkbox" },
125+
{ label: "City Filter", symbol: "city", type: "text" },
126+
{ label: "Country Filter", symbol: "country", type: "text" },
127+
{ label: "Farm ID Filter", symbol: "farmId", type: "number" },
128+
{ label: "CRU Filter", symbol: "cru", type: "number" },
129+
{ label: "HRU Filter", symbol: "hru", type: "number" },
130+
{ label: "MRU Filter", symbol: "mru", type: "number" },
131+
{ label: "SRU Filter", symbol: "sru", type: "number" },
132+
];
105133
</script>
106134

107135
<div style="padding: 15px;">
@@ -238,6 +266,70 @@
238266
</div>
239267
</div>
240268
{/each}
269+
270+
<section style="width: 50%;">
271+
{#each filtersFields as field (field.symbol)}
272+
{#if field.type === "checkbox"}
273+
<div style="display: flex; align-items: center;" class="mb-2">
274+
<label class="switch">
275+
<input
276+
type="checkbox"
277+
bind:checked={nodeFilters[field.symbol]}
278+
id={field.symbol}
279+
/>
280+
<span class="slider" />
281+
</label>
282+
<label
283+
for={field.symbol}
284+
class="label ml-2"
285+
style="cursor: pointer;"
286+
>
287+
{field.label}
288+
</label>
289+
</div>
290+
{/if}
291+
292+
{#if field.type === "text"}
293+
<div class="field">
294+
<p class="label">{field.label}</p>
295+
<div class="control">
296+
<input
297+
class="input"
298+
type="text"
299+
placeholder={field.label}
300+
bind:value={nodeFilters[field.symbol]}
301+
/>
302+
</div>
303+
</div>
304+
{/if}
305+
306+
{#if field.type === "number"}
307+
<div class="field">
308+
<p class="label">{field.label}</p>
309+
<div class="control">
310+
<input
311+
class="input"
312+
type="number"
313+
placeholder={field.label}
314+
bind:value={nodeFilters[field.symbol]}
315+
/>
316+
</div>
317+
</div>
318+
{/if}
319+
{/each}
320+
</section>
321+
322+
<button
323+
class="button is-primary mt-4"
324+
type="button"
325+
on:click={() => {
326+
findNodes(nodeFilters).then((res) => {
327+
console.log(res);
328+
});
329+
}}
330+
>
331+
Apply Filters
332+
</button>
241333
{/if}
242334

243335
{#if active === "Environment Variables"}
@@ -375,4 +467,58 @@
375467
align-items: center;
376468
justify-content: space-between;
377469
}
470+
471+
/* Switch */
472+
.switch {
473+
position: relative;
474+
display: inline-block;
475+
width: 60px;
476+
height: 34px;
477+
478+
input {
479+
opacity: 0;
480+
width: 0;
481+
height: 0;
482+
}
483+
484+
.slider {
485+
position: absolute;
486+
cursor: pointer;
487+
top: 0;
488+
left: 0;
489+
right: 0;
490+
bottom: 0;
491+
background-color: #ccc;
492+
-webkit-transition: 0.4s;
493+
transition: 0.4s;
494+
border-radius: 34px;
495+
}
496+
497+
.slider:before {
498+
position: absolute;
499+
content: "";
500+
height: 26px;
501+
width: 26px;
502+
left: 4px;
503+
bottom: 4px;
504+
background-color: white;
505+
-webkit-transition: 0.4s;
506+
transition: 0.4s;
507+
border-radius: 50%;
508+
}
509+
510+
input:checked + .slider {
511+
background-color: #2196f3;
512+
}
513+
514+
input:checked + .slider {
515+
box-shadow: 0 0 1px #2196f3;
516+
}
517+
518+
input:checked + .slider:before {
519+
-webkit-transform: translateX(26px);
520+
-ms-transform: translateX(26px);
521+
transform: translateX(26px);
522+
}
523+
}
378524
</style>

‎src/utils/findNodes.ts‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,10 @@
11
const { GridClient, Nodes } = window.configs?.grid3_client ?? {};
22

3-
export default function findNodes() {
3+
export default function findNodes(filters: any) {
44
const nodes = new Nodes(
5-
GridClient.config.graphqlURL,
6-
GridClient.config.rmbClient["proxyURL"]
5+
"https://graphql.dev.grid.tf/graphql",
6+
"https://gridproxy.dev.grid.tf"
77
);
88

9-
return nodes.filterNodes({
10-
accessNodeV4: false,
11-
accessNodeV6: false,
12-
city: "",
13-
country: "",
14-
cru: 0,
15-
farmId: 0,
16-
gateway: false,
17-
hru: 0,
18-
mru: 0,
19-
sru: 0,
20-
});
9+
return nodes.filterNodes(filters);
2110
}

0 commit comments

Comments
 (0)