Updates to align frontend with API paths.

public/css/main.css

@@ -211,6 +211,9 @@
   .my-auto {
     margin-block: auto;
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }

src/components/DeleteFunction.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { delete_function } from '@/ts/functions.ts'
+const function_name_input = defineModel('name')
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full p-4 space-y-4 bg-primary">
+    <div class="flex flex-row space-x-2">
+      <div
+        class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
+      >
+        > Name:
+      </div>
+      <input
+        class="w-full h-full p-2 bg-white/75 text-primary"
+        v-model="function_name_input"
+        type="text"
+      />
+    </div>
+    <div
+      class="w-full p-2 m-auto text-center drop-shadow-accent drop-shadow-md text-md hover:bg-white/20"
+      @click="delete_function(String(function_name_input))"
+    >
+      > SUBMIT
+    </div>
+  </div>
+</template>

src/components/UpdateFunction.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { update_function } from '@/ts/functions.ts'
+const function_name_input = defineModel('name')
+const function_tags_input = defineModel('tags')
+const function_requirements_input = defineModel('requirements')
+</script>
+
+<template>
+  <div class="flex flex-col w-full h-full p-4 space-y-4 bg-primary">
+    <div class="flex flex-row space-x-2">
+      <div
+        class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
+      >
+        > Name:
+      </div>
+      <input
+        class="w-full h-full p-2 bg-white/75 text-primary"
+        v-model="function_name_input"
+        type="text"
+      />
+    </div>
+    <div class="flex flex-row space-x-2">
+      <div
+        class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
+      >
+        > Tags:
+      </div>
+      <input
+        class="w-full h-full p-2 bg-white/75 text-primary"
+        v-model="function_tags_input"
+        type="text"
+      />
+    </div>
+    <div class="flex flex-row space-x-2">
+      <div
+        class="h-full my-auto text-lg align-middle text-accent drop-shadow-accent drop-shadow-md text-nowrap w-fit"
+      >
+        > Requirements:
+      </div>
+      <input
+        class="w-full h-full p-2 bg-white/75 text-primary"
+        v-model="function_requirements_input"
+        type="text"
+      />
+    </div>
+    <div
+      class="w-full p-2 m-auto text-center drop-shadow-accent drop-shadow-md text-md hover:bg-white/20"
+      @click="
+        update_function(
+          String(function_name_input),
+          String(function_tags_input).split(' '),
+          String(function_requirements_input).split(' '),
+        )
+      "
+    >
+      > SUBMIT
+    </div>
+  </div>
+</template>

src/ts/authorization.ts

@@ -1,5 +1,5 @@
 export function isLoggedIn(): Promise<boolean> {
-  return fetch('http://localhost:31337/get/user/authorized', {
+  return fetch('http://localhost:31337/user/authorized', {
     credentials: 'include',
   })
     .then((res) => {

src/ts/function_tags.ts

@@ -1,13 +1,15 @@
 import { reactive, ref } from 'vue'
 
 export const function_tags_store = reactive({
-  function_tags: ref([] as Array<{
+  function_tags: ref(
-    name: string
+    [] as Array<{
-  }>,),
+      name: string
+    }>,
+  ),
 })
 
 export function update_function_tags() {
-  fetch('http://localhost:31337/get/all/function-tags', {
+  fetch('http://localhost:31337/all/function-tags', {
     credentials: 'include',
   })
     .then((res) => {
@@ -22,7 +24,7 @@ export function update_function_tags() {
 }
 
 export function add_function_tag(function_tag_name: string) {
-  const post_url = new URL('http://localhost:31337/post/function-tag')
+  const post_url = new URL('http://localhost:31337/function-tag')
   const search_params = new URLSearchParams()
   search_params.append('name', function_tag_name)
   post_url.search = search_params.toString()

src/ts/functions.ts

@@ -22,14 +22,15 @@ export const functions_store = reactive({
   ),
 })
 
-export function update_functions() {
+export function get_functions() {
-  fetch('http://localhost:31337/get/all/functions', {
+  fetch('http://localhost:31337/all/functions', {
     credentials: 'include',
   })
     .then((res) => {
       res
         .json()
         .then((functionsjson) => {
+          console.log(functionsjson)
           functions_store.functions = functionsjson.functions
         })
         .catch(() => {})
@@ -37,12 +38,77 @@ export function update_functions() {
     .catch(() => {})
 }
 
+export function update_function(
+  function_name: string,
+  function_tags: string[],
+  function_requirements: string[],
+) {
+  const post_url = new URL('http://localhost:31337/function')
+  const search_params = new URLSearchParams()
+  search_params.append('name', function_name)
+  function_tags.forEach((tag) => {
+    search_params.append('tags', tag)
+  })
+  if (function_requirements.length > 0 && function_requirements[0] != 'undefined') {
+    function_requirements.forEach((requirement) => {
+      search_params.append('requirements', requirement)
+    })
+  }
+  post_url.search = search_params.toString()
+  fetch(post_url, {
+    credentials: 'include',
+    method: 'PUT',
+    body: JSON.stringify({
+      name: function_name,
+      tags: function_tags,
+      requirements: function_requirements,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+    .then((res) => {
+      if (res.status === 400) {
+        console.log('Function submitted is invalid.')
+      } else if (res.status === 401) {
+        console.log("You aren't logged in.")
+      } else {
+        get_functions()
+      }
+    })
+    .catch(() => {})
+}
+
+export function delete_function(function_name: string) {
+  const delete_url = new URL('http://localhost:31337/function')
+  const search_params = new URLSearchParams()
+  search_params.append('name', function_name)
+  delete_url.search = search_params.toString()
+  fetch(delete_url, {
+    credentials: 'include',
+    method: 'DELETE',
+    body: JSON.stringify({
+      name: function_name,
+    }),
+  })
+    .then((res) => {
+      if (res.status === 400) {
+        console.log('Function submitted is invalid.')
+      } else if (res.status === 401) {
+        console.log("You aren't logged in.")
+      } else {
+        get_functions()
+      }
+    })
+    .catch(() => {})
+}
+
 export function add_function(
   function_name: string,
   function_tags: string[],
   function_requirements: string[],
 ) {
-  const post_url = new URL('http://localhost:31337/post/function')
+  const post_url = new URL('http://localhost:31337/function')
   const search_params = new URLSearchParams()
   search_params.append('name', function_name)
   function_tags.forEach((tag) => {
@@ -72,7 +138,7 @@ export function add_function(
       } else if (res.status === 401) {
         console.log("You aren't logged in.")
       } else {
-        update_functions()
+        get_functions()
       }
     })
     .catch(() => {})

src/ts/groups.ts

@@ -9,7 +9,7 @@ export const groups_store = reactive({
 })
 
 export function update_groups() {
-  fetch('http://localhost:31337/get/all/groups', {
+  fetch('http://localhost:31337/all/groups', {
     credentials: 'include',
   })
     .then((res) => {
@@ -24,7 +24,7 @@ export function update_groups() {
 }
 
 export function add_group(group: string) {
-  fetch('http://localhost:31337/post/group?name=' + group, {
+  fetch('http://localhost:31337/group?name=' + group, {
     credentials: 'include',
     method: 'POST',
     body: JSON.stringify({ name: group }),

src/ts/user_info.ts

@@ -9,7 +9,7 @@ export const user_store = reactive({
 })
 
 export function update_info() {
-  fetch('http://localhost:31337/get/user/info', {
+  fetch('http://localhost:31337/user/info', {
     credentials: 'include',
   })
     .then((res) => {

src/views/UserDashboard.vue

@@ -6,15 +6,17 @@ import ListFunctionTags from '@/components/ListFunctionTags.vue'
 import AddGroup from '@/components/AddGroup.vue'
 import AddFunction from '@/components/AddFunction.vue'
 import AddFunctionTag from '@/components/AddFunctionTag.vue'
+import DeleteFunction from '@/components/DeleteFunction.vue'
 import { onMounted } from 'vue'
 import { update_info } from '@/ts/user_info'
 import { update_groups } from '@/ts/groups'
-import { update_functions } from '@/ts/functions'
+import { get_functions } from '@/ts/functions'
 import { update_function_tags } from '@/ts/function_tags'
+import UpdateFunction from '@/components/UpdateFunction.vue'
 
 onMounted(update_info)
 onMounted(update_groups)
-onMounted(update_functions)
+onMounted(get_functions)
 onMounted(update_function_tags)
 </script>
 
@@ -67,8 +69,35 @@ onMounted(update_function_tags)
             <ListFunctions></ListFunctions>
           </div>
           <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <div class="bg-primary ring-2 ring-primary/80 mb-4">
+              <div
+                class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
+              >
+                <h2 class="text-md md:text-xl text-accent">> CREATE</h2>
+              </div>
+            </div>
             <AddFunction></AddFunction>
           </div>
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <div class="bg-primary ring-2 ring-primary/80 mb-4">
+              <div
+                class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
+              >
+                <h2 class="text-md md:text-xl text-accent">> UPDATE</h2>
+              </div>
+            </div>
+            <UpdateFunction></UpdateFunction>
+          </div>
+          <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+            <div class="bg-primary ring-2 ring-primary/80 mb-4">
+              <div
+                class="flex flex-col w-full h-full p-2 rounded-sm drop-shadow-md drop-shadow-accent"
+              >
+                <h2 class="text-md md:text-xl text-accent">> DELETE</h2>
+              </div>
+            </div>
+            <DeleteFunction></DeleteFunction>
+          </div>
         </div>
         <div class="flex flex-col p-2 bg-secondary/50 ring-2 ring-secondary/30">
           <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">