minor changes in css

gaia-ufpel · Oct 21, 2024 · 565658a · 565658a
1 parent 4cb863f
commit 565658a
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 46 deletions.
diff --git a/app/back_button.tsx b/app/back_button.tsx
diff --git a/app/home/devices/newdevice/page.tsx b/app/home/devices/newdevice/page.tsx
@@ -6,12 +6,14 @@ import { useRouter } from 'next/navigation';
 import { DeviceSchema, TDeviceSchema } from '@/lib/types';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useToast } from '@/hooks/use-toast';
+import { dotSpinner } from 'ldrs';
 import api from '@/app/api';
 
 
 const Page = () => {
     const { toast } = useToast();
     const router = useRouter();
+    dotSpinner.register();
 
     const postDevice = async (data: TDeviceSchema) => {
         try {
@@ -30,7 +32,7 @@ const Page = () => {
 
         } catch (error: any) {
             console.error('Erro:', error);
-            toast({ title: "Erro", description: "Não foi possível registrar o dispositivo, tente novamente." });
+            toast({ title: "Erro", description: "Não foi possível registrar o dispositivo, tente novamente.", variant: "destructive" });
         }
     };
 
@@ -65,7 +67,7 @@ const Page = () => {
                         <label className='font-mono text-xl font-semibold'>ID:</label>
                         <input
                             placeholder='ID'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             disabled={isSubmitting}
                             {...register("id", { required: true })}
                         />
@@ -75,7 +77,7 @@ const Page = () => {
                         <label className='font-mono text-xl font-semibold'>Número de série:</label>
                         <input
                             placeholder='Serial Number'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             disabled={isSubmitting}
                             {...register("serial_number", { required: true })}
                         />
@@ -85,7 +87,7 @@ const Page = () => {
                         <label className='font-mono text-xl font-semibold'>Modelo:</label>
                         <input
                             placeholder='Model'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             disabled={isSubmitting}
                             {...register("model", { required: true })}
                         />
@@ -95,21 +97,25 @@ const Page = () => {
                         <label className='font-mono text-xl font-semibold'>Location ID:</label>
                         <input
                             placeholder='Location ID'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             disabled={isSubmitting}
                             {...register("location_id", { required: true })}
                         />
                         {errors.location_id && (<p className='text-red-500 mt-1 right-2'>{`${errors.location_id.message}`}</p>)}
                     </div>
                     <button
                         type="submit"
-                        className='px-10 py-2 rounded-xl text-white bg-purple-600 hover:bg-purple-700 shadow-md font-bold text-xl'
+                        className='px-10 py-2 rounded-xl text-white bg-purple-600 hover:bg-purple-700 shadow-md font-bold text-xl disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                         disabled={isSubmitting}
                     >
                         Registrar dispositivo
                     </button>
-                    <div className='flex justify-center'>
-                    </div>
+                    {
+                        isSubmitting &&
+                        <div className='flex justify-center'>
+                            <l-dot-spinner size="50" speed={0.9} color={'black'} />
+                        </div>
+                    }
                 </form>
             </div>
         </div>

diff --git a/app/home/devices/page.tsx b/app/home/devices/page.tsx
@@ -38,15 +38,15 @@ export default function DEVICES() {
 
             <div className='absolute top-0 right-0 md:mt-10 md:mr-10'>
                 <RefreshButton applyWhenClick={() => getDevices().then(data => setDevices(data))} />
-                {/*<button className='' onClick={() => { router.push(pathname + `/newdevice`) }}>
-                    <p className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">ADD DEVICE</p>
-                </button>*/}
             </div>
+            <button className='flex justify-center my-10' onClick={() => { router.push(pathname + `/newdevice`) }}>
+                <p className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">ADICIONAR DISPOSITIVO</p>
+            </button>
 
             <div className='flex justify-center mt-10'>
                 {
                     devices == null ?
-                        <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role='alert'>
+                        <div className="mt-40 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role='alert'>
                             No devices found
                         </div>
                         :

diff --git a/app/home/locations/newlocation/page.tsx b/app/home/locations/newlocation/page.tsx
@@ -1,16 +1,17 @@
 "use client";
 import React, { useState } from 'react'
 import api from '@/app/api';
-import { useRouter, usePathname } from 'next/navigation'
+import { useRouter } from 'next/navigation'
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { LocationSchema, TLocationSchema } from '@/lib/types';
 import { useToast } from '@/hooks/use-toast';
+import { dotSpinner } from 'ldrs';
 
 const page = () => {
     const { toast } = useToast();
     const router = useRouter();
-    const pathname = usePathname();
+    dotSpinner.register();
 
     const postLocation = async (data: TLocationSchema) => {
         try {
@@ -57,7 +58,7 @@ const page = () => {
                         <label className='font-mono text-xl font-semibold'>ID:</label>
                         <input
                             placeholder='ID'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             {...register('id', { required: true })}
                             disabled={isSubmitting}
                         />
@@ -67,7 +68,7 @@ const page = () => {
                         <label className='font-mono text-xl font-semibold'>Campus:</label>
                         <input
                             placeholder='Campus'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             {...register('campus', { required: true })}
                             disabled={isSubmitting}
                         />
@@ -77,7 +78,7 @@ const page = () => {
                         <label className='font-mono text-xl font-semibold'>Building:</label>
                         <input
                             placeholder='Building'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             {...register('building', { required: true })}
                             disabled={isSubmitting}
                         />
@@ -87,19 +88,25 @@ const page = () => {
                         <label className='font-mono text-xl font-semibold'>Room:</label>
                         <input
                             placeholder='Room'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             {...register('room', { required: true })}
                             disabled={isSubmitting}
                         />
                         {errors.building && (<p className='text-red-500'>{errors.building.message}</p>)}
                     </div>
                     <button
                         type="submit"
-                        className='px-10 py-2 rounded-xl text-white bg-purple-600 hover:bg-purple-700 shadow-md font-bold text-xl'
+                        className='px-10 py-2 rounded-xl text-white bg-purple-600 hover:bg-purple-700 shadow-md font-bold text-xl disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                         disabled={isSubmitting}
                     >
                         Registrar Localidade
                     </button>
+                    {
+                        isSubmitting &&
+                        <div className='flex justify-center'>
+                            <l-dot-spinner size="50" speed={0.9} color={'black'} />
+                        </div>
+                    }
                 </form>
             </div>
         </div >

diff --git a/app/home/locations/page.tsx b/app/home/locations/page.tsx
@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from 'react';
 import { Location } from '@/lib/types';
 import { fetchLocations } from '@/lib/shared_fetchers';
+import { useRouter, usePathname } from 'next/navigation';
 import Edit from './edit';
 import api from '@/app/api';
 import { useToast } from '@/hooks/use-toast';
@@ -10,13 +11,14 @@ const poppins = Poppins({
   subsets: ['latin'],
   weight: ["400"],
 });
-import { dummyLocations } from '@/lib/dummyConstructors';
 import RefreshButton from '@/app/refresh_button';
 import RemoveDialog from '@/app/_components/RemoveDialog';
 
 const Locations = () => {
   const { toast } = useToast();
   const [locations, setLocations] = useState<Location[] | null>(null);
+  const pathname = usePathname();
+  const router = useRouter();
 
   const removeLocation = async (id: number) => {
     try {
@@ -36,15 +38,10 @@ const Locations = () => {
 
       <div className='absolute top-0 right-0 md:mt-10 md:mr-10'>
         <RefreshButton applyWhenClick={() => fetchLocations().then(data => setLocations(data))} />
-        {
-          /*
-  
-            <button className='' onClick={() => { router.push(pathname + `/newlocation`) }}>
-            <p className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">ADD LOCATION</p>
-          </button>
-          */
-        }
       </div>
+      <button className='flex justify-center my-10' onClick={() => { router.push(pathname + `/newlocation`) }}>
+        <p className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">ADICIONAR LOCALIDADE</p>
+      </button>
 
       <div className='flex justify-center mt-10'>
         {locations == null ?

diff --git a/app/home/metric_types/newmetrictype/page.tsx b/app/home/metric_types/newmetrictype/page.tsx
@@ -7,10 +7,13 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import api from '@/app/api';
 import TimedPopup from '@/app/timed_popup';
 import { useToast } from '@/hooks/use-toast';
+import { dotSpinner } from 'ldrs';
+
 
 const Page = () => {
     const router = useRouter();
     const { toast } = useToast();
+    dotSpinner.register();
 
     const postMetricType = async (data: TnewMetricTypeSchema) => {
         try {
@@ -57,7 +60,7 @@ const Page = () => {
                         <label className='font-mono text-xl font-semibold'>ID:</label>
                         <input
                             placeholder='ID'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             disabled={isSubmitting}
                             {...register("id")}
                         />
@@ -67,7 +70,7 @@ const Page = () => {
                         <label className='font-mono text-xl font-semibold'>Nome do Tipo de Métrica:</label>
                         <input
                             placeholder='Metric Type Name'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             disabled={isSubmitting}
                             {...register("name")}
                         />
@@ -77,19 +80,25 @@ const Page = () => {
                         <label className='font-mono text-xl font-semibold'>Descrição:</label>
                         <input
                             placeholder='Description'
-                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none'
+                            className='pl-4 pr-4 w-80 h-12 bg-zinc-300 rounded-xl shadow-md outline-none disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                             disabled={isSubmitting}
                             {...register("description")}
                         />
                         {errors.description && (<p className='text-red-500 mt-1 right-2'>{`${errors.description.message}`}</p>)}
                     </div>
                     <button
                         type="submit"
-                        className='px-10 py-2 rounded-xl text-white bg-purple-600 hover:bg-purple-700 shadow-md font-bold text-xl'
+                        className='px-10 py-2 rounded-xl text-white bg-purple-600 hover:bg-purple-700 shadow-md font-bold text-xl disabled:opacity-50 disabled:pointer-blocked disabled:cursor-not-allowed'
                         disabled={isSubmitting}
                     >
                         Registrar Tipo de Métrica
                     </button>
+                    {
+                        isSubmitting &&
+                        <div className='flex justify-center'>
+                            <l-dot-spinner size="50" speed={0.9} color={'black'} />
+                        </div>
+                    }
                 </form>
             </div>
         </div>

diff --git a/app/home/metric_types/page.tsx b/app/home/metric_types/page.tsx
@@ -40,13 +40,13 @@ const MetricTypes = () => {
     <div className='relative flex flex-col'>
       <h1 className={`${poppins.className} text-3xl font-bold mt-4 md:mt-10 text-center`}>Tipos de métricas</h1>
 
-      <button className='absolute top-0 right-0 mt-10 mr-10' onClick={() => { router.push(pathname + `/newmetrictype`) }}>
+      <button className='flex justify-center my-10' onClick={() => { router.push(pathname + `/newmetrictype`) }}>
         <p className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">ADD METRIC TYPE</p>
       </button>
 
       <div className='flex justify-center mt-10'>
         {metricTypes == null ?
-          <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role='alert'>
+          <div className="mt-40 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role='alert'>
             No metrics found
           </div> :
           <div className="relative overflow-x-auto rounded">

diff --git a/app/refresh_button.tsx b/app/refresh_button.tsx
@@ -4,7 +4,7 @@ import { TbRefresh } from "react-icons/tb";
 const RefreshButton = ({ applyWhenClick }: { applyWhenClick: Function }) => {
     return (
         <button onClick={() => applyWhenClick()} className='relative text-white text-center'>
-            <p className="bg-yellow-500 hover:bg-yellow-600 font-bold md:py-2 md:px-4 rounded invisible md:visible">REFRESH</p>
+            <p className="bg-yellow-500 hover:bg-yellow-600 font-bold md:py-2 md:px-4 rounded invisible md:visible">RECARREGAR</p>
             <TbRefresh className='absolute bg-yellow-500 hover:bg-yellow-600 rounded visible md:invisible w-8 h-8' />
         </button>
     )