Change redirect code and fancy new save changes button

src/App.svelte

@@ -175,11 +175,6 @@
       overflow-y: auto;
       height: 100%;
       flex-grow: 1;
-
-      h2 {
-        margin: 0;
-        margin-bottom: 16px;
-      }
     }
   }
 </style>

src/components/RedirectCode.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let code: number;
+  export let editable: boolean = false;
+</script>
+
+<select bind:value={code} disabled={!editable}>
+  <option value={301}>301 - Moved Permenantly</option>
+  <option value={302} selected>302 - Found</option>
+  <option value={307}>307 - Temporary Redirect</option>
+  <option value={308}>308 - Permenant Redirect</option>
+</select>

src/components/RedirectCreator.svelte

@@ -2,9 +2,10 @@
   import {createEventDispatcher} from "svelte";
   import {redirectKeys, type Redirect} from "../types/target";
   import Flags from "./Flags.svelte";
+  import RedirectCode from "./RedirectCode.svelte";
 
   const dispatch = createEventDispatcher();
-  let redirect: Redirect = {src: "", dst: "", desc: "", flags: 0, active: true};
+  let redirect: Redirect = {src: "", dst: "", desc: "", flags: 0, code: 302, active: true};
 
   const descCols = 50;
 </script>
@@ -13,13 +14,14 @@
   <td><input type="text" class="code-font" bind:value={redirect.src} size={Math.max(20, redirect.src.length + 2)} /></td>
   <td><input type="text" class="code-font" bind:value={redirect.dst} size={Math.max(20, redirect.dst.length + 2)} /></td>
   <td><Flags bind:value={redirect.flags} editable keys={redirectKeys} /></td>
+  <td><RedirectCode bind:code={redirect.code} editable /></td>
   <td class="desc"><textarea rows="3" cols={descCols} bind:value={redirect.desc} /></td>
   <td><input type="checkbox" bind:checked={redirect.active} /></td>
   <td>
     <button
       on:click={() => {
         dispatch("make", redirect);
-        redirect = {src: "", dst: "", desc: "", flags: 0, active: true};
+        redirect = {src: "", dst: "", desc: "", flags: 0, code: 302, active: true};
       }}
     >
       Create

src/components/RedirectRow.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import {type CSPair, noCPair, noSPair} from "../types/cspair";
-  import {type Route, redirectKeys, redirectEqual} from "../types/target";
+  import {redirectKeys, redirectEqual, type Redirect} from "../types/target";
   import Flags from "./Flags.svelte";
+  import RedirectCode from "./RedirectCode.svelte";
 
-  export let redirect: CSPair<Route>;
+  export let redirect: CSPair<Redirect>;
 
   function resetRedirect(): any {
     redirect.client = JSON.parse(JSON.stringify(redirect.server));
@@ -17,6 +18,7 @@
     <td class="code-font"><a href="https://{redirect.server.src}" target="_blank">{redirect.server.src}</a></td>
     <td><input type="text" class="code-font" disabled bind:value={redirect.server.dst} size={Math.max(20, redirect.server.dst.length + 2)} /></td>
     <td><Flags value={redirect.server.flags} keys={redirectKeys} /></td>
+    <td><RedirectCode bind:code={redirect.server.code} /></td>
     <td class="desc"><textarea rows="3" cols={descCols} disabled value={redirect.server.desc} /></td>
     <td><input type="checkbox" disabled checked={false} /></td>
     <td><button on:click={() => resetRedirect()}>Restore</button></td>
@@ -26,6 +28,7 @@
     <td class="code-font"><a href="https://{redirect.client.src}" target="_blank">{redirect.client.src}</a></td>
     <td><input type="text" class="code-font" bind:value={redirect.client.dst} size={Math.max(20, redirect.client.dst.length + 2)} /></td>
     <td><Flags bind:value={redirect.client.flags} editable keys={redirectKeys} /></td>
+    <td><RedirectCode bind:code={redirect.client.code} editable /></td>
     <td class="desc"><textarea rows="3" cols={descCols} bind:value={redirect.client.desc} /></td>
     <td><input type="checkbox" bind:checked={redirect.client.active} /></td>
     <td>
@@ -69,4 +72,8 @@
   td input[type="text"] {
     padding: 4px;
   }
+
+  .desc textarea {
+    resize: none;
+  }
 </style>

src/types/target.ts

@@ -11,6 +11,7 @@ export interface Redirect {
   dst: string;
   desc: string;
   flags: number;
+  code: number;
   active: boolean;
 }
 
@@ -21,7 +22,7 @@ export function routeEqual(a: Route | null, b: Route | null): boolean {
 
 export function redirectEqual(a: Redirect | null, b: Redirect | null): boolean {
   if (a == null || b == null) return false;
-  return a.src === b.src && a.dst === b.dst && a.desc === b.desc && a.flags === b.flags && a.active === b.active;
+  return a.src === b.src && a.dst === b.dst && a.desc === b.desc && a.flags === b.flags && a.code === b.code && a.active === b.active;
 }
 
 export const routeKeys = [

src/views/VioletView.svelte

@@ -140,8 +140,6 @@
   Warning: This is currently still under development, however it DOES update the real server routes and redirects
 </div>
 
-<button on:click={() => saveChanges()}>Save Changes</button>
-
 <h2>Routes</h2>
 {#await promiseForRoutes}
   <div>Loading...</div>
@@ -190,6 +188,7 @@
         <th>Source</th>
         <th>Destination</th>
         <th>Flags</th>
+        <th>Code</th>
         <th>Description</th>
         <th>Active</th>
         <th>Option</th>
@@ -218,6 +217,12 @@
   <div>{err}</div>
 {/await}
 
+<div class="footer-fake" />
+
+<footer>
+  <button on:click={() => saveChanges()}>Save Changes</button>
+</footer>
+
 <style lang="scss">
   table {
     border-collapse: collapse;
@@ -234,4 +239,31 @@
       text-align: center;
     }
   }
+
+  .footer-fake {
+    height: 50px;
+  }
+
+  footer {
+    position: absolute;
+    bottom: 0;
+    height: 50px;
+    background-color: #2c2c2c;
+    width: calc(100% - 150px - 32px);
+    box-shadow: 0 -4px 8px #0003, 0 -6px 20px #00000030;
+
+    button {
+      background-color: #04aa6d;
+      border: none;
+      box-shadow: none;
+      box-sizing: border-box;
+      color: black;
+      cursor: pointer;
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 24px;
+      width: calc(100%);
+      height: 50px;
+    }
+  }
 </style>

test-server/main.go

@@ -143,6 +143,7 @@ func apiServer(verify mjwt.Verifier) {
 				"dst":    "127.0.0.1:8084",
 				"desc":   "This is a test description",
 				"flags":  181,
+				"code":   307,
 				"active": true,
 			},
 			{
@@ -150,6 +151,7 @@ func apiServer(verify mjwt.Verifier) {
 				"dst":    "127.0.0.1:8085",
 				"desc":   "This is a test description",
 				"flags":  17,
+				"code":   302,
 				"active": true,
 			},
 			{
@@ -157,6 +159,7 @@ func apiServer(verify mjwt.Verifier) {
 				"dst":    "127.0.0.1:8086",
 				"desc":   "This is a test description",
 				"flags":  16,
+				"code":   308,
 				"active": true,
 			},
 			{
@@ -164,6 +167,7 @@ func apiServer(verify mjwt.Verifier) {
 				"dst":    "127.0.0.1:8087",
 				"desc":   "This is a test description",
 				"flags":  15,
+				"code":   301,
 				"active": true,
 			},
 		})