chaulmark/caddy-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Small addons

Browse source
This commit is contained in:
brian 2023-11-18 09:18:31 -05:00
parent 8fe2a9fe76
commit b9bec022b2
3 changed files with 3 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
components/EditRoute.tsx
View file

5
components/Navbar.tsx
View file

@ -1,20 +1,15 @@
"use client" "use client"
import * as React from "react" import * as React from "react"
import Link from "next/link"
import { cn } from "@/lib/utils"
import { import {
NavigationMenu, NavigationMenu,
NavigationMenuContent, NavigationMenuContent,
NavigationMenuItem, NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList, NavigationMenuList,
NavigationMenuTrigger, NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu" } from "@/components/ui/navigation-menu"
import ListItem from "./ListItem" import ListItem from "./ListItem"
import { Avatar, AvatarFallback } from "./ui/avatar"
export function Navbar() { export function Navbar() {
return ( return (

126
components/RouteCards.tsx
View file

@ -6,14 +6,8 @@ import { getHosts, getRouteUpstreams } from '@/lib/utils';
import { toast } from './ui/use-toast'; import { toast } from './ui/use-toast';
import React, { useState } from 'react'; import React, { useState } from 'react';
import useSWRMutation from 'swr/mutation'; import useSWRMutation from 'swr/mutation';
import { deleteRoute, updateRoute } from '@/lib/clientActions'; import { deleteRoute } from '@/lib/clientActions';
import { Dialog, DialogContent, DialogHeader } from './ui/dialog'; import { RouteDialog } from './RouteDialog';
import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog';
import { Form, FormControl, FormField, FormItem, FormLabel } from './ui/form';
import { useFieldArray, useForm } from 'react-hook-form';
import { Input } from './ui/input';
import { get, set } from 'lodash';
import { getRoutes } from '@/lib/serverActions';
export default function RouteCards({ routes }: { routes: Route[] }) { export default function RouteCards({ routes }: { routes: Route[] }) {
@ -43,7 +37,7 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
return ( return (
<> <>
{route && <EditRouteDialog route={route} />} {route && <RouteDialog route={route} />}
{ {
routes.map((route, index) => ( routes.map((route, index) => (
<div key={index} className='p-2'> <div key={index} className='p-2'>
@ -69,117 +63,3 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
</> </>
) )
} }
export function EditRouteDialog({ route }: { route: Route }) {
let index = getHosts(route).indexOf(route.match[0].host[0]);
const [modifiedRoute, setRoute] = useState(route);
const { trigger: pushUpdate } = useSWRMutation(`/api/caddy/routes/${index}`, updateRoute, {
onError: () => {
return toast({
title: "Error",
description: "There was an error updating the route",
variant: "destructive"
});
},
onSuccess: () => {
toast({
title: "Success",
description: "Route updated successfully!",
variant: "success"
});
}
});
let validHosts: any[] = getHosts(route);
let validUpstreams: any[] = getRouteUpstreams(route).map((upstream) => upstream.dial);
const form = useForm({
values: {
handler: route.handle[0].routes[0].handle[0].handler,
upstreams: validUpstreams,
hosts: validHosts,
}
});
const { fields: upstreams, append: appendUpstreams } = useFieldArray({
control: form.control,
name: "upstreams",
})
const { fields: hosts, append: appendHosts } = useFieldArray({
control: form.control,
name: "hosts",
})
let onSubmit = ((data: any) => {
pushUpdate(modifiedRoute);
})
let handleChange = (value: any, path: any) => {
let updatedRoute = set(modifiedRoute, path, value.target.value);
setRoute(updatedRoute);
form.setValue(value.target.name, value.target.value)
}
return (
<Dialog open={route as Route != null}>
<DialogContent className='sm:max-w-[425px]'>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<FormField
control={form.control}
name="handler"
render={({ field }) => (
<FormItem>
<FormLabel>Handler</FormLabel>
<FormControl>
<Input {...field} onChange={(value) => handleChange(value, `handle[0].handler`)} />
</FormControl>
</FormItem>
)}
></FormField>
{upstreams.map((upstream, index) => (
<FormField
key={index}
control={form.control}
name={`upstreams.${index}`}
render={({ field }) => (
<FormItem>
<FormLabel>Upstream {index + 1}</FormLabel>
<FormControl>
<Input {...field} onChange={(value) => handleChange(value, `handle[0].routes[0].handle[0].upstreams[${index}].dial`)} />
</FormControl>
</FormItem>
)}
/>
))}
{hosts.map((host, index) => (
<FormField
key={index}
control={form.control}
name={`hosts.${index}`}
render={({ field }) => (
<FormItem>
<FormLabel>Host {index + 1}</FormLabel>
<FormControl>
<Input {...field} onChange={(value) => handleChange(value, `match[0].host[${index}]`)} />
</FormControl>
</FormItem>
)}
/>
))}
<Button type="submit">Save</Button>
<Button type='button' onClick={() => {appendUpstreams('')}}>Add Host</Button>
<Button type='button' onClick={() => {appendHosts('')}}>Add Upstream</Button>
</form>
</Form>
</DialogContent>
</Dialog >
)
}