Skip to content
Snippets Groups Projects
Commit cfb628cb authored by Albert Dong's avatar Albert Dong
Browse files

mode select component fully implemented

parent d890cb96
Branches
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/lib/ModeSelect.svelte
+ 2
− 2
View file @ cfb628cb
......@@ -5,10 +5,10 @@
</script>
<div class="block">
<label for="selection" class="pr-2"> {label} </label>
<label for="selection" class="pr-1"> {label} </label>
<select
name="selection"
class=" bg-gray-200 border border-gray-200 px-2 rounded focus:outline-none focus:bg-white focus:border-gray-500"
class=" bg-gray-200 border border-gray-200 px-1 rounded focus:outline-none focus:bg-white focus:border-gray-500"
bind:value={binding}
>
{#each Object.entries(values) as [value, name]}
......
frontend/src/routes/double/+page.svelte
+ 19
− 21
View file @ cfb628cb
......@@ -6,6 +6,7 @@
import DownloadButton from "$lib/DownloadButton.svelte";
import UpdateButton from "$lib/UpdateButton.svelte";
import AngleEditor from "$lib/AngleEditor.svelte";
import ModeSelect from "$lib/ModeSelect.svelte";
const material = new THREE.MeshPhongMaterial({
color: 0x66ff66,
......@@ -27,6 +28,9 @@
let top_sphere_angles = [0];
let top_current_angle_input = 45;
const generation_types = { single: "Single", matching: "Matching" };
const bead_types = { cone: "Cone", sphere: "Sphere" };
let api_path: string;
function updateAPIPath() {
api_path = `http://localhost:8000/api/double_sided?radius=${radius}&hole_radius=${hole_radius}&length=${length}`;
......@@ -57,17 +61,11 @@
<div class="flex flex-row h-screen p-2">
<div class="flex flex-col w-1/5">
<div class="flex flex-row">
<label for="result-type" class="pr-3"> Generation Type: </label>
<select
name="result-type"
class="outline outline-slate-600 rounded-lg"
bind:value={bead_type}
>
<option value="single">Single</option>
<option value="matching">Matching Pair</option>
</select>
</div>
<ModeSelect
label="Generation Type:"
bind:binding={bead_type}
values={generation_types}
/>
<label for="radius-input"> Radius </label>
<input
......@@ -94,11 +92,11 @@
/>
<div class="mt-3 p-1 outline-1 outline flex-col flex bg-red-200">
<label for="top-type" class="mb-1"> Top Interface </label>
<select name="top-type" bind:value={top_type}>
<option value="cone">Cone</option>
<option value="sphere">Sphere</option>
</select>
<ModeSelect
label="Top Interface:"
bind:binding={top_type}
values={bead_types}
/>
{#if top_type == "cone"}
<label for="top-tip-angle-input"> Tip Angle </label>
......@@ -119,11 +117,11 @@
</div>
<div class="my-3 p-1 outline-1 outline flex-col flex bg-orange-100">
<label for="bottom-type"> Bottom Interface </label>
<select name="bottom-type" bind:value={bottom_type}>
<option value="cone">Cone</option>
<option value="sphere">Sphere</option>
</select>
<ModeSelect
label="Bottom Interface:"
bind:binding={bottom_type}
values={bead_types}
/>
{#if bottom_type == "cone"}
<label for="bottom-tip-angle-input"> Tip Angle </label>
......
frontend/src/routes/spherical/+page.svelte
+ 12
− 12
View file @ cfb628cb
......@@ -6,6 +6,7 @@
import DownloadButton from "$lib/DownloadButton.svelte";
import UpdateButton from "$lib/UpdateButton.svelte";
import AngleEditor from "$lib/AngleEditor.svelte";
import ModeSelect from "$lib/ModeSelect.svelte";
const material = new THREE.MeshPhongMaterial({
color: 0xa345bf,
......@@ -24,6 +25,12 @@
let angles = [45, 0];
let copies = 1;
const bead_types = {
simple: "Simple",
normal: "Normal",
multi: "Multi-Angle",
};
let api_path: string;
function updateAPIPath() {
if (bead_type == "simple") {
......@@ -53,18 +60,11 @@
<div class="flex flex-row h-screen p-2">
<div class="flex flex-col w-1/5">
<div class="flex flex-row">
<label for="result-type" class="pr-3"> Sphere Type: </label>
<select
name="result-type"
class="outline outline-slate-600 rounded-lg"
bind:value={bead_type}
>
<option value="simple">Simple</option>
<option value="normal">Normal</option>
<option value="multi">Multi Angle</option>
</select>
</div>
<ModeSelect
label="Sphere Type:"
bind:binding={bead_type}
values={bead_types}
/>
<label for="radius-input"> Radius </label>
<input
......
frontend/src/routes/structures/+page.svelte
+ 18
− 24
View file @ cfb628cb
......@@ -5,6 +5,7 @@
import { loadSTL, createViewer } from "$lib/STLViewer";
import DownloadButton from "$lib/DownloadButton.svelte";
import UpdateButton from "$lib/UpdateButton.svelte";
import ModeSelect from "$lib/ModeSelect.svelte";
const material = new THREE.MeshPhongMaterial({
color: 0xa345bf,
......@@ -22,6 +23,13 @@
let hole_radius = 1;
let num_sides = 3;
const struct_types = {
square: "Square",
triangle: "Triangle",
polygon: "Polygon",
};
const corner_types = { 0: "Large Sphere", 1: "Curved Cylinder" };
let api_path: string;
function updateAPIPath() {
if (struct_type == "square") {
......@@ -48,30 +56,16 @@
<div class="flex flex-row h-screen p-2">
<div class="flex flex-col w-1/5">
<div class="flex flex-row">
<label for="result-type" class="pr-3"> Structure Type: </label>
<select
name="result-type"
class="outline outline-slate-600 rounded-lg mb-2"
bind:value={struct_type}
>
<option value="square">Square</option>
<option value="triangle">Triangle</option>
<option value="polygon">Polygon</option>
</select>
</div>
<div class="flex flex-row">
<label for="corner-type" class="pr-3"> Corner Type: </label>
<select
name="corner-type"
class="outline outline-slate-600 rounded-lg"
bind:value={corner_type}
>
<option value="0">Large Sphere</option>
<option value="1">Curved Cylinder</option>
</select>
</div>
<ModeSelect
label="Structure Type:"
bind:binding={struct_type}
values={struct_types}
/>
<ModeSelect
label="Corner Type:"
bind:binding={corner_type}
values={corner_types}
/>
{#if !struct_type || struct_type == "polygon"}
<label for="num-sides-input"> Number of Sides </label>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment