feat: Add Uziomy calculator page with grounding calculations and document generation
- Implemented Uziomy component for calculating grounding parameters. - Added state management for input fields and results. - Integrated DatePicker for date selection. - Created functions for grounding calculations, document generation (DOCX), and DXF file generation. - Enhanced UI with Tailwind CSS for better styling and responsiveness. - Updated global styles to include Inter font and custom scrollbar styles. - Configured Tailwind CSS to extend colors, fonts, and animations.
This commit is contained in:
191
pages/index.js
191
pages/index.js
@@ -1,93 +1,130 @@
|
||||
import Head from "next/head";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import Header from "../components/templates/header";
|
||||
import { useState } from "react";
|
||||
import { useSession, signIn } from "next-auth/react";
|
||||
import Layout from "../components/ui/Layout";
|
||||
import { Card, CardHeader, CardContent, CardTitle, Button, Tabs, TabsTrigger, TabsContent } from "../components/ui/components";
|
||||
import Generator from "../components/templates/generator";
|
||||
import Manual from "../components/templates/manual";
|
||||
import Nav from "../components/templates/nav";
|
||||
import UserTop from "../components/templates/userTop";
|
||||
import Footer from "../components/templates/footer";
|
||||
import { useState } from "react";
|
||||
import { useSession, signIn, signOut } from "next-auth/react";
|
||||
import { Pane, Button, Tab, Tablist } from "evergreen-ui";
|
||||
import { ChartBarIcon, PencilIcon, ArrowRightOnRectangleIcon as LoginIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
export default function Home() {
|
||||
const { data: session } = useSession();
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const [tabs] = useState(["auto", "manual"]);
|
||||
const [realTabs] = useState([Generator, Manual]);
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
|
||||
if (session) {
|
||||
return (
|
||||
<div className="">
|
||||
<Head>
|
||||
<title>Wastpol</title>
|
||||
</Head>
|
||||
|
||||
<div className="flex md:flex-row flex-col justify-between px-8 mt-2">
|
||||
<Nav />
|
||||
<UserTop session={session} />
|
||||
</div>
|
||||
|
||||
<main className="flex flex-1 flex-col items-center">
|
||||
<div className="flex flex-col items-center p-8 mt-12 rounded-md shadow-md transition-all duration-500 hover:shadow-xl">
|
||||
<Header />
|
||||
<Tablist>
|
||||
{tabs.map((tab, index) => (
|
||||
<Tab
|
||||
key={tab}
|
||||
id={tab}
|
||||
onSelect={() => setSelectedIndex(index)}
|
||||
isSelected={index === selectedIndex}
|
||||
>
|
||||
{tab}
|
||||
</Tab>
|
||||
))}
|
||||
</Tablist>
|
||||
<Pane>
|
||||
{realTabs.map((tab, index) =>
|
||||
index == 1 ? (
|
||||
<Pane
|
||||
key={tab}
|
||||
id={`panel-${tab}`}
|
||||
role="tabpanel"
|
||||
display={index === selectedIndex ? "block" : "none"}
|
||||
>
|
||||
<Manual />
|
||||
</Pane>
|
||||
) : (
|
||||
<Pane
|
||||
key={tab}
|
||||
id={`panel-${tab}`}
|
||||
role="tabpanel"
|
||||
display={index === selectedIndex ? "block" : "none"}
|
||||
>
|
||||
<Generator />
|
||||
</Pane>
|
||||
)
|
||||
)}
|
||||
</Pane>
|
||||
<Layout title="Wastpol - Profil przekroju terenu">
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
{/* Page Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
Generator profilu przekroju terenu
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Twórz profesjonalne profile terenowe na podstawie danych z Geoportalu lub wprowadzonych ręcznie
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Main Content Card */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader className="border-b bg-gray-50">
|
||||
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
|
||||
<TabsTrigger>
|
||||
<ChartBarIcon className="w-5 h-5 mr-2" />
|
||||
Automatyczny
|
||||
</TabsTrigger>
|
||||
<TabsTrigger>
|
||||
<PencilIcon className="w-5 h-5 mr-2" />
|
||||
Ręczny
|
||||
</TabsTrigger>
|
||||
</Tabs>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-0">
|
||||
<TabsContent isActive={selectedTab === 0}>
|
||||
<div className="p-6">
|
||||
<Generator />
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent isActive={selectedTab === 1}>
|
||||
<div className="p-6">
|
||||
<Manual />
|
||||
</div>
|
||||
</TabsContent>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Info Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-blue-100 rounded-lg">
|
||||
<ChartBarIcon className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">Automatyczny</h3>
|
||||
<p className="text-sm text-gray-600">Import danych z Geoportalu</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-green-100 rounded-lg">
|
||||
<PencilIcon className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">Ręczny</h3>
|
||||
<p className="text-sm text-gray-600">Wprowadź punkty manualnie</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="p-2 bg-purple-100 rounded-lg">
|
||||
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">Export DXF</h3>
|
||||
<p className="text-sm text-gray-600">Pobierz gotowy rysunek</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid place-items-center h-screen">
|
||||
<Head>
|
||||
<title>Wastpol</title>
|
||||
</Head>
|
||||
<div className="flex flex-col justify-center">
|
||||
<h2 className="p-2">Nie zalogowano</h2>
|
||||
<br></br>
|
||||
<Button
|
||||
onClick={() => signIn()}
|
||||
appearance="primary"
|
||||
// className="p-2 bg-slate-200 rounded-md"
|
||||
>
|
||||
Zaloguj
|
||||
</Button>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="text-center">
|
||||
<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
<img src="/logo.png" alt="Wastpol" className="w-10 h-10" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Zaloguj się</CardTitle>
|
||||
<p className="text-gray-600 mt-2">Uzyskaj dostęp do narzędzi inżynierskich</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button
|
||||
onClick={() => signIn()}
|
||||
className="w-full"
|
||||
size="lg"
|
||||
>
|
||||
<LoginIcon className="w-5 h-5 mr-2" />
|
||||
Zaloguj się
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user