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:
132
UI_REDESIGN_PROPOSAL.md
Normal file
132
UI_REDESIGN_PROPOSAL.md
Normal file
@@ -0,0 +1,132 @@
|
||||
# Wastpol UI Redesign Proposal
|
||||
|
||||
## Overview
|
||||
This UI redesign modernizes the Wastpol electrical engineering application with a contemporary, professional interface while maintaining all existing functionality.
|
||||
|
||||
## Key Improvements
|
||||
|
||||
### 🎨 **Visual Design**
|
||||
- **Modern Color Palette**: Professional blue-based theme with proper contrast ratios
|
||||
- **Typography**: Inter font family for improved readability
|
||||
- **Consistent Spacing**: Systematic spacing scale using Tailwind CSS
|
||||
- **Enhanced Shadows**: Subtle depth with layered shadow system
|
||||
- **Better Visual Hierarchy**: Clear information architecture with proper heading levels
|
||||
|
||||
### 📱 **Responsive Layout**
|
||||
- **Mobile-First Design**: Optimized for all screen sizes
|
||||
- **Sidebar Navigation**: Collapsible sidebar for desktop, drawer for mobile
|
||||
- **Adaptive Grid**: Responsive card layouts that adjust to screen size
|
||||
- **Touch-Friendly**: Proper touch targets for mobile devices
|
||||
|
||||
### 🎯 **User Experience**
|
||||
- **Simplified Navigation**: Clear, icon-based navigation with active states
|
||||
- **Progress Indicators**: Loading states and progress feedback
|
||||
- **Better Form Design**: Improved input styling with proper validation states
|
||||
- **Interactive Elements**: Hover effects and smooth transitions
|
||||
- **Card-Based Layout**: Organized content in digestible sections
|
||||
|
||||
### ⚡ **Performance & Accessibility**
|
||||
- **Semantic HTML**: Proper heading structure and ARIA labels
|
||||
- **Keyboard Navigation**: Full keyboard accessibility
|
||||
- **Color Contrast**: WCAG 2.1 AA compliant color combinations
|
||||
- **Focus Management**: Clear focus indicators
|
||||
- **Screen Reader Support**: Proper labeling and descriptions
|
||||
|
||||
## New Components
|
||||
|
||||
### Layout System
|
||||
- **Layout.js**: Unified layout component with responsive sidebar
|
||||
- **components.js**: Reusable UI components (Card, Button, Input, etc.)
|
||||
|
||||
### Key Features
|
||||
|
||||
#### 1. Unified Navigation
|
||||
- Logo and branding in header
|
||||
- Clear section navigation (Przekrój, Siatka, Uziomy)
|
||||
- User authentication status
|
||||
- Responsive mobile menu
|
||||
|
||||
#### 2. Enhanced Cards
|
||||
- Clean card design with headers and content sections
|
||||
- Proper spacing and typography
|
||||
- Action buttons with loading states
|
||||
- Status indicators and badges
|
||||
|
||||
#### 3. Improved Forms
|
||||
- Better input styling with floating labels
|
||||
- Proper validation states
|
||||
- Radio groups and select inputs
|
||||
- Date picker integration
|
||||
|
||||
#### 4. Better Feedback
|
||||
- Loading spinners for async operations
|
||||
- Success/error alerts with proper styling
|
||||
- Progress indicators
|
||||
- Toast notifications
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
### Dependencies Added
|
||||
- `@heroicons/react`: Modern icon system
|
||||
- `@tailwindcss/forms`: Enhanced form styling
|
||||
|
||||
### File Structure
|
||||
```
|
||||
components/
|
||||
ui/
|
||||
Layout.js # Main layout wrapper
|
||||
components.js # Reusable UI components
|
||||
templates/
|
||||
generator_new.js # Updated terrain profile generator
|
||||
manual_new.js # Updated manual input component
|
||||
pages/
|
||||
cross_new.js # Updated grid generator page
|
||||
uziomy_new.js # Updated grounding calculator page
|
||||
```
|
||||
|
||||
### Color System
|
||||
- **Primary**: Blue (#3B82F6) for main actions
|
||||
- **Secondary**: Gray tones for secondary elements
|
||||
- **Success**: Green for positive states
|
||||
- **Warning**: Yellow for attention states
|
||||
- **Error**: Red for error states
|
||||
|
||||
### Typography Scale
|
||||
- **Headings**: Inter font with proper weight hierarchy
|
||||
- **Body**: 14px base with good line height
|
||||
- **Code**: Monospace for technical data input
|
||||
|
||||
## Benefits
|
||||
|
||||
### For Users
|
||||
- **Easier Navigation**: Intuitive interface reduces learning curve
|
||||
- **Better Mobile Experience**: Responsive design works on all devices
|
||||
- **Faster Workflows**: Streamlined forms and clear action buttons
|
||||
- **Professional Appearance**: Modern design builds trust and credibility
|
||||
|
||||
### For Developers
|
||||
- **Component Reusability**: Consistent design system
|
||||
- **Maintainable Code**: Clean component architecture
|
||||
- **Modern Stack**: Latest design practices and tools
|
||||
- **Scalable System**: Easy to extend and modify
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
### Backward Compatibility
|
||||
- Original files preserved (can switch back if needed)
|
||||
- New files use `_new.js` suffix for testing
|
||||
- API endpoints remain unchanged
|
||||
- All functionality preserved
|
||||
|
||||
### Migration Path
|
||||
1. Test new components in development
|
||||
2. Gradually replace old components
|
||||
3. Update remaining templates to match new design
|
||||
4. Remove old components once migration complete
|
||||
|
||||
### Browser Support
|
||||
- Modern browsers (Chrome, Firefox, Safari, Edge)
|
||||
- Mobile browsers (iOS Safari, Chrome Mobile)
|
||||
- Progressive enhancement for older browsers
|
||||
|
||||
This redesign transforms Wastpol into a modern, professional application that enhances user productivity while maintaining all existing engineering capabilities.
|
||||
39
archive/README.md
Normal file
39
archive/README.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# Archive - Old UI Components
|
||||
|
||||
This folder contains the original versions of components and pages that were replaced during the UI redesign.
|
||||
|
||||
## Archived Files
|
||||
|
||||
### Pages
|
||||
- `cross_old.js` - Original cross-section generator page
|
||||
- `uziomy_old.js` - Original grounding calculator page
|
||||
|
||||
### Components
|
||||
- `templates/generator_old.js` - Original profile generator component
|
||||
- `templates/manual_old.js` - Original manual input component
|
||||
|
||||
## What Changed
|
||||
|
||||
The archived files used the old UI system with:
|
||||
- Evergreen UI components
|
||||
- Older styling approach
|
||||
- Less responsive design
|
||||
- Basic user interface
|
||||
|
||||
The new versions (now default) feature:
|
||||
- Modern Tailwind CSS design system
|
||||
- Responsive layout with sidebar navigation
|
||||
- Custom UI components (`components/ui/`)
|
||||
- Improved user experience
|
||||
- Heroicons v2 integration
|
||||
- Better mobile support
|
||||
|
||||
## Restoration
|
||||
|
||||
If you need to restore an old version, you can:
|
||||
1. Copy the desired file from this archive
|
||||
2. Rename it to remove the `_old` suffix
|
||||
3. Replace the current version in the main project
|
||||
|
||||
## Date Archived
|
||||
Archived on: July 1, 2025
|
||||
231
archive/components/templates/generator_old.js
Normal file
231
archive/components/templates/generator_old.js
Normal file
@@ -0,0 +1,231 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import {
|
||||
Pane,
|
||||
TextInputField,
|
||||
TextareaField,
|
||||
Button,
|
||||
BuildIcon,
|
||||
toaster,
|
||||
Alert,
|
||||
RadioGroup,
|
||||
} from "evergreen-ui";
|
||||
import axios from "axios";
|
||||
|
||||
import Footer from "./footer";
|
||||
|
||||
export default function Generator() {
|
||||
const [profil, setProfil] = useState();
|
||||
const [args, setArgs] = useState({
|
||||
scale: 200,
|
||||
elementOne: 0,
|
||||
elementTwo: 0,
|
||||
});
|
||||
const [ElementOneOptions] = useState([
|
||||
{ label: "Nic", value: "0" },
|
||||
{ label: "Słup", value: "1" },
|
||||
{ label: "Dom", value: "2" },
|
||||
]);
|
||||
const [ElementTwoOptions] = useState([
|
||||
{ label: "Nic", value: "0" },
|
||||
{ label: "Słup", value: "1" },
|
||||
{ label: "Dom", value: "2" },
|
||||
]);
|
||||
const { query } = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (query.external == "tru") {
|
||||
axios
|
||||
.post("/api/readtext", {
|
||||
id: query.id,
|
||||
})
|
||||
.then(function (response) {
|
||||
setProfil(response.data.data);
|
||||
document.getElementById("textarea-1").value = response.data.data;
|
||||
console.log(response.data.data);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getPath = (e, path) => {
|
||||
let newLines = [];
|
||||
|
||||
for (let line of path.split("\n")) {
|
||||
if (line[0] == "P") continue;
|
||||
if (line[0] == "S") continue;
|
||||
if (line[0] == "X") continue;
|
||||
|
||||
newLines.push(line);
|
||||
}
|
||||
let xs = [];
|
||||
let ys = [];
|
||||
let zs = [];
|
||||
let toti = 0;
|
||||
let al = 0;
|
||||
for (let line of newLines) {
|
||||
al += 1;
|
||||
let theLine = line.split(",");
|
||||
//console.log(theLine)
|
||||
if (
|
||||
xs &&
|
||||
parseFloat(theLine[0]) == xs[-1] &&
|
||||
parseFloat(theLine[1]) == ys[-1]
|
||||
)
|
||||
continue;
|
||||
|
||||
if (al > 2) {
|
||||
let dist =
|
||||
((xs[xs.length - 1] - xs[xs.length - 2]) ** 2 +
|
||||
(ys[ys.length - 1] - ys[ys.length - 2]) ** 2) **
|
||||
0.5;
|
||||
toti += Math.round(dist);
|
||||
}
|
||||
xs.push(parseFloat(theLine[0]));
|
||||
ys.push(parseFloat(theLine[1]));
|
||||
zs.push(parseFloat(theLine[2]));
|
||||
}
|
||||
let prevLine = ["0", "0", "0"];
|
||||
let scaleFactor = 100000 / 2000;
|
||||
const canvas = document.getElementById("canvas");
|
||||
|
||||
if (!canvas.getContext) {
|
||||
console.log("canvas err");
|
||||
toaster.warning("canvas err");
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.clearRect(0, 0, 700, 700);
|
||||
|
||||
// set line stroke and line width
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.lineWidth = 2;
|
||||
let totalH = Math.max(...zs);
|
||||
let minH = Math.min(...zs);
|
||||
for (let line = 0; line < xs.length - 1; line++) {
|
||||
let theLine = [xs[line], ys[line], zs[line]];
|
||||
let x = parseFloat(theLine[0]) - parseFloat(prevLine[0]);
|
||||
let y = parseFloat(theLine[1]) - parseFloat(prevLine[1]);
|
||||
let x1 = line * scaleFactor;
|
||||
let y1 = zs[line];
|
||||
let x2 = (line + 1) * scaleFactor;
|
||||
let y2 = zs[line + 1];
|
||||
//console.log(x1, y1, x2, y2);
|
||||
let b0 = 0;
|
||||
let b1 = 500;
|
||||
let z1 = b0 + (b1 - b0) * ((y1 - totalH) / (minH - totalH));
|
||||
let z2 = b0 + (b1 - b0) * ((y2 - totalH) / (minH - totalH));
|
||||
|
||||
//b0 + (b1 - b0) * ((x1-0)/(toti*scaleFactor-0));
|
||||
let x12 = b0 + (b1 - b0) * ((x1 - 0) / (toti * scaleFactor));
|
||||
let x22 = b0 + (b1 - b0) * ((x2 - 0) / (toti * scaleFactor));
|
||||
//console.log(x12);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x12, z1);
|
||||
ctx.lineTo(x22, z2);
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
const parsePreview = (e) => {
|
||||
// console.log(dxf);
|
||||
};
|
||||
|
||||
const py = (e, profil, args) => {
|
||||
e.preventDefault();
|
||||
|
||||
axios
|
||||
.post("/api/spawn", {
|
||||
profil: profil,
|
||||
arguments: args,
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log(response);
|
||||
if (response.data.toString().startsWith("Py Error")) {
|
||||
toaster.danger(response.data);
|
||||
return;
|
||||
}
|
||||
toaster.warning(response.data.data);
|
||||
document.getElementById("down").download =
|
||||
response.data.filename.toString() + ".dxf";
|
||||
document.getElementById("down").click();
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div className="flex xl:flex-row flex-col">
|
||||
<div className="flex flex-col">
|
||||
<Pane width={480}>
|
||||
<TextareaField
|
||||
id="textarea-1"
|
||||
label="Dane z Geoportalu:"
|
||||
placeholder="Próbkowanie: 1 ..."
|
||||
onChange={(e) => {
|
||||
//console.log(e.target.value);
|
||||
setProfil(e.target.value);
|
||||
parsePreview(e);
|
||||
getPath(e, e.target.value);
|
||||
}}
|
||||
/>
|
||||
|
||||
<TextInputField
|
||||
label="Skala:"
|
||||
placeholder="200"
|
||||
width={100}
|
||||
onChange={(e) => {
|
||||
console.log(e.target.value);
|
||||
setArgs({ ...args, scale: e.target.value });
|
||||
}}
|
||||
/>
|
||||
<RadioGroup
|
||||
label="Lewa"
|
||||
value={args.elementOne}
|
||||
options={ElementOneOptions}
|
||||
onChange={(event) => {
|
||||
setArgs({ ...args, elementOne: event.target.value });
|
||||
}}
|
||||
/>
|
||||
<RadioGroup
|
||||
label="Prawa"
|
||||
value={args.elementTwo}
|
||||
options={ElementTwoOptions}
|
||||
onChange={(event) => {
|
||||
setArgs({ ...args, elementTwo: event.target.value });
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
marginY={8}
|
||||
marginRight={12}
|
||||
appearance="default"
|
||||
iconAfter={BuildIcon}
|
||||
onClick={(e) => {
|
||||
if (document.getElementById("textarea-1").value == "") {
|
||||
toaster.danger("Pole danych nie może być puste");
|
||||
} else if (
|
||||
!document
|
||||
.getElementById("textarea-1")
|
||||
.value.startsWith("Próbkowanie")
|
||||
) {
|
||||
toaster.danger("Błędne dane");
|
||||
} else {
|
||||
py(e, profil, args);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Generuj
|
||||
</Button>
|
||||
</Pane>
|
||||
|
||||
<a href="test.dxf" download="test.dxf" id="down">
|
||||
{" "}
|
||||
</a>
|
||||
</div>
|
||||
<Pane className="ml-8 shadow-md rounded-md">
|
||||
<canvas id="canvas" height="500" width="700"></canvas>
|
||||
</Pane>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
157
archive/components/templates/manual_old.js
Normal file
157
archive/components/templates/manual_old.js
Normal file
@@ -0,0 +1,157 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Pane,
|
||||
TextInputField,
|
||||
TextareaField,
|
||||
Button,
|
||||
toaster,
|
||||
Alert,
|
||||
TrashIcon,
|
||||
Icon,
|
||||
} from "evergreen-ui";
|
||||
import axios from "axios";
|
||||
import Footer from "./footer";
|
||||
import Generator from "./generator";
|
||||
|
||||
export default function Manual() {
|
||||
const [points, setPoints] = useState([{ id: 0, len: 0, height: 0 }]);
|
||||
const [args, setArgs] = useState({ scale: 200 });
|
||||
|
||||
//useEffect(() => {
|
||||
//do something here
|
||||
// }, [points]);
|
||||
|
||||
const reIndex = () => {
|
||||
let newId = 0;
|
||||
let newPoints = [];
|
||||
for (let point of points) {
|
||||
point.id = newId;
|
||||
newPoints.push(point);
|
||||
newId += 1;
|
||||
}
|
||||
setPoints([...newPoints]);
|
||||
};
|
||||
|
||||
const generation = (e) => {
|
||||
let pointString = "Próbkowanie: 1\nSegment 0: w dół\nX: Y, Z";
|
||||
|
||||
for (let point of points) {
|
||||
pointString += "\n";
|
||||
pointString += Number(point.len) * 1.0;
|
||||
pointString += ", 1.0, ";
|
||||
pointString += point.height;
|
||||
}
|
||||
|
||||
console.log(pointString);
|
||||
py(e, pointString, args);
|
||||
};
|
||||
|
||||
const py = (e, profil, args) => {
|
||||
e.preventDefault();
|
||||
|
||||
axios
|
||||
.post("/api/spawn", {
|
||||
profil: profil,
|
||||
arguments: args,
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log(response);
|
||||
if (response.data.toString().startsWith("Py Error")) {
|
||||
toaster.danger(response.data);
|
||||
return;
|
||||
}
|
||||
toaster.warning(response.data.data);
|
||||
document.getElementById("down").download =
|
||||
response.data.filename.toString() + ".dxf";
|
||||
document.getElementById("down").click();
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex xl:flex-row flex-col">
|
||||
<div className="flex flex-col">
|
||||
<Pane width={480}>
|
||||
{points.map((point, index) => (
|
||||
<Pane className="flex flex-row items-center">
|
||||
<TextInputField
|
||||
id={`len-${index}`}
|
||||
placeholder="0 m"
|
||||
onChange={(e) => {
|
||||
console.log(e.target.value);
|
||||
let newPoints = points;
|
||||
newPoints[index].len = e.target.value;
|
||||
setPoints([...newPoints]);
|
||||
}}
|
||||
value={point.len}
|
||||
></TextInputField>
|
||||
<TextInputField
|
||||
id={`h-${index}`}
|
||||
placeholder="0 m n.p.m."
|
||||
onChange={(e) => {
|
||||
console.log(e.target.value);
|
||||
let newPoints = points;
|
||||
newPoints[index].height = e.target.value;
|
||||
setPoints([...newPoints]);
|
||||
}}
|
||||
value={point.height}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key == "Enter") {
|
||||
setPoints([
|
||||
...points,
|
||||
{
|
||||
id: points.length,
|
||||
len: Number(points[points.length - 1].len) + 1,
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
|
||||
let nextDiv = e.target.parentNode.parentNode.nextSibling;
|
||||
nextDiv.childNodes[1].childNodes[1].focus()
|
||||
nextDiv.childNodes[1].childNodes[1].setSelectionRange(0, 1)
|
||||
}
|
||||
}}
|
||||
></TextInputField>
|
||||
<Button
|
||||
className="mb-5"
|
||||
appearance="minimal"
|
||||
onClick={() => {
|
||||
let newPoints = points;
|
||||
newPoints.splice(index, 1);
|
||||
setPoints([...newPoints]);
|
||||
reIndex();
|
||||
}}
|
||||
>
|
||||
<Icon icon={TrashIcon} color="danger"></Icon>
|
||||
</Button>
|
||||
</Pane>
|
||||
))}
|
||||
</Pane>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setPoints([
|
||||
...points,
|
||||
{
|
||||
id: points.length,
|
||||
len: Number(points[points.length - 1].len) + 1,
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
>
|
||||
Dodaj
|
||||
</Button>
|
||||
<Button
|
||||
appearance="primary"
|
||||
onClick={(e) => {
|
||||
generation(e);
|
||||
}}
|
||||
>
|
||||
Generuj
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
178
archive/pages/cross_old.js
Normal file
178
archive/pages/cross_old.js
Normal file
@@ -0,0 +1,178 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import { useSession, signIn } from "next-auth/react";
|
||||
import Layout from "../components/ui/Layout";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Alert } from "../components/ui/components";
|
||||
import {
|
||||
FileUploader,
|
||||
FileCard,
|
||||
} from "evergreen-ui";
|
||||
import { CloudArrowUpIcon as CloudUploadIcon, ArrowDownTrayIcon as DownloadIcon, Squares2X2Icon as GridIcon } from '@heroicons/react/24/outline';
|
||||
import axios from "axios";
|
||||
|
||||
export default function Cross() {
|
||||
const { data: session } = useSession();
|
||||
|
||||
const [fileData, setFileData] = useState(null);
|
||||
const handleDownload = () => {
|
||||
console.log("down");
|
||||
if (fileData) {
|
||||
console.log("load");
|
||||
// const link = document.createElement("a");
|
||||
// link.href = `data:application/octet-stream;base64,${fileData}`;
|
||||
// link.download = "plik.dxf";
|
||||
// link.click();
|
||||
document.getElementById("down").download = fileData.filename;
|
||||
console.log(fileData.filename)
|
||||
|
||||
document.getElementById("down").href = "cross.dxf";
|
||||
console.log("cross.dxf")
|
||||
|
||||
document.getElementById("down").click();
|
||||
}
|
||||
};
|
||||
|
||||
const [files, setFiles] = useState([]);
|
||||
const [fileRejections, setFileRejections] = useState([]);
|
||||
const handleChange = useCallback((files) => setFiles([files[0]]), []);
|
||||
const handleRejected = useCallback(
|
||||
(fileRejections) => setFileRejections([fileRejections[0]]),
|
||||
[]
|
||||
);
|
||||
const handleRemove = useCallback(() => {
|
||||
setFiles([]);
|
||||
setFileRejections([]);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
let file = files[0];
|
||||
|
||||
if (!file) {
|
||||
// Handle error if no file is selected
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
axios
|
||||
.post("/api/upload", formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response.data);
|
||||
if (response.data.toString().startsWith("Py Error")) {
|
||||
toaster.danger(response.data);
|
||||
return;
|
||||
}
|
||||
toaster.warning(response.statusText);
|
||||
console.log(response.data)
|
||||
setFileData(response.data);
|
||||
document.getElementById("download").disabled = false;
|
||||
|
||||
// document.getElementById("down").download =
|
||||
// response.data.filename.toString().split(".")[0].split("-")[1]+"_s.dxf";
|
||||
// document.getElementById("down").href =
|
||||
// "uploads/"+response.data.filename.toString().split(".")[0]+"_s.dxf";
|
||||
// document.getElementById("down").click();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
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">
|
||||
<FileUploader
|
||||
label="Prześlij plik"
|
||||
description="Możesz dodać 1 plik, max 50 MB."
|
||||
maxSizeInBytes={50 * 1024 ** 2}
|
||||
maxFiles={1}
|
||||
onChange={handleChange}
|
||||
onRejected={handleRejected}
|
||||
renderFile={(file) => {
|
||||
const { name, size, type } = file;
|
||||
const fileRejection = fileRejections.find(
|
||||
(fileRejection) => fileRejection.file === file
|
||||
);
|
||||
const { message } = fileRejection || {};
|
||||
return (
|
||||
<FileCard
|
||||
key={name}
|
||||
isInvalid={fileRejection != null}
|
||||
name={name}
|
||||
onRemove={handleRemove}
|
||||
sizeInBytes={size}
|
||||
type={type}
|
||||
validationMessage={message}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
values={files}
|
||||
/>
|
||||
|
||||
<Button
|
||||
marginY={8}
|
||||
marginRight={12}
|
||||
appearance="default"
|
||||
iconAfter={BuildIcon}
|
||||
onClick={(e) => {
|
||||
console.log("louding begins");
|
||||
console.log(files);
|
||||
document.getElementById("download").disabled = false;
|
||||
handleSubmit(e);
|
||||
}}
|
||||
>
|
||||
Dodaj siatkę
|
||||
</Button>
|
||||
<Button
|
||||
id="download"
|
||||
marginY={8}
|
||||
marginRight={12}
|
||||
appearance="default"
|
||||
iconAfter={BuildIcon}
|
||||
// disabled={true}
|
||||
onClick={handleDownload}
|
||||
>
|
||||
Pobierz
|
||||
</Button>
|
||||
<a href="the.dxf" download="the.dxf" id="down">
|
||||
{" "}
|
||||
</a>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
551
archive/pages/uziomy_old.js
Normal file
551
archive/pages/uziomy_old.js
Normal file
@@ -0,0 +1,551 @@
|
||||
import Head from "next/head";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import Nav from "../components/templates/nav";
|
||||
import UserTop from "../components/templates/userTop";
|
||||
import { useSession, signIn, signOut } from "next-auth/react";
|
||||
import { useState, useCallback } from "react";
|
||||
import {
|
||||
Pane,
|
||||
TextInputField,
|
||||
TextareaField,
|
||||
Button,
|
||||
BuildIcon,
|
||||
toaster,
|
||||
Alert,
|
||||
FileUploader,
|
||||
FilePicker,
|
||||
FileCard,
|
||||
RadioGroup,
|
||||
Autocomplete,
|
||||
} from "evergreen-ui";
|
||||
|
||||
import PizZip from "pizzip";
|
||||
import Docxtemplater from "docxtemplater";
|
||||
import DatePicker from "react-datepicker";
|
||||
import { registerLocale, setDefaultLocale } from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import pl from "date-fns/locale/pl";
|
||||
registerLocale("pl", pl);
|
||||
|
||||
export default function Rezy() {
|
||||
const { data: session } = useSession();
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
|
||||
const [ground, setGround] = useState({
|
||||
wet_coef: 0,
|
||||
resistivity: 0,
|
||||
resistance: 0,
|
||||
measure_dist: 0,
|
||||
rod_len: 0,
|
||||
rod_num: 0,
|
||||
rod_coef: 0,
|
||||
hor_len: 0,
|
||||
result_v: 0,
|
||||
result_h: 0,
|
||||
result: 0,
|
||||
wszrg_h: 0,
|
||||
wszrg_v: 0,
|
||||
wanted: 0,
|
||||
date: undefined,
|
||||
no: 0,
|
||||
pr_title: "Budowa przyłącza kablowego nN",
|
||||
in_city: undefined,
|
||||
commune: undefined,
|
||||
all_parcels: undefined,
|
||||
target_parcel: undefined,
|
||||
geo_data: undefined,
|
||||
object: "Przyłącz kablowy nN",
|
||||
objValue1: "proj.",
|
||||
objName: undefined,
|
||||
});
|
||||
|
||||
// Function to go to the next step
|
||||
const goToNextStep = () => {
|
||||
if (currentStep < 3) {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}
|
||||
};
|
||||
|
||||
// Function to go to the previous step
|
||||
const goToPreviousStep = () => {
|
||||
if (currentStep > 1) {
|
||||
setCurrentStep(currentStep - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const [date, setDate] = useState(null);
|
||||
const [calDate, setCalDate] = useState(null);
|
||||
|
||||
const [options] = useState([
|
||||
{ label: "5 Ω", value: "5" },
|
||||
{ label: "10 Ω", value: "10" },
|
||||
{ label: "15 Ω", value: "15" },
|
||||
{ label: "30 Ω", value: "30" },
|
||||
]);
|
||||
const [neededValue, setNeededValue] = useState("5");
|
||||
|
||||
const [resHValue, setResHValue] = useState("88");
|
||||
const [resVValue, setResVValue] = useState("89");
|
||||
|
||||
const [objOptions1] = useState([
|
||||
{ label: "proj.", value: "proj." },
|
||||
{ label: "istn.", value: "istn." },
|
||||
]);
|
||||
const [objValue1, setObjValue1] = useState("proj.");
|
||||
|
||||
function getRandomInt(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function parseDate(dateString) {
|
||||
console.log(dateString);
|
||||
const parts = dateString.split(".");
|
||||
const day = parseInt(parts[0], 10);
|
||||
const month = parseInt(parts[1], 10) - 1; // Months are 0-indexed in JavaScript Dates
|
||||
const year = parseInt(parts[2], 10);
|
||||
return new Date(year, month, day);
|
||||
}
|
||||
|
||||
function getGrounding(wanted, wszrg_h, wszrg_v, date) {
|
||||
const dateObject = parseDate(date);
|
||||
const month = dateObject.getMonth() + 1; // JavaScript months are 0-indexed
|
||||
|
||||
const wet_coef = month >= 6 && month <= 9 ? 1.2 : 1.6;
|
||||
const rod_len = wanted === 30 ? 2 : 3;
|
||||
|
||||
const resistivity_h = wszrg_h / wet_coef;
|
||||
const measure_dist_h = 1;
|
||||
const resistance_h = resistivity_h / (2 * Math.PI * measure_dist_h);
|
||||
|
||||
const resistivity_v = wszrg_v / wet_coef;
|
||||
const measure_dist_v = 1 + rod_len;
|
||||
const resistance_v = resistivity_v / (2 * Math.PI * measure_dist_v);
|
||||
|
||||
const result_v =
|
||||
(wszrg_v / (2 * Math.PI * rod_len)) *
|
||||
(Math.log((8 * rod_len) / 0.016) - 1);
|
||||
|
||||
let rod_num = 2; //minimum 2 rods
|
||||
|
||||
let hor_len = 1 + (rod_num - 1) * rod_len * 2;
|
||||
|
||||
let result_h =
|
||||
(wszrg_h / (2 * Math.PI * hor_len)) *
|
||||
Math.log((hor_len * hor_len) / (1 * 0.0191));
|
||||
|
||||
let rod_coef =
|
||||
Math.pow(rod_num, 4) * 0.00002 -
|
||||
Math.pow(rod_num, 3) * 0.0009 +
|
||||
Math.pow(rod_num, 2) * 0.0137 -
|
||||
rod_num * 0.0981 +
|
||||
1.0468;
|
||||
|
||||
let result =
|
||||
(result_v * result_h) /
|
||||
(result_v * rod_coef + rod_num * result_h * rod_coef);
|
||||
|
||||
while (result > wanted) {
|
||||
rod_num += 1;
|
||||
|
||||
hor_len = 1 + (rod_num - 1) * rod_len * 2;
|
||||
|
||||
result_h =
|
||||
(wszrg_h / (2 * Math.PI * hor_len)) *
|
||||
Math.log((hor_len * hor_len) / (1 * 0.0191));
|
||||
|
||||
rod_coef =
|
||||
Math.pow(rod_num, 4) * 0.00002 -
|
||||
Math.pow(rod_num, 3) * 0.0009 +
|
||||
Math.pow(rod_num, 2) * 0.0137 -
|
||||
rod_num * 0.0981 +
|
||||
1.0468;
|
||||
|
||||
result =
|
||||
(result_v * result_h) /
|
||||
(result_v * rod_coef + rod_num * result_h * rod_coef);
|
||||
|
||||
console.log(result, rod_num);
|
||||
}
|
||||
|
||||
console.log(result, rod_num);
|
||||
return {
|
||||
wet_coef: wet_coef,
|
||||
resistivity_h: resistivity_h.toFixed(2),
|
||||
resistance_h: resistance_h.toFixed(2),
|
||||
measure_dist_h: measure_dist_h,
|
||||
resistivity_v: resistivity_v.toFixed(2),
|
||||
resistance_v: resistance_v.toFixed(2),
|
||||
measure_dist_v: measure_dist_v,
|
||||
rod_len: rod_len,
|
||||
rod_num: rod_num,
|
||||
rod_coef: rod_coef.toFixed(2),
|
||||
hor_len: hor_len,
|
||||
result_v: result_v.toFixed(2),
|
||||
result_h: result_h.toFixed(2),
|
||||
result: result.toFixed(2),
|
||||
wszrg_h: wszrg_h,
|
||||
wszrg_v: wszrg_v,
|
||||
wanted: neededValue,
|
||||
};
|
||||
}
|
||||
|
||||
const generateDocument = async (ground) => {
|
||||
const data = {
|
||||
...ground,
|
||||
resisted_object: ground.objValue1 + " " + ground.objName,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/generateDocx", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error: ${response.status}`);
|
||||
}
|
||||
|
||||
// Convert the response to a blob and download it
|
||||
const blob = await response.blob();
|
||||
const downloadUrl = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = downloadUrl;
|
||||
link.download = "opis.docx";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
} catch (error) {
|
||||
console.error("Failed to generate document:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const generateDxf = async () => {
|
||||
// Data that you want to send to the backend
|
||||
var dateParts = ground.date.split(".");
|
||||
|
||||
// Extract day, month, and year
|
||||
var day = parseInt(dateParts[0], 10);
|
||||
var month = parseInt(dateParts[1], 10);
|
||||
var year = parseInt(dateParts[2], 10);
|
||||
|
||||
// Format the result
|
||||
var formattedDate = month.toString().padStart(2, "0") + "." + year;
|
||||
const inputData = {
|
||||
args: [
|
||||
ground.objValue1 + ground.objName,
|
||||
ground.pr_title,
|
||||
ground.object,
|
||||
ground.in_city +
|
||||
", " +
|
||||
ground.commune +
|
||||
", dz. nr " +
|
||||
ground.all_parcels,
|
||||
formattedDate,
|
||||
ground.hor_len,
|
||||
ground.rod_len,
|
||||
],
|
||||
};
|
||||
// object1 = args[0] #ZK2a-1P
|
||||
// object2 = args[1] #Budowa przyłącza
|
||||
// object3 = args[2] #Przyłącze kablowe
|
||||
// adres = args[3]
|
||||
// date = args[4]
|
||||
// len_h = int(args[5])
|
||||
// len_v = int(args[6])
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/generateDxf", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(inputData),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Response was not ok.");
|
||||
}
|
||||
|
||||
// Download the response (the output file)
|
||||
const blob = await response.blob();
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = downloadUrl;
|
||||
a.download = "uziom.dxf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
} catch (error) {
|
||||
console.error("There was an error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
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-row m-24 space-x-24">
|
||||
<div>
|
||||
1. Data wykonania pomiaru
|
||||
<br />
|
||||
<br />
|
||||
<b className="m-4">
|
||||
<DatePicker
|
||||
locale="pl"
|
||||
selected={calDate}
|
||||
onChange={(date) => {
|
||||
console.log(date);
|
||||
console.log(typeof date);
|
||||
const day = date.getDate().toString().padStart(2, "0"); // Add leading zero if necessary
|
||||
const month = (date.getMonth() + 1)
|
||||
.toString()
|
||||
.padStart(2, "0"); // Month is 0-indexed, add 1 to get the correct month
|
||||
const year = date.getFullYear();
|
||||
const formattedDate = `${day}.${month}.${year}`;
|
||||
console.log(formattedDate);
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
date: formattedDate,
|
||||
}));
|
||||
setCalDate(date);
|
||||
}}
|
||||
placeholderText="Wybierz datę"
|
||||
dateFormat="dd.MM.yyyy"
|
||||
/>
|
||||
</b>
|
||||
<br />
|
||||
<br />
|
||||
<RadioGroup
|
||||
label="2. Wymagane uziemienie"
|
||||
size={16}
|
||||
value={neededValue}
|
||||
options={options}
|
||||
onChange={(event) => {
|
||||
setNeededValue(event.target.value);
|
||||
}}
|
||||
/>
|
||||
<TextInputField
|
||||
label="3. Rezystywność gruntu (po korekcie wszrg)"
|
||||
description="typowo 80-150"
|
||||
placeholder="86"
|
||||
onChange={(e) => {
|
||||
setResHValue(e.target.value);
|
||||
setResVValue((ground.wanted==30)?
|
||||
getRandomInt(
|
||||
parseInt(e.target.value) - 10,
|
||||
parseInt(e.target.value) - 4
|
||||
):getRandomInt(
|
||||
parseInt(e.target.value) - 20,
|
||||
parseInt(e.target.value) - 10
|
||||
)
|
||||
|
||||
);
|
||||
}}
|
||||
value={resHValue}
|
||||
/>
|
||||
<TextInputField
|
||||
label="4. Numer protokołu rezystywności gruntu"
|
||||
// description=""
|
||||
placeholder="435"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({ ...current, no: e.target.value }))
|
||||
}
|
||||
value={ground.no}
|
||||
/>{" "}
|
||||
</div>
|
||||
<div>
|
||||
<TextInputField
|
||||
label="5. Tytuł projektu"
|
||||
description="Budowa/modernizacja przyłącza/sieci kablowej/napowietrznej"
|
||||
placeholder="Budowa przyłącza kablowego nN"
|
||||
width={440}
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
pr_title: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.pr_title}
|
||||
/>
|
||||
<TextInputField
|
||||
label="6. Obiekt"
|
||||
// description=""
|
||||
placeholder="Przyłącz kablowy nN"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
object: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.object}
|
||||
/>
|
||||
<TextInputField
|
||||
label="7. Miejscowość"
|
||||
// description=""
|
||||
placeholder="Paszyn"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
in_city: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.in_city}
|
||||
/>
|
||||
<TextInputField
|
||||
label="8. Gmina/Obręb"
|
||||
// description=""
|
||||
placeholder="gm. Chełmiec lub obr. 116"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
commune: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.commune}
|
||||
/>
|
||||
<TextInputField
|
||||
label="9. Działki"
|
||||
// description=""
|
||||
placeholder="Wszystkie numery działek"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
all_parcels: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.all_parcels}
|
||||
/>
|
||||
<TextInputField
|
||||
label="10. Działka przyłączana"
|
||||
// description=""
|
||||
placeholder="423"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
target_parcel: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.target_parcel}
|
||||
/>
|
||||
<TextInputField
|
||||
label="11. Współrzędne układu uziomowego"
|
||||
// description=""
|
||||
placeholder={"49°42'54\"N 20°38'0\"E"}
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
geo_data: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.geo_data}
|
||||
/>{" "}
|
||||
</div>
|
||||
<div>
|
||||
<RadioGroup
|
||||
label="1. Projektowany/istniejący"
|
||||
size={16}
|
||||
value={objValue1}
|
||||
options={objOptions1}
|
||||
onChange={(event) => {
|
||||
setObjValue1(event.target.value);
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
objValue1: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
<TextInputField
|
||||
label="2. Nazwa uziemianego obiektu"
|
||||
// description=""
|
||||
placeholder={"ZK2a-1P lub słup nr 54"}
|
||||
width={440}
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
objName: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.objName}
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
const res = getGrounding(
|
||||
parseInt(neededValue),
|
||||
parseFloat(resHValue),
|
||||
parseFloat(resVValue),
|
||||
ground.date
|
||||
);
|
||||
setGround((current) => ({ ...current, ...res }));
|
||||
}}
|
||||
appearance="primary"
|
||||
// className="p-2 bg-slate-200 rounded-md"
|
||||
>
|
||||
Oblicz Uziemienie
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
const docx = generateDocument(ground);
|
||||
}}
|
||||
appearance="primary"
|
||||
// className="p-2 bg-slate-200 rounded-md"
|
||||
>
|
||||
Generuj Opis
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={generateDxf}
|
||||
appearance="primary"
|
||||
// className="p-2 bg-slate-200 rounded-md"
|
||||
>
|
||||
Generuj Rysunek
|
||||
</Button>
|
||||
<h2>
|
||||
Uziemienie poziome: {ground.result_h} Ω ({ground.wszrg_h})
|
||||
</h2>
|
||||
<h2>
|
||||
Uziemienie pionowe: {ground.result_v} Ω ({ground.wszrg_v})
|
||||
</h2>
|
||||
<h2>Uziemienie: {ground.result} Ω</h2>
|
||||
<h2>Szpile: {ground.rod_num} szt</h2>
|
||||
<h2>Bednarka: {ground.hor_len} m</h2>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +1,9 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import {
|
||||
Pane,
|
||||
TextInputField,
|
||||
TextareaField,
|
||||
Button,
|
||||
BuildIcon,
|
||||
toaster,
|
||||
Alert,
|
||||
RadioGroup,
|
||||
} from "evergreen-ui";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input, Textarea, Alert } from "../ui/components";
|
||||
import { ChartBarIcon, ArrowDownTrayIcon as DownloadIcon, EyeIcon } from '@heroicons/react/24/outline';
|
||||
import axios from "axios";
|
||||
|
||||
import Footer from "./footer";
|
||||
|
||||
export default function Generator() {
|
||||
const [profil, setProfil] = useState();
|
||||
const [args, setArgs] = useState({
|
||||
@@ -21,18 +11,22 @@ export default function Generator() {
|
||||
elementOne: 0,
|
||||
elementTwo: 0,
|
||||
});
|
||||
const [ElementOneOptions] = useState([
|
||||
{ label: "Nic", value: "0" },
|
||||
{ label: "Słup", value: "1" },
|
||||
{ label: "Dom", value: "2" },
|
||||
]);
|
||||
const [ElementTwoOptions] = useState([
|
||||
{ label: "Nic", value: "0" },
|
||||
{ label: "Słup", value: "1" },
|
||||
{ label: "Dom", value: "2" },
|
||||
]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [previewVisible, setPreviewVisible] = useState(false);
|
||||
const { query } = useRouter();
|
||||
|
||||
const ElementOneOptions = [
|
||||
{ label: "Nic", value: "0" },
|
||||
{ label: "Słup", value: "1" },
|
||||
{ label: "Dom", value: "2" },
|
||||
];
|
||||
|
||||
const ElementTwoOptions = [
|
||||
{ label: "Nic", value: "0" },
|
||||
{ label: "Słup", value: "1" },
|
||||
{ label: "Dom", value: "2" },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (query.external == "tru") {
|
||||
axios
|
||||
@@ -54,86 +48,68 @@ export default function Generator() {
|
||||
if (line[0] == "P") continue;
|
||||
if (line[0] == "S") continue;
|
||||
if (line[0] == "X") continue;
|
||||
|
||||
newLines.push(line);
|
||||
}
|
||||
let xs = [];
|
||||
let ys = [];
|
||||
let zs = [];
|
||||
let toti = 0;
|
||||
let al = 0;
|
||||
|
||||
let xs = [], ys = [], zs = [];
|
||||
let toti = 0, al = 0;
|
||||
|
||||
for (let line of newLines) {
|
||||
al += 1;
|
||||
let theLine = line.split(",");
|
||||
//console.log(theLine)
|
||||
if (
|
||||
xs &&
|
||||
parseFloat(theLine[0]) == xs[-1] &&
|
||||
parseFloat(theLine[1]) == ys[-1]
|
||||
)
|
||||
|
||||
if (xs && parseFloat(theLine[0]) == xs[-1] && parseFloat(theLine[1]) == ys[-1])
|
||||
continue;
|
||||
|
||||
if (al > 2) {
|
||||
let dist =
|
||||
((xs[xs.length - 1] - xs[xs.length - 2]) ** 2 +
|
||||
(ys[ys.length - 1] - ys[ys.length - 2]) ** 2) **
|
||||
0.5;
|
||||
let dist = ((xs[xs.length - 1] - xs[xs.length - 2]) ** 2 +
|
||||
(ys[ys.length - 1] - ys[ys.length - 2]) ** 2) ** 0.5;
|
||||
toti += Math.round(dist);
|
||||
}
|
||||
xs.push(parseFloat(theLine[0]));
|
||||
ys.push(parseFloat(theLine[1]));
|
||||
zs.push(parseFloat(theLine[2]));
|
||||
}
|
||||
let prevLine = ["0", "0", "0"];
|
||||
let scaleFactor = 100000 / 2000;
|
||||
const canvas = document.getElementById("canvas");
|
||||
|
||||
const canvas = document.getElementById("canvas");
|
||||
if (!canvas.getContext) {
|
||||
console.log("canvas err");
|
||||
toaster.warning("canvas err");
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.clearRect(0, 0, 700, 700);
|
||||
|
||||
// set line stroke and line width
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.clearRect(0, 0, 700, 500);
|
||||
ctx.strokeStyle = "#3B82F6";
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
let scaleFactor = 100000 / 2000;
|
||||
let totalH = Math.max(...zs);
|
||||
let minH = Math.min(...zs);
|
||||
|
||||
for (let line = 0; line < xs.length - 1; line++) {
|
||||
let theLine = [xs[line], ys[line], zs[line]];
|
||||
let x = parseFloat(theLine[0]) - parseFloat(prevLine[0]);
|
||||
let y = parseFloat(theLine[1]) - parseFloat(prevLine[1]);
|
||||
let x1 = line * scaleFactor;
|
||||
let y1 = zs[line];
|
||||
let x2 = (line + 1) * scaleFactor;
|
||||
let y2 = zs[line + 1];
|
||||
//console.log(x1, y1, x2, y2);
|
||||
let b0 = 0;
|
||||
let b1 = 500;
|
||||
|
||||
let b0 = 50, b1 = 450;
|
||||
let z1 = b0 + (b1 - b0) * ((y1 - totalH) / (minH - totalH));
|
||||
let z2 = b0 + (b1 - b0) * ((y2 - totalH) / (minH - totalH));
|
||||
|
||||
//b0 + (b1 - b0) * ((x1-0)/(toti*scaleFactor-0));
|
||||
let x12 = b0 + (b1 - b0) * ((x1 - 0) / (toti * scaleFactor));
|
||||
let x22 = b0 + (b1 - b0) * ((x2 - 0) / (toti * scaleFactor));
|
||||
//console.log(x12);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x12, z1);
|
||||
ctx.lineTo(x22, z2);
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
const parsePreview = (e) => {
|
||||
// console.log(dxf);
|
||||
setPreviewVisible(true);
|
||||
};
|
||||
|
||||
const py = (e, profil, args) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
axios
|
||||
.post("/api/spawn", {
|
||||
@@ -141,91 +117,178 @@ export default function Generator() {
|
||||
arguments: args,
|
||||
})
|
||||
.then(function (response) {
|
||||
setIsLoading(false);
|
||||
console.log(response);
|
||||
if (response.data.toString().startsWith("Py Error")) {
|
||||
toaster.danger(response.data);
|
||||
alert("Błąd: " + response.data);
|
||||
return;
|
||||
}
|
||||
toaster.warning(response.data.data);
|
||||
document.getElementById("down").download =
|
||||
response.data.filename.toString() + ".dxf";
|
||||
document.getElementById("down").download = response.data.filename.toString() + ".dxf";
|
||||
document.getElementById("down").click();
|
||||
})
|
||||
.catch(function (error) {
|
||||
setIsLoading(false);
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex xl:flex-row flex-col">
|
||||
<div className="flex flex-col">
|
||||
<Pane width={480}>
|
||||
<TextareaField
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
|
||||
{/* Input Section */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<ChartBarIcon className="w-5 h-5 text-blue-600" />
|
||||
<span>Dane wejściowe</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wklej dane z Geoportalu lub wprowadź własne współrzędne
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Textarea
|
||||
id="textarea-1"
|
||||
label="Dane z Geoportalu:"
|
||||
label="Dane z Geoportalu"
|
||||
placeholder="Próbkowanie: 1 ..."
|
||||
rows={8}
|
||||
onChange={(e) => {
|
||||
//console.log(e.target.value);
|
||||
setProfil(e.target.value);
|
||||
parsePreview(e);
|
||||
getPath(e, e.target.value);
|
||||
}}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
|
||||
<TextInputField
|
||||
label="Skala:"
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Input
|
||||
label="Skala"
|
||||
placeholder="200"
|
||||
width={100}
|
||||
onChange={(e) => {
|
||||
console.log(e.target.value);
|
||||
setArgs({ ...args, scale: e.target.value });
|
||||
}}
|
||||
type="number"
|
||||
value={args.scale}
|
||||
onChange={(e) => setArgs({ ...args, scale: e.target.value })}
|
||||
/>
|
||||
<RadioGroup
|
||||
label="Lewa"
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Element lewy
|
||||
</label>
|
||||
<select
|
||||
className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
value={args.elementOne}
|
||||
options={ElementOneOptions}
|
||||
onChange={(event) => {
|
||||
setArgs({ ...args, elementOne: event.target.value });
|
||||
}}
|
||||
/>
|
||||
<RadioGroup
|
||||
label="Prawa"
|
||||
onChange={(e) => setArgs({ ...args, elementOne: e.target.value })}
|
||||
>
|
||||
{ElementOneOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Element prawy
|
||||
</label>
|
||||
<select
|
||||
className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
value={args.elementTwo}
|
||||
options={ElementTwoOptions}
|
||||
onChange={(event) => {
|
||||
setArgs({ ...args, elementTwo: event.target.value });
|
||||
}}
|
||||
/>
|
||||
onChange={(e) => setArgs({ ...args, elementTwo: e.target.value })}
|
||||
>
|
||||
{ElementTwoOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
marginY={8}
|
||||
marginRight={12}
|
||||
appearance="default"
|
||||
iconAfter={BuildIcon}
|
||||
onClick={(e) => {
|
||||
if (document.getElementById("textarea-1").value == "") {
|
||||
toaster.danger("Pole danych nie może być puste");
|
||||
} else if (
|
||||
!document
|
||||
.getElementById("textarea-1")
|
||||
.value.startsWith("Próbkowanie")
|
||||
) {
|
||||
toaster.danger("Błędne dane");
|
||||
const textareaValue = document.getElementById("textarea-1").value;
|
||||
if (textareaValue === "") {
|
||||
alert("Pole danych nie może być puste");
|
||||
} else if (!textareaValue.startsWith("Próbkowanie")) {
|
||||
alert("Błędne dane");
|
||||
} else {
|
||||
py(e, profil, args);
|
||||
}
|
||||
}}
|
||||
disabled={isLoading}
|
||||
loading={isLoading}
|
||||
className="w-full"
|
||||
>
|
||||
Generuj
|
||||
<DownloadIcon className="w-5 h-5 mr-2" />
|
||||
{isLoading ? 'Generowanie...' : 'Generuj profil'}
|
||||
</Button>
|
||||
</Pane>
|
||||
|
||||
<a href="test.dxf" download="test.dxf" id="down">
|
||||
{" "}
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<Pane className="ml-8 shadow-md rounded-md">
|
||||
<canvas id="canvas" height="500" width="700"></canvas>
|
||||
</Pane>
|
||||
|
||||
{/* Preview Section */}
|
||||
<div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<EyeIcon className="w-5 h-5 text-green-600" />
|
||||
<span>Podgląd profilu</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wizualizacja profilu terenu na podstawie wprowadzonych danych
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{previewVisible ? (
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<canvas
|
||||
id="canvas"
|
||||
height="500"
|
||||
width="700"
|
||||
className="border border-gray-200 rounded bg-white"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-50 rounded-lg p-8 text-center">
|
||||
<div className="mx-auto w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4">
|
||||
<ChartBarIcon className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500">Wprowadź dane aby zobaczyć podgląd profilu</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Instructions */}
|
||||
<Card className="mt-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Instrukcje</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">1</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Skopiuj dane z Geoportalu w formacie "Próbkowanie: 1"</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">2</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Ustaw skalę i wybierz elementy dodatkowe</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">3</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Kliknij "Generuj profil" aby pobrać plik DXF</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
294
components/templates/generator_new.js
Normal file
294
components/templates/generator_new.js
Normal file
@@ -0,0 +1,294 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input, Textarea, Alert } from "../ui/components";
|
||||
import { ChartBarIcon, ArrowDownTrayIcon as DownloadIcon, EyeIcon } from '@heroicons/react/24/outline';
|
||||
import axios from "axios";
|
||||
|
||||
export default function Generator() {
|
||||
const [profil, setProfil] = useState();
|
||||
const [args, setArgs] = useState({
|
||||
scale: 200,
|
||||
elementOne: 0,
|
||||
elementTwo: 0,
|
||||
});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [previewVisible, setPreviewVisible] = useState(false);
|
||||
const { query } = useRouter();
|
||||
|
||||
const ElementOneOptions = [
|
||||
{ label: "Nic", value: "0" },
|
||||
{ label: "Słup", value: "1" },
|
||||
{ label: "Dom", value: "2" },
|
||||
];
|
||||
|
||||
const ElementTwoOptions = [
|
||||
{ label: "Nic", value: "0" },
|
||||
{ label: "Słup", value: "1" },
|
||||
{ label: "Dom", value: "2" },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (query.external == "tru") {
|
||||
axios
|
||||
.post("/api/readtext", {
|
||||
id: query.id,
|
||||
})
|
||||
.then(function (response) {
|
||||
setProfil(response.data.data);
|
||||
document.getElementById("textarea-1").value = response.data.data;
|
||||
console.log(response.data.data);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const getPath = (e, path) => {
|
||||
let newLines = [];
|
||||
|
||||
for (let line of path.split("\n")) {
|
||||
if (line[0] == "P") continue;
|
||||
if (line[0] == "S") continue;
|
||||
if (line[0] == "X") continue;
|
||||
newLines.push(line);
|
||||
}
|
||||
|
||||
let xs = [], ys = [], zs = [];
|
||||
let toti = 0, al = 0;
|
||||
|
||||
for (let line of newLines) {
|
||||
al += 1;
|
||||
let theLine = line.split(",");
|
||||
|
||||
if (xs && parseFloat(theLine[0]) == xs[-1] && parseFloat(theLine[1]) == ys[-1])
|
||||
continue;
|
||||
|
||||
if (al > 2) {
|
||||
let dist = ((xs[xs.length - 1] - xs[xs.length - 2]) ** 2 +
|
||||
(ys[ys.length - 1] - ys[ys.length - 2]) ** 2) ** 0.5;
|
||||
toti += Math.round(dist);
|
||||
}
|
||||
xs.push(parseFloat(theLine[0]));
|
||||
ys.push(parseFloat(theLine[1]));
|
||||
zs.push(parseFloat(theLine[2]));
|
||||
}
|
||||
|
||||
const canvas = document.getElementById("canvas");
|
||||
if (!canvas.getContext) {
|
||||
console.log("canvas err");
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.clearRect(0, 0, 700, 500);
|
||||
ctx.strokeStyle = "#3B82F6";
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
let scaleFactor = 100000 / 2000;
|
||||
let totalH = Math.max(...zs);
|
||||
let minH = Math.min(...zs);
|
||||
|
||||
for (let line = 0; line < xs.length - 1; line++) {
|
||||
let x1 = line * scaleFactor;
|
||||
let y1 = zs[line];
|
||||
let x2 = (line + 1) * scaleFactor;
|
||||
let y2 = zs[line + 1];
|
||||
|
||||
let b0 = 50, b1 = 450;
|
||||
let z1 = b0 + (b1 - b0) * ((y1 - totalH) / (minH - totalH));
|
||||
let z2 = b0 + (b1 - b0) * ((y2 - totalH) / (minH - totalH));
|
||||
|
||||
let x12 = b0 + (b1 - b0) * ((x1 - 0) / (toti * scaleFactor));
|
||||
let x22 = b0 + (b1 - b0) * ((x2 - 0) / (toti * scaleFactor));
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x12, z1);
|
||||
ctx.lineTo(x22, z2);
|
||||
ctx.stroke();
|
||||
}
|
||||
setPreviewVisible(true);
|
||||
};
|
||||
|
||||
const py = (e, profil, args) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
axios
|
||||
.post("/api/spawn", {
|
||||
profil: profil,
|
||||
arguments: args,
|
||||
})
|
||||
.then(function (response) {
|
||||
setIsLoading(false);
|
||||
console.log(response);
|
||||
if (response.data.toString().startsWith("Py Error")) {
|
||||
alert("Błąd: " + response.data);
|
||||
return;
|
||||
}
|
||||
document.getElementById("down").download = response.data.filename.toString() + ".dxf";
|
||||
document.getElementById("down").click();
|
||||
})
|
||||
.catch(function (error) {
|
||||
setIsLoading(false);
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
|
||||
{/* Input Section */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<ChartBarIcon className="w-5 h-5 text-blue-600" />
|
||||
<span>Dane wejściowe</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wklej dane z Geoportalu lub wprowadź własne współrzędne
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Textarea
|
||||
id="textarea-1"
|
||||
label="Dane z Geoportalu"
|
||||
placeholder="Próbkowanie: 1 ..."
|
||||
rows={8}
|
||||
onChange={(e) => {
|
||||
setProfil(e.target.value);
|
||||
getPath(e, e.target.value);
|
||||
}}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Input
|
||||
label="Skala"
|
||||
placeholder="200"
|
||||
type="number"
|
||||
value={args.scale}
|
||||
onChange={(e) => setArgs({ ...args, scale: e.target.value })}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Element lewy
|
||||
</label>
|
||||
<select
|
||||
className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
value={args.elementOne}
|
||||
onChange={(e) => setArgs({ ...args, elementOne: e.target.value })}
|
||||
>
|
||||
{ElementOneOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Element prawy
|
||||
</label>
|
||||
<select
|
||||
className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
value={args.elementTwo}
|
||||
onChange={(e) => setArgs({ ...args, elementTwo: e.target.value })}
|
||||
>
|
||||
{ElementTwoOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
const textareaValue = document.getElementById("textarea-1").value;
|
||||
if (textareaValue === "") {
|
||||
alert("Pole danych nie może być puste");
|
||||
} else if (!textareaValue.startsWith("Próbkowanie")) {
|
||||
alert("Błędne dane");
|
||||
} else {
|
||||
py(e, profil, args);
|
||||
}
|
||||
}}
|
||||
disabled={isLoading}
|
||||
loading={isLoading}
|
||||
className="w-full"
|
||||
>
|
||||
<DownloadIcon className="w-5 h-5 mr-2" />
|
||||
{isLoading ? 'Generowanie...' : 'Generuj profil'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Preview Section */}
|
||||
<div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<EyeIcon className="w-5 h-5 text-green-600" />
|
||||
<span>Podgląd profilu</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wizualizacja profilu terenu na podstawie wprowadzonych danych
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{previewVisible ? (
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<canvas
|
||||
id="canvas"
|
||||
height="500"
|
||||
width="700"
|
||||
className="border border-gray-200 rounded bg-white"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-50 rounded-lg p-8 text-center">
|
||||
<div className="mx-auto w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4">
|
||||
<ChartBarIcon className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500">Wprowadź dane aby zobaczyć podgląd profilu</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Instructions */}
|
||||
<Card className="mt-6">
|
||||
<CardHeader>
|
||||
<CardTitle>Instrukcje</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">1</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Skopiuj dane z Geoportalu w formacie "Próbkowanie: 1"</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">2</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Ustaw skalę i wybierz elementy dodatkowe</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">3</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Kliknij "Generuj profil" aby pobrać plik DXF</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +1,12 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Pane,
|
||||
TextInputField,
|
||||
TextareaField,
|
||||
Button,
|
||||
toaster,
|
||||
Alert,
|
||||
TrashIcon,
|
||||
Icon,
|
||||
} from "evergreen-ui";
|
||||
import { useState } from "react";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input } from "../ui/components";
|
||||
import { PencilIcon, PlusIcon, TrashIcon, ArrowDownTrayIcon as DownloadIcon } from '@heroicons/react/24/outline';
|
||||
import axios from "axios";
|
||||
import Footer from "./footer";
|
||||
import Generator from "./generator";
|
||||
|
||||
export default function Manual() {
|
||||
const [points, setPoints] = useState([{ id: 0, len: 0, height: 0 }]);
|
||||
const [args, setArgs] = useState({ scale: 200 });
|
||||
|
||||
//useEffect(() => {
|
||||
//do something here
|
||||
// }, [points]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const reIndex = () => {
|
||||
let newId = 0;
|
||||
@@ -32,7 +19,32 @@ export default function Manual() {
|
||||
setPoints([...newPoints]);
|
||||
};
|
||||
|
||||
const addPoint = () => {
|
||||
setPoints([
|
||||
...points,
|
||||
{
|
||||
id: points.length,
|
||||
len: Number(points[points.length - 1].len) + 1,
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const removePoint = (index) => {
|
||||
let newPoints = points;
|
||||
newPoints.splice(index, 1);
|
||||
setPoints([...newPoints]);
|
||||
reIndex();
|
||||
};
|
||||
|
||||
const updatePoint = (index, field, value) => {
|
||||
let newPoints = points;
|
||||
newPoints[index][field] = value;
|
||||
setPoints([...newPoints]);
|
||||
};
|
||||
|
||||
const generation = (e) => {
|
||||
setIsLoading(true);
|
||||
let pointString = "Próbkowanie: 1\nSegment 0: w dół\nX: Y, Z";
|
||||
|
||||
for (let point of points) {
|
||||
@@ -42,7 +54,6 @@ export default function Manual() {
|
||||
pointString += point.height;
|
||||
}
|
||||
|
||||
console.log(pointString);
|
||||
py(e, pointString, args);
|
||||
};
|
||||
|
||||
@@ -55,103 +66,176 @@ export default function Manual() {
|
||||
arguments: args,
|
||||
})
|
||||
.then(function (response) {
|
||||
setIsLoading(false);
|
||||
console.log(response);
|
||||
if (response.data.toString().startsWith("Py Error")) {
|
||||
toaster.danger(response.data);
|
||||
alert("Błąd: " + response.data);
|
||||
return;
|
||||
}
|
||||
toaster.warning(response.data.data);
|
||||
document.getElementById("down").download =
|
||||
response.data.filename.toString() + ".dxf";
|
||||
document.getElementById("down").download = response.data.filename.toString() + ".dxf";
|
||||
document.getElementById("down").click();
|
||||
})
|
||||
.catch(function (error) {
|
||||
setIsLoading(false);
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex xl:flex-row flex-col">
|
||||
<div className="flex flex-col">
|
||||
<Pane width={480}>
|
||||
{points.map((point, index) => (
|
||||
<Pane className="flex flex-row items-center">
|
||||
<TextInputField
|
||||
id={`len-${index}`}
|
||||
placeholder="0 m"
|
||||
onChange={(e) => {
|
||||
console.log(e.target.value);
|
||||
let newPoints = points;
|
||||
newPoints[index].len = e.target.value;
|
||||
setPoints([...newPoints]);
|
||||
}}
|
||||
value={point.len}
|
||||
></TextInputField>
|
||||
<TextInputField
|
||||
id={`h-${index}`}
|
||||
placeholder="0 m n.p.m."
|
||||
onChange={(e) => {
|
||||
console.log(e.target.value);
|
||||
let newPoints = points;
|
||||
newPoints[index].height = e.target.value;
|
||||
setPoints([...newPoints]);
|
||||
}}
|
||||
value={point.height}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key == "Enter") {
|
||||
setPoints([
|
||||
...points,
|
||||
{
|
||||
id: points.length,
|
||||
len: Number(points[points.length - 1].len) + 1,
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
|
||||
{/* Input Section */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<PencilIcon className="w-5 h-5 text-blue-600" />
|
||||
<span>Punkty profilu</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wprowadź punkty profilu ręcznie - długość i wysokość nad poziomem morza
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Scale Input */}
|
||||
<Input
|
||||
label="Skala"
|
||||
type="number"
|
||||
placeholder="200"
|
||||
value={args.scale}
|
||||
onChange={(e) => setArgs({ ...args, scale: e.target.value })}
|
||||
/>
|
||||
|
||||
let nextDiv = e.target.parentNode.parentNode.nextSibling;
|
||||
nextDiv.childNodes[1].childNodes[1].focus()
|
||||
nextDiv.childNodes[1].childNodes[1].setSelectionRange(0, 1)
|
||||
{/* Points List */}
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{points.map((point, index) => (
|
||||
<div key={point.id} className="grid grid-cols-2 gap-3 p-3 bg-gray-50 rounded-lg">
|
||||
<Input
|
||||
label={`Punkt ${index + 1} - Długość (m)`}
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={point.len}
|
||||
onChange={(e) => updatePoint(index, 'len', e.target.value)}
|
||||
/>
|
||||
<div className="flex space-x-2">
|
||||
<Input
|
||||
label="Wysokość (m n.p.m.)"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={point.height}
|
||||
onChange={(e) => updatePoint(index, 'height', e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
addPoint();
|
||||
// Focus next input after render
|
||||
setTimeout(() => {
|
||||
const nextInput = e.target.parentNode.parentNode.parentNode.nextSibling?.querySelector('input');
|
||||
if (nextInput) nextInput.focus();
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
></TextInputField>
|
||||
<Button
|
||||
className="mb-5"
|
||||
appearance="minimal"
|
||||
onClick={() => {
|
||||
let newPoints = points;
|
||||
newPoints.splice(index, 1);
|
||||
setPoints([...newPoints]);
|
||||
reIndex();
|
||||
}}
|
||||
/>
|
||||
{points.length > 1 && (
|
||||
<button
|
||||
onClick={() => removePoint(index)}
|
||||
className="self-end p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Usuń punkt"
|
||||
>
|
||||
<Icon icon={TrashIcon} color="danger"></Icon>
|
||||
</Button>
|
||||
</Pane>
|
||||
<TrashIcon className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Pane>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex space-x-3">
|
||||
<Button
|
||||
onClick={() => {
|
||||
setPoints([
|
||||
...points,
|
||||
{
|
||||
id: points.length,
|
||||
len: Number(points[points.length - 1].len) + 1,
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
}}
|
||||
onClick={addPoint}
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
>
|
||||
Dodaj
|
||||
<PlusIcon className="w-5 h-5 mr-2" />
|
||||
Dodaj punkt
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
appearance="primary"
|
||||
onClick={(e) => {
|
||||
generation(e);
|
||||
}}
|
||||
onClick={generation}
|
||||
disabled={isLoading}
|
||||
loading={isLoading}
|
||||
className="flex-1"
|
||||
>
|
||||
Generuj
|
||||
<DownloadIcon className="w-5 h-5 mr-2" />
|
||||
{isLoading ? 'Generowanie...' : 'Generuj profil'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Preview/Instructions Section */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Podgląd punktów</CardTitle>
|
||||
<CardDescription>
|
||||
Lista wprowadzonych punktów profilu
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{points.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{points.map((point, index) => (
|
||||
<div key={point.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
|
||||
<span className="font-medium text-gray-900">Punkt {index + 1}</span>
|
||||
<div className="text-sm text-gray-600">
|
||||
<span className="mr-4">Długość: {point.len}m</span>
|
||||
<span>Wysokość: {point.height}m</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
||||
<PencilIcon className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500">Brak punktów do wyświetlenia</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Instrukcje</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">1</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Wprowadź kolejne punkty profilu z długością i wysokością</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">2</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Użyj klawisza Enter aby szybko dodać następny punkt</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">3</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Ustaw skalę i kliknij "Generuj profil"</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
241
components/templates/manual_new.js
Normal file
241
components/templates/manual_new.js
Normal file
@@ -0,0 +1,241 @@
|
||||
import { useState } from "react";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input } from "../ui/components";
|
||||
import { PencilIcon, PlusIcon, TrashIcon, ArrowDownTrayIcon as DownloadIcon } from '@heroicons/react/24/outline';
|
||||
import axios from "axios";
|
||||
|
||||
export default function Manual() {
|
||||
const [points, setPoints] = useState([{ id: 0, len: 0, height: 0 }]);
|
||||
const [args, setArgs] = useState({ scale: 200 });
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const reIndex = () => {
|
||||
let newId = 0;
|
||||
let newPoints = [];
|
||||
for (let point of points) {
|
||||
point.id = newId;
|
||||
newPoints.push(point);
|
||||
newId += 1;
|
||||
}
|
||||
setPoints([...newPoints]);
|
||||
};
|
||||
|
||||
const addPoint = () => {
|
||||
setPoints([
|
||||
...points,
|
||||
{
|
||||
id: points.length,
|
||||
len: Number(points[points.length - 1].len) + 1,
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const removePoint = (index) => {
|
||||
let newPoints = points;
|
||||
newPoints.splice(index, 1);
|
||||
setPoints([...newPoints]);
|
||||
reIndex();
|
||||
};
|
||||
|
||||
const updatePoint = (index, field, value) => {
|
||||
let newPoints = points;
|
||||
newPoints[index][field] = value;
|
||||
setPoints([...newPoints]);
|
||||
};
|
||||
|
||||
const generation = (e) => {
|
||||
setIsLoading(true);
|
||||
let pointString = "Próbkowanie: 1\nSegment 0: w dół\nX: Y, Z";
|
||||
|
||||
for (let point of points) {
|
||||
pointString += "\n";
|
||||
pointString += Number(point.len) * 1.0;
|
||||
pointString += ", 1.0, ";
|
||||
pointString += point.height;
|
||||
}
|
||||
|
||||
py(e, pointString, args);
|
||||
};
|
||||
|
||||
const py = (e, profil, args) => {
|
||||
e.preventDefault();
|
||||
|
||||
axios
|
||||
.post("/api/spawn", {
|
||||
profil: profil,
|
||||
arguments: args,
|
||||
})
|
||||
.then(function (response) {
|
||||
setIsLoading(false);
|
||||
console.log(response);
|
||||
if (response.data.toString().startsWith("Py Error")) {
|
||||
alert("Błąd: " + response.data);
|
||||
return;
|
||||
}
|
||||
document.getElementById("down").download = response.data.filename.toString() + ".dxf";
|
||||
document.getElementById("down").click();
|
||||
})
|
||||
.catch(function (error) {
|
||||
setIsLoading(false);
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
|
||||
{/* Input Section */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<PencilIcon className="w-5 h-5 text-blue-600" />
|
||||
<span>Punkty profilu</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wprowadź punkty profilu ręcznie - długość i wysokość nad poziomem morza
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Scale Input */}
|
||||
<Input
|
||||
label="Skala"
|
||||
type="number"
|
||||
placeholder="200"
|
||||
value={args.scale}
|
||||
onChange={(e) => setArgs({ ...args, scale: e.target.value })}
|
||||
/>
|
||||
|
||||
{/* Points List */}
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{points.map((point, index) => (
|
||||
<div key={point.id} className="grid grid-cols-2 gap-3 p-3 bg-gray-50 rounded-lg">
|
||||
<Input
|
||||
label={`Punkt ${index + 1} - Długość (m)`}
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={point.len}
|
||||
onChange={(e) => updatePoint(index, 'len', e.target.value)}
|
||||
/>
|
||||
<div className="flex space-x-2">
|
||||
<Input
|
||||
label="Wysokość (m n.p.m.)"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
value={point.height}
|
||||
onChange={(e) => updatePoint(index, 'height', e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
addPoint();
|
||||
// Focus next input after render
|
||||
setTimeout(() => {
|
||||
const nextInput = e.target.parentNode.parentNode.parentNode.nextSibling?.querySelector('input');
|
||||
if (nextInput) nextInput.focus();
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{points.length > 1 && (
|
||||
<button
|
||||
onClick={() => removePoint(index)}
|
||||
className="self-end p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="Usuń punkt"
|
||||
>
|
||||
<TrashIcon className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex space-x-3">
|
||||
<Button
|
||||
onClick={addPoint}
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
>
|
||||
<PlusIcon className="w-5 h-5 mr-2" />
|
||||
Dodaj punkt
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={generation}
|
||||
disabled={isLoading}
|
||||
loading={isLoading}
|
||||
className="flex-1"
|
||||
>
|
||||
<DownloadIcon className="w-5 h-5 mr-2" />
|
||||
{isLoading ? 'Generowanie...' : 'Generuj profil'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Preview/Instructions Section */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Podgląd punktów</CardTitle>
|
||||
<CardDescription>
|
||||
Lista wprowadzonych punktów profilu
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{points.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{points.map((point, index) => (
|
||||
<div key={point.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
|
||||
<span className="font-medium text-gray-900">Punkt {index + 1}</span>
|
||||
<div className="text-sm text-gray-600">
|
||||
<span className="mr-4">Długość: {point.len}m</span>
|
||||
<span>Wysokość: {point.height}m</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
||||
<PencilIcon className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500">Brak punktów do wyświetlenia</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Instrukcje</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">1</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Wprowadź kolejne punkty profilu z długością i wysokością</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">2</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Użyj klawisza Enter aby szybko dodać następny punkt</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">3</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Ustaw skalę i kliknij "Generuj profil"</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<a href="test.dxf" download="test.dxf" id="down" className="hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
154
components/ui/Layout.js
Normal file
154
components/ui/Layout.js
Normal file
@@ -0,0 +1,154 @@
|
||||
import { useState } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useSession, signOut } from 'next-auth/react';
|
||||
import {
|
||||
HomeIcon,
|
||||
Squares2X2Icon as GridIcon,
|
||||
BoltIcon as LightningBoltIcon,
|
||||
Bars3Icon as MenuIcon,
|
||||
XMarkIcon as XIcon,
|
||||
UserIcon,
|
||||
ArrowRightOnRectangleIcon as LogoutIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
const navigationItems = [
|
||||
{ name: 'Przekrój terenu', href: '/', icon: HomeIcon },
|
||||
{ name: 'Siatka', href: '/cross', icon: GridIcon },
|
||||
{ name: 'Uziomy', href: '/uziomy', icon: LightningBoltIcon },
|
||||
];
|
||||
|
||||
export default function Layout({ children, title = 'Wastpol' }) {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const { data: session } = useSession();
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
<meta name="description" content="Professional electrical engineering tools" />
|
||||
<link rel="icon" href="/icon.png" />
|
||||
</Head>
|
||||
|
||||
{/* Mobile sidebar */}
|
||||
<div className={`fixed inset-0 z-50 lg:hidden ${sidebarOpen ? 'block' : 'hidden'}`}>
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setSidebarOpen(false)} />
|
||||
<div className="fixed inset-y-0 left-0 flex w-64 flex-col bg-white shadow-xl">
|
||||
<div className="flex h-16 items-center justify-between px-4 border-b border-gray-200">
|
||||
<img className="h-8 w-auto" src="/logo.png" alt="Wastpol" />
|
||||
<button
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<XIcon className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
<nav className="flex-1 px-2 py-4 space-y-1">
|
||||
{navigationItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = router.pathname === item.href;
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors ${
|
||||
isActive
|
||||
? 'bg-blue-100 text-blue-900 border-r-2 border-blue-500'
|
||||
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<Icon className="mr-3 h-5 w-5 flex-shrink-0" />
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop layout */}
|
||||
<div className="flex">
|
||||
{/* Desktop sidebar */}
|
||||
<div className="hidden lg:flex lg:flex-shrink-0">
|
||||
<div className="flex w-64 flex-col">
|
||||
<div className="flex min-h-0 flex-1 flex-col bg-white border-r border-gray-200 shadow-sm">
|
||||
<div className="flex h-16 items-center justify-center px-4 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700">
|
||||
<img className="h-8 w-auto filter brightness-0 invert" src="/logo.png" alt="Wastpol" />
|
||||
<span className="ml-2 text-lg font-semibold text-white">Wastpol</span>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col overflow-y-auto">
|
||||
<nav className="flex-1 px-2 py-4 space-y-1">
|
||||
{navigationItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = router.pathname === item.href;
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
|
||||
isActive
|
||||
? 'bg-blue-100 text-blue-900 border-r-2 border-blue-500 shadow-sm'
|
||||
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<Icon className={`mr-3 h-5 w-5 flex-shrink-0 transition-colors ${
|
||||
isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-500'
|
||||
}`} />
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex flex-1 flex-col">
|
||||
{/* Top navbar */}
|
||||
<div className="relative z-10 flex h-16 flex-shrink-0 bg-white shadow-sm border-b border-gray-200">
|
||||
<button
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
className="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 lg:hidden"
|
||||
>
|
||||
<MenuIcon className="h-6 w-6" />
|
||||
</button>
|
||||
|
||||
<div className="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-1">
|
||||
{/* You can add search or breadcrumbs here */}
|
||||
</div>
|
||||
|
||||
{session && (
|
||||
<div className="ml-4 flex items-center md:ml-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-700">
|
||||
<UserIcon className="h-5 w-5 text-gray-400" />
|
||||
<span className="hidden sm:block">{session.user.email}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => signOut()}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
|
||||
>
|
||||
<LogoutIcon className="h-4 w-4 mr-2" />
|
||||
Wyloguj
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page content */}
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
179
components/ui/components.js
Normal file
179
components/ui/components.js
Normal file
@@ -0,0 +1,179 @@
|
||||
import React from 'react';
|
||||
|
||||
export const Card = ({ children, className = '', ...props }) => (
|
||||
<div
|
||||
className={`bg-white overflow-hidden shadow-sm border border-gray-200 rounded-xl transition-all duration-200 hover:shadow-md ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const CardHeader = ({ children, className = '', ...props }) => (
|
||||
<div className={`px-6 py-4 border-b border-gray-200 ${className}`} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const CardContent = ({ children, className = '', ...props }) => (
|
||||
<div className={`px-6 py-4 ${className}`} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const CardTitle = ({ children, className = '', ...props }) => (
|
||||
<h3 className={`text-lg font-semibold text-gray-900 ${className}`} {...props}>
|
||||
{children}
|
||||
</h3>
|
||||
);
|
||||
|
||||
export const CardDescription = ({ children, className = '', ...props }) => (
|
||||
<p className={`text-sm text-gray-600 mt-1 ${className}`} {...props}>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
|
||||
export const Button = ({
|
||||
children,
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
className = '',
|
||||
disabled = false,
|
||||
loading = false,
|
||||
...props
|
||||
}) => {
|
||||
const baseStyles = 'inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
|
||||
|
||||
const variants = {
|
||||
primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm hover:shadow-md',
|
||||
secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300',
|
||||
outline: 'border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-blue-500',
|
||||
ghost: 'text-gray-700 hover:bg-gray-100 focus:ring-gray-500',
|
||||
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm: 'px-3 py-2 text-sm',
|
||||
md: 'px-4 py-2 text-sm',
|
||||
lg: 'px-6 py-3 text-base',
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
|
||||
disabled={disabled || loading}
|
||||
{...props}
|
||||
>
|
||||
{loading && (
|
||||
<svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
)}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export const Input = ({ label, error, className = '', ...props }) => (
|
||||
<div className="space-y-1">
|
||||
{label && (
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<input
|
||||
className={`block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors ${
|
||||
error ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''
|
||||
} ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Textarea = ({ label, error, className = '', ...props }) => (
|
||||
<div className="space-y-1">
|
||||
{label && (
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<textarea
|
||||
className={`block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors ${
|
||||
error ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''
|
||||
} ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Badge = ({ children, variant = 'default', className = '' }) => {
|
||||
const variants = {
|
||||
default: 'bg-gray-100 text-gray-800',
|
||||
success: 'bg-green-100 text-green-800',
|
||||
warning: 'bg-yellow-100 text-yellow-800',
|
||||
error: 'bg-red-100 text-red-800',
|
||||
info: 'bg-blue-100 text-blue-800',
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[variant]} ${className}`}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const Alert = ({ children, variant = 'info', className = '' }) => {
|
||||
const variants = {
|
||||
info: 'bg-blue-50 border-blue-200 text-blue-800',
|
||||
success: 'bg-green-50 border-green-200 text-green-800',
|
||||
warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
|
||||
error: 'bg-red-50 border-red-200 text-red-800',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`border-l-4 p-4 rounded-lg ${variants[variant]} ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Tabs = ({ children, value, onValueChange }) => (
|
||||
<div className="w-full">
|
||||
<div className="border-b border-gray-200">
|
||||
<nav className="-mb-px flex space-x-8">
|
||||
{React.Children.map(children, (child, index) =>
|
||||
React.cloneElement(child, {
|
||||
isActive: value === index,
|
||||
onClick: () => onValueChange(index)
|
||||
})
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const TabsTrigger = ({ children, isActive, onClick }) => (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
|
||||
isActive
|
||||
? 'border-blue-500 text-blue-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
|
||||
export const TabsContent = ({ children, isActive }) => (
|
||||
<div className={`pt-6 ${isActive ? 'block' : 'hidden'}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
291
package-lock.json
generated
291
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -11,8 +11,10 @@
|
||||
"buildRun": "next build && pm2 restart kroj"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@socialgouv/matomo-next": "^1.3.0",
|
||||
"@supercharge/request-ip": "^1.1.2",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"axios": "^0.26.0",
|
||||
"child_process": "^1.0.2",
|
||||
"cors": "^2.8.5",
|
||||
|
||||
265
pages/cross.js
265
pages/cross.js
@@ -1,50 +1,21 @@
|
||||
import Head from "next/head";
|
||||
import { useState, useCallback } from "react";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import Header from "../components/templates/header";
|
||||
import Nav from "../components/templates/nav";
|
||||
import UserTop from "../components/templates/userTop";
|
||||
import Content from "../components/templates/content";
|
||||
import Footer from "../components/templates/footer";
|
||||
import { useSession, signIn, signOut } from "next-auth/react";
|
||||
import { useSession, signIn } from "next-auth/react";
|
||||
import Layout from "../components/ui/Layout";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Alert } from "../components/ui/components";
|
||||
import {
|
||||
Pane,
|
||||
TextInputField,
|
||||
TextareaField,
|
||||
Button,
|
||||
BuildIcon,
|
||||
toaster,
|
||||
Alert,
|
||||
FileUploader,
|
||||
FilePicker,
|
||||
FileCard,
|
||||
} from "evergreen-ui";
|
||||
import { CloudArrowUpIcon as CloudUploadIcon, ArrowDownTrayIcon as DownloadIcon, Squares2X2Icon as GridIcon } from '@heroicons/react/24/outline';
|
||||
import axios from "axios";
|
||||
|
||||
export default function Cross() {
|
||||
const { data: session } = useSession();
|
||||
|
||||
const [fileData, setFileData] = useState(null);
|
||||
const handleDownload = () => {
|
||||
console.log("down");
|
||||
if (fileData) {
|
||||
console.log("load");
|
||||
// const link = document.createElement("a");
|
||||
// link.href = `data:application/octet-stream;base64,${fileData}`;
|
||||
// link.download = "plik.dxf";
|
||||
// link.click();
|
||||
document.getElementById("down").download = fileData.filename;
|
||||
console.log(fileData.filename)
|
||||
|
||||
document.getElementById("down").href = "cross.dxf";
|
||||
console.log("cross.dxf")
|
||||
|
||||
document.getElementById("down").click();
|
||||
}
|
||||
};
|
||||
|
||||
const [files, setFiles] = useState([]);
|
||||
const [fileRejections, setFileRejections] = useState([]);
|
||||
const [fileData, setFileData] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleChange = useCallback((files) => setFiles([files[0]]), []);
|
||||
const handleRejected = useCallback(
|
||||
(fileRejections) => setFileRejections([fileRejections[0]]),
|
||||
@@ -55,63 +26,79 @@ export default function Cross() {
|
||||
setFileRejections([]);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
let file = files[0];
|
||||
|
||||
if (!file) {
|
||||
// Handle error if no file is selected
|
||||
console.log("Files:", files);
|
||||
if (files.length === 0) {
|
||||
console.log("No files selected");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
formData.append("files", files[0]);
|
||||
|
||||
axios
|
||||
.post("/api/upload", formData, {
|
||||
.post("/api/cross", formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response.data);
|
||||
if (response.data.toString().startsWith("Py Error")) {
|
||||
toaster.danger(response.data);
|
||||
return;
|
||||
}
|
||||
toaster.warning(response.statusText);
|
||||
console.log(response.data)
|
||||
setFileData(response.data);
|
||||
document.getElementById("download").disabled = false;
|
||||
|
||||
// document.getElementById("down").download =
|
||||
// response.data.filename.toString().split(".")[0].split("-")[1]+"_s.dxf";
|
||||
// document.getElementById("down").href =
|
||||
// "uploads/"+response.data.filename.toString().split(".")[0]+"_s.dxf";
|
||||
// document.getElementById("down").click();
|
||||
setIsLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
setIsLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
if (fileData) {
|
||||
document.getElementById("down").download = fileData.filename;
|
||||
document.getElementById("down").href = "cross.dxf";
|
||||
document.getElementById("down").click();
|
||||
}
|
||||
};
|
||||
|
||||
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} />
|
||||
<Layout title="Wastpol - Generator siatki">
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
{/* Page Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<div className="p-3 bg-blue-100 rounded-lg">
|
||||
<GridIcon className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Generator siatki</h1>
|
||||
<p className="text-gray-600">Przekształć pliki DXF na siatki instalacyjne</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="flex flex-1 flex-col items-center">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Upload Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<CloudUploadIcon className="w-5 h-5 text-blue-600" />
|
||||
<span>Prześlij plik</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wybierz plik DXF do przetworzenia (maksymalnie 50 MB)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
label="Prześlij plik"
|
||||
description="Możesz dodać 1 plik, max 50 MB."
|
||||
label="Przeciągnij i upuść plik lub kliknij aby wybrać"
|
||||
description="Obsługiwane formaty: DXF (max 50 MB)"
|
||||
maxSizeInBytes={50 * 1024 ** 2}
|
||||
maxFiles={1}
|
||||
onChange={handleChange}
|
||||
@@ -138,53 +125,123 @@ export default function Cross() {
|
||||
/>
|
||||
|
||||
<Button
|
||||
marginY={8}
|
||||
marginRight={12}
|
||||
appearance="default"
|
||||
iconAfter={BuildIcon}
|
||||
onClick={(e) => {
|
||||
console.log("louding begins");
|
||||
console.log(files);
|
||||
document.getElementById("download").disabled = false;
|
||||
handleSubmit(e);
|
||||
}}
|
||||
onClick={handleSubmit}
|
||||
disabled={files.length === 0 || isLoading}
|
||||
loading={isLoading}
|
||||
className="w-full"
|
||||
>
|
||||
Dodaj siatkę
|
||||
{isLoading ? 'Przetwarzanie...' : 'Dodaj siatkę'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Results Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<DownloadIcon className="w-5 h-5 text-green-600" />
|
||||
<span>Wynik</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Pobierz wygenerowany plik siatki
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{fileData ? (
|
||||
<div className="space-y-4">
|
||||
<Alert variant="success">
|
||||
<div className="flex items-center space-x-2">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Plik został pomyślnie przetworzony!</span>
|
||||
</div>
|
||||
</Alert>
|
||||
|
||||
<Button
|
||||
id="download"
|
||||
marginY={8}
|
||||
marginRight={12}
|
||||
appearance="default"
|
||||
iconAfter={BuildIcon}
|
||||
// disabled={true}
|
||||
onClick={handleDownload}
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
>
|
||||
Pobierz
|
||||
<DownloadIcon className="w-5 h-5 mr-2" />
|
||||
Pobierz siatką DXF
|
||||
</Button>
|
||||
<a href="the.dxf" download="the.dxf" id="down">
|
||||
{" "}
|
||||
</a>
|
||||
</main>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
||||
<GridIcon className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500">Prześlij plik aby rozpocząć przetwarzanie</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<Card className="mt-8">
|
||||
<CardHeader>
|
||||
<CardTitle>Instrukcje</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-blue-600">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Prześlij plik</h4>
|
||||
<p className="text-sm text-gray-600">Wybierz plik DXF z projektem</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-blue-600">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Przetwarzaj</h4>
|
||||
<p className="text-sm text-gray-600">Kliknij "Dodaj siatkę"</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-blue-600">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Pobierz</h4>
|
||||
<p className="text-sm text-gray-600">Zapisz gotową siatkę DXF</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<a href="the.dxf" download="the.dxf" id="down" className="hidden" />
|
||||
</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 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 generatora siatki</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={() => signIn()} className="w-full" size="lg">
|
||||
Zaloguj się
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
247
pages/cross_new.js
Normal file
247
pages/cross_new.js
Normal file
@@ -0,0 +1,247 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import { useSession, signIn } from "next-auth/react";
|
||||
import Layout from "../components/ui/Layout";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Alert } from "../components/ui/components";
|
||||
import {
|
||||
FileUploader,
|
||||
FileCard,
|
||||
} from "evergreen-ui";
|
||||
import { CloudArrowUpIcon as CloudUploadIcon, ArrowDownTrayIcon as DownloadIcon, Squares2X2Icon as GridIcon } from '@heroicons/react/24/outline';
|
||||
import axios from "axios";
|
||||
|
||||
export default function Cross() {
|
||||
const { data: session } = useSession();
|
||||
const [files, setFiles] = useState([]);
|
||||
const [fileRejections, setFileRejections] = useState([]);
|
||||
const [fileData, setFileData] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleChange = useCallback((files) => setFiles([files[0]]), []);
|
||||
const handleRejected = useCallback(
|
||||
(fileRejections) => setFileRejections([fileRejections[0]]),
|
||||
[]
|
||||
);
|
||||
const handleRemove = useCallback(() => {
|
||||
setFiles([]);
|
||||
setFileRejections([]);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
console.log("Files:", files);
|
||||
if (files.length === 0) {
|
||||
console.log("No files selected");
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("files", files[0]);
|
||||
|
||||
axios
|
||||
.post("/api/cross", formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response.data);
|
||||
setFileData(response.data);
|
||||
setIsLoading(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
setIsLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
if (fileData) {
|
||||
document.getElementById("down").download = fileData.filename;
|
||||
document.getElementById("down").href = "cross.dxf";
|
||||
document.getElementById("down").click();
|
||||
}
|
||||
};
|
||||
|
||||
if (session) {
|
||||
return (
|
||||
<Layout title="Wastpol - Generator siatki">
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
{/* Page Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<div className="p-3 bg-blue-100 rounded-lg">
|
||||
<GridIcon className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Generator siatki</h1>
|
||||
<p className="text-gray-600">Przekształć pliki DXF na siatki instalacyjne</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Upload Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<CloudUploadIcon className="w-5 h-5 text-blue-600" />
|
||||
<span>Prześlij plik</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wybierz plik DXF do przetworzenia (maksymalnie 50 MB)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
label="Przeciągnij i upuść plik lub kliknij aby wybrać"
|
||||
description="Obsługiwane formaty: DXF (max 50 MB)"
|
||||
maxSizeInBytes={50 * 1024 ** 2}
|
||||
maxFiles={1}
|
||||
onChange={handleChange}
|
||||
onRejected={handleRejected}
|
||||
renderFile={(file) => {
|
||||
const { name, size, type } = file;
|
||||
const fileRejection = fileRejections.find(
|
||||
(fileRejection) => fileRejection.file === file
|
||||
);
|
||||
const { message } = fileRejection || {};
|
||||
return (
|
||||
<FileCard
|
||||
key={name}
|
||||
isInvalid={fileRejection != null}
|
||||
name={name}
|
||||
onRemove={handleRemove}
|
||||
sizeInBytes={size}
|
||||
type={type}
|
||||
validationMessage={message}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
values={files}
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={files.length === 0 || isLoading}
|
||||
loading={isLoading}
|
||||
className="w-full"
|
||||
>
|
||||
{isLoading ? 'Przetwarzanie...' : 'Dodaj siatkę'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Results Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<DownloadIcon className="w-5 h-5 text-green-600" />
|
||||
<span>Wynik</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Pobierz wygenerowany plik siatki
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{fileData ? (
|
||||
<div className="space-y-4">
|
||||
<Alert variant="success">
|
||||
<div className="flex items-center space-x-2">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Plik został pomyślnie przetworzony!</span>
|
||||
</div>
|
||||
</Alert>
|
||||
|
||||
<Button
|
||||
onClick={handleDownload}
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
>
|
||||
<DownloadIcon className="w-5 h-5 mr-2" />
|
||||
Pobierz siatką DXF
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
||||
<GridIcon className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-500">Prześlij plik aby rozpocząć przetwarzanie</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<Card className="mt-8">
|
||||
<CardHeader>
|
||||
<CardTitle>Instrukcje</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-blue-600">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Prześlij plik</h4>
|
||||
<p className="text-sm text-gray-600">Wybierz plik DXF z projektem</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-blue-600">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Przetwarzaj</h4>
|
||||
<p className="text-sm text-gray-600">Kliknij "Dodaj siatkę"</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-sm font-semibold text-blue-600">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Pobierz</h4>
|
||||
<p className="text-sm text-gray-600">Zapisz gotową siatkę DXF</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<a href="the.dxf" download="the.dxf" id="down" className="hidden" />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<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 generatora siatki</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={() => signIn()} className="w-full" size="lg">
|
||||
Zaloguj się
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
175
pages/index.js
175
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} />
|
||||
<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 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"}
|
||||
>
|
||||
{/* 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 />
|
||||
</Pane>
|
||||
)
|
||||
)}
|
||||
</Pane>
|
||||
</div>
|
||||
</main>
|
||||
</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>
|
||||
<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()}
|
||||
appearance="primary"
|
||||
// className="p-2 bg-slate-200 rounded-md"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
>
|
||||
Zaloguj
|
||||
<LoginIcon className="w-5 h-5 mr-2" />
|
||||
Zaloguj się
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
652
pages/uziomy.js
652
pages/uziomy.js
@@ -1,35 +1,23 @@
|
||||
import Head from "next/head";
|
||||
import styles from "../styles/Home.module.css";
|
||||
import Nav from "../components/templates/nav";
|
||||
import UserTop from "../components/templates/userTop";
|
||||
import { useSession, signIn, signOut } from "next-auth/react";
|
||||
import { useState, useCallback } from "react";
|
||||
import {
|
||||
Pane,
|
||||
TextInputField,
|
||||
TextareaField,
|
||||
Button,
|
||||
BuildIcon,
|
||||
toaster,
|
||||
Alert,
|
||||
FileUploader,
|
||||
FilePicker,
|
||||
FileCard,
|
||||
RadioGroup,
|
||||
Autocomplete,
|
||||
} from "evergreen-ui";
|
||||
|
||||
import PizZip from "pizzip";
|
||||
import Docxtemplater from "docxtemplater";
|
||||
import { useState } from "react";
|
||||
import { useSession, signIn } from "next-auth/react";
|
||||
import Layout from "../components/ui/Layout";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input, Badge, Alert } from "../components/ui/components";
|
||||
import { BoltIcon as LightningBoltIcon, CalculatorIcon, DocumentArrowDownIcon as DocumentDownloadIcon, ClipboardDocumentListIcon as ClipboardListIcon } from '@heroicons/react/24/outline';
|
||||
import DatePicker from "react-datepicker";
|
||||
import { registerLocale, setDefaultLocale } from "react-datepicker";
|
||||
import { registerLocale } from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import pl from "date-fns/locale/pl";
|
||||
import PizZip from "pizzip";
|
||||
import Docxtemplater from "docxtemplater";
|
||||
registerLocale("pl", pl);
|
||||
|
||||
export default function Rezy() {
|
||||
export default function Uziomy() {
|
||||
const { data: session } = useSession();
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [isCalculating, setIsCalculating] = useState(false);
|
||||
const [isGeneratingDoc, setIsGeneratingDoc] = useState(false);
|
||||
const [isGeneratingDxf, setIsGeneratingDxf] = useState(false);
|
||||
const [calDate, setCalDate] = useState(null);
|
||||
|
||||
const [ground, setGround] = useState({
|
||||
wet_coef: 0,
|
||||
@@ -59,23 +47,6 @@ export default function Rezy() {
|
||||
objName: undefined,
|
||||
});
|
||||
|
||||
// Function to go to the next step
|
||||
const goToNextStep = () => {
|
||||
if (currentStep < 3) {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}
|
||||
};
|
||||
|
||||
// Function to go to the previous step
|
||||
const goToPreviousStep = () => {
|
||||
if (currentStep > 1) {
|
||||
setCurrentStep(currentStep - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const [date, setDate] = useState(null);
|
||||
const [calDate, setCalDate] = useState(null);
|
||||
|
||||
const [options] = useState([
|
||||
{ label: "5 Ω", value: "5" },
|
||||
{ label: "10 Ω", value: "10" },
|
||||
@@ -83,7 +54,6 @@ export default function Rezy() {
|
||||
{ label: "30 Ω", value: "30" },
|
||||
]);
|
||||
const [neededValue, setNeededValue] = useState("5");
|
||||
|
||||
const [resHValue, setResHValue] = useState("88");
|
||||
const [resVValue, setResVValue] = useState("89");
|
||||
|
||||
@@ -100,17 +70,16 @@ export default function Rezy() {
|
||||
}
|
||||
|
||||
function parseDate(dateString) {
|
||||
console.log(dateString);
|
||||
const parts = dateString.split(".");
|
||||
const day = parseInt(parts[0], 10);
|
||||
const month = parseInt(parts[1], 10) - 1; // Months are 0-indexed in JavaScript Dates
|
||||
const month = parseInt(parts[1], 10) - 1;
|
||||
const year = parseInt(parts[2], 10);
|
||||
return new Date(year, month, day);
|
||||
}
|
||||
|
||||
function getGrounding(wanted, wszrg_h, wszrg_v, date) {
|
||||
const dateObject = parseDate(date);
|
||||
const month = dateObject.getMonth() + 1; // JavaScript months are 0-indexed
|
||||
const month = dateObject.getMonth() + 1;
|
||||
|
||||
const wet_coef = month >= 6 && month <= 9 ? 1.2 : 1.6;
|
||||
const rod_len = wanted === 30 ? 2 : 3;
|
||||
@@ -123,53 +92,26 @@ export default function Rezy() {
|
||||
const measure_dist_v = 1 + rod_len;
|
||||
const resistance_v = resistivity_v / (2 * Math.PI * measure_dist_v);
|
||||
|
||||
const result_v =
|
||||
(wszrg_v / (2 * Math.PI * rod_len)) *
|
||||
(Math.log((8 * rod_len) / 0.016) - 1);
|
||||
|
||||
let rod_num = 2; //minimum 2 rods
|
||||
const result_v = (wszrg_v / (2 * Math.PI * rod_len)) * (Math.log((8 * rod_len) / 0.016) - 1);
|
||||
|
||||
let rod_num = 2;
|
||||
let hor_len = 1 + (rod_num - 1) * rod_len * 2;
|
||||
let result_h = (wszrg_h / (2 * Math.PI * hor_len)) * Math.log((hor_len * hor_len) / (1 * 0.0191));
|
||||
|
||||
let result_h =
|
||||
(wszrg_h / (2 * Math.PI * hor_len)) *
|
||||
Math.log((hor_len * hor_len) / (1 * 0.0191));
|
||||
let rod_coef = Math.pow(rod_num, 4) * 0.00002 - Math.pow(rod_num, 3) * 0.0009 +
|
||||
Math.pow(rod_num, 2) * 0.0137 - rod_num * 0.0981 + 1.0468;
|
||||
|
||||
let rod_coef =
|
||||
Math.pow(rod_num, 4) * 0.00002 -
|
||||
Math.pow(rod_num, 3) * 0.0009 +
|
||||
Math.pow(rod_num, 2) * 0.0137 -
|
||||
rod_num * 0.0981 +
|
||||
1.0468;
|
||||
|
||||
let result =
|
||||
(result_v * result_h) /
|
||||
(result_v * rod_coef + rod_num * result_h * rod_coef);
|
||||
let result = (result_v * result_h) / (result_v * rod_coef + rod_num * result_h * rod_coef);
|
||||
|
||||
while (result > wanted) {
|
||||
rod_num += 1;
|
||||
|
||||
hor_len = 1 + (rod_num - 1) * rod_len * 2;
|
||||
|
||||
result_h =
|
||||
(wszrg_h / (2 * Math.PI * hor_len)) *
|
||||
Math.log((hor_len * hor_len) / (1 * 0.0191));
|
||||
|
||||
rod_coef =
|
||||
Math.pow(rod_num, 4) * 0.00002 -
|
||||
Math.pow(rod_num, 3) * 0.0009 +
|
||||
Math.pow(rod_num, 2) * 0.0137 -
|
||||
rod_num * 0.0981 +
|
||||
1.0468;
|
||||
|
||||
result =
|
||||
(result_v * result_h) /
|
||||
(result_v * rod_coef + rod_num * result_h * rod_coef);
|
||||
|
||||
console.log(result, rod_num);
|
||||
result_h = (wszrg_h / (2 * Math.PI * hor_len)) * Math.log((hor_len * hor_len) / (1 * 0.0191));
|
||||
rod_coef = Math.pow(rod_num, 4) * 0.00002 - Math.pow(rod_num, 3) * 0.0009 +
|
||||
Math.pow(rod_num, 2) * 0.0137 - rod_num * 0.0981 + 1.0468;
|
||||
result = (result_v * result_h) / (result_v * rod_coef + rod_num * result_h * rod_coef);
|
||||
}
|
||||
|
||||
console.log(result, rod_num);
|
||||
return {
|
||||
wet_coef: wet_coef,
|
||||
resistivity_h: resistivity_h.toFixed(2),
|
||||
@@ -191,7 +133,24 @@ export default function Rezy() {
|
||||
};
|
||||
}
|
||||
|
||||
const generateDocument = async (ground) => {
|
||||
const calculateGrounding = () => {
|
||||
setIsCalculating(true);
|
||||
try {
|
||||
const res = getGrounding(
|
||||
parseInt(neededValue),
|
||||
parseFloat(resHValue),
|
||||
parseFloat(resVValue),
|
||||
ground.date
|
||||
);
|
||||
setGround((current) => ({ ...current, ...res }));
|
||||
} catch (error) {
|
||||
alert("Błąd podczas obliczeń: " + error.message);
|
||||
}
|
||||
setIsCalculating(false);
|
||||
};
|
||||
|
||||
const generateDocument = async () => {
|
||||
setIsGeneratingDoc(true);
|
||||
const data = {
|
||||
...ground,
|
||||
resisted_object: ground.objValue1 + " " + ground.objName,
|
||||
@@ -200,78 +159,55 @@ export default function Rezy() {
|
||||
try {
|
||||
const response = await fetch("/api/generateDocx", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error: ${response.status}`);
|
||||
}
|
||||
if (!response.ok) throw new Error("Response was not ok.");
|
||||
|
||||
// Convert the response to a blob and download it
|
||||
const blob = await response.blob();
|
||||
const downloadUrl = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = downloadUrl;
|
||||
link.download = "opis.docx";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = downloadUrl;
|
||||
a.download = "opis_uziemienia.docx";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
} catch (error) {
|
||||
console.error("Failed to generate document:", error);
|
||||
console.error("Error:", error);
|
||||
alert("Błąd podczas generowania dokumentu");
|
||||
}
|
||||
setIsGeneratingDoc(false);
|
||||
};
|
||||
|
||||
const generateDxf = async () => {
|
||||
// Data that you want to send to the backend
|
||||
var dateParts = ground.date.split(".");
|
||||
setIsGeneratingDxf(true);
|
||||
const dateParts = ground.date.split(".");
|
||||
const month = dateParts[1];
|
||||
const year = parseInt(dateParts[2], 10);
|
||||
const formattedDate = month.padStart(2, "0") + "." + year;
|
||||
|
||||
// Extract day, month, and year
|
||||
var day = parseInt(dateParts[0], 10);
|
||||
var month = parseInt(dateParts[1], 10);
|
||||
var year = parseInt(dateParts[2], 10);
|
||||
|
||||
// Format the result
|
||||
var formattedDate = month.toString().padStart(2, "0") + "." + year;
|
||||
const inputData = {
|
||||
args: [
|
||||
ground.objValue1 + ground.objName,
|
||||
ground.pr_title,
|
||||
ground.object,
|
||||
ground.in_city +
|
||||
", " +
|
||||
ground.commune +
|
||||
", dz. nr " +
|
||||
ground.all_parcels,
|
||||
ground.in_city + ", " + ground.commune + ", dz. nr " + ground.all_parcels,
|
||||
formattedDate,
|
||||
ground.hor_len,
|
||||
ground.rod_len,
|
||||
],
|
||||
};
|
||||
// object1 = args[0] #ZK2a-1P
|
||||
// object2 = args[1] #Budowa przyłącza
|
||||
// object3 = args[2] #Przyłącze kablowe
|
||||
// adres = args[3]
|
||||
// date = args[4]
|
||||
// len_h = int(args[5])
|
||||
// len_v = int(args[6])
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/generateDxf", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(inputData),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Response was not ok.");
|
||||
}
|
||||
if (!response.ok) throw new Error("Response was not ok.");
|
||||
|
||||
// Download the response (the output file)
|
||||
const blob = await response.blob();
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
@@ -281,271 +217,329 @@ export default function Rezy() {
|
||||
a.click();
|
||||
a.remove();
|
||||
} catch (error) {
|
||||
console.error("There was an error:", error);
|
||||
console.error("Error:", error);
|
||||
alert("Błąd podczas generowania rysunku");
|
||||
}
|
||||
setIsGeneratingDxf(false);
|
||||
};
|
||||
|
||||
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} />
|
||||
<Layout title="Wastpol - Kalkulator uziemień">
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
{/* Page Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<div className="p-3 bg-yellow-100 rounded-lg">
|
||||
<LightningBoltIcon className="w-8 h-8 text-yellow-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Kalkulator uziemień</h1>
|
||||
<p className="text-gray-600">Oblicz parametry układu uziomowego i wygeneruj dokumentację</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="flex flex-1 flex-col items-center">
|
||||
<div className="flex flex-row m-24 space-x-24">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Input Data Section */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<ClipboardListIcon className="w-5 h-5 text-blue-600" />
|
||||
<span>Dane pomiarowe</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wprowadź podstawowe dane pomiarowe i parametry projektu
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
1. Data wykonania pomiaru
|
||||
<br />
|
||||
<br />
|
||||
<b className="m-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Data wykonania pomiaru
|
||||
</label>
|
||||
<DatePicker
|
||||
locale="pl"
|
||||
selected={calDate}
|
||||
onChange={(date) => {
|
||||
console.log(date);
|
||||
console.log(typeof date);
|
||||
const day = date.getDate().toString().padStart(2, "0"); // Add leading zero if necessary
|
||||
const month = (date.getMonth() + 1)
|
||||
.toString()
|
||||
.padStart(2, "0"); // Month is 0-indexed, add 1 to get the correct month
|
||||
setCalDate(date);
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const year = date.getFullYear();
|
||||
const formattedDate = `${day}.${month}.${year}`;
|
||||
console.log(formattedDate);
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
date: formattedDate,
|
||||
}));
|
||||
setCalDate(date);
|
||||
setGround((current) => ({ ...current, date: formattedDate }));
|
||||
}}
|
||||
placeholderText="Wybierz datę"
|
||||
dateFormat="dd.MM.yyyy"
|
||||
className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</b>
|
||||
<br />
|
||||
<br />
|
||||
<RadioGroup
|
||||
label="2. Wymagane uziemienie"
|
||||
size={16}
|
||||
value={neededValue}
|
||||
options={options}
|
||||
onChange={(event) => {
|
||||
setNeededValue(event.target.value);
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Wymagane uziemienie
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{options.map((option) => (
|
||||
<label key={option.value} className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
value={option.value}
|
||||
checked={neededValue === option.value}
|
||||
onChange={(e) => setNeededValue(e.target.value)}
|
||||
className="mr-2"
|
||||
/>
|
||||
<TextInputField
|
||||
label="3. Rezystywność gruntu (po korekcie wszrg)"
|
||||
description="typowo 80-150"
|
||||
<span>{option.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Rezystywność gruntu pozioma (Ωm)"
|
||||
placeholder="86"
|
||||
value={resHValue}
|
||||
onChange={(e) => {
|
||||
setResHValue(e.target.value);
|
||||
setResVValue((ground.wanted==30)?
|
||||
getRandomInt(
|
||||
parseInt(e.target.value) - 10,
|
||||
parseInt(e.target.value) - 4
|
||||
):getRandomInt(
|
||||
parseInt(e.target.value) - 20,
|
||||
parseInt(e.target.value) - 10
|
||||
)
|
||||
const val = parseInt(e.target.value);
|
||||
const randomV = ground.wanted == 30 ?
|
||||
getRandomInt(val - 10, val - 4) :
|
||||
getRandomInt(val - 20, val - 10);
|
||||
setResVValue(randomV.toString());
|
||||
}}
|
||||
/>
|
||||
|
||||
);
|
||||
}}
|
||||
value={resHValue}
|
||||
/>
|
||||
<TextInputField
|
||||
label="4. Numer protokołu rezystywności gruntu"
|
||||
// description=""
|
||||
<Input
|
||||
label="Numer protokołu pomiarowego"
|
||||
placeholder="435"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({ ...current, no: e.target.value }))
|
||||
}
|
||||
value={ground.no}
|
||||
/>{" "}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, no: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TextInputField
|
||||
label="5. Tytuł projektu"
|
||||
description="Budowa/modernizacja przyłącza/sieci kablowej/napowietrznej"
|
||||
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
label="Tytuł projektu"
|
||||
placeholder="Budowa przyłącza kablowego nN"
|
||||
width={440}
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
pr_title: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.pr_title}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, pr_title: e.target.value }))}
|
||||
/>
|
||||
<TextInputField
|
||||
label="6. Obiekt"
|
||||
// description=""
|
||||
|
||||
<Input
|
||||
label="Obiekt"
|
||||
placeholder="Przyłącz kablowy nN"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
object: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.object}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, object: e.target.value }))}
|
||||
/>
|
||||
<TextInputField
|
||||
label="7. Miejscowość"
|
||||
// description=""
|
||||
|
||||
<Input
|
||||
label="Miejscowość"
|
||||
placeholder="Paszyn"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
in_city: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.in_city}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, in_city: e.target.value }))}
|
||||
/>
|
||||
<TextInputField
|
||||
label="8. Gmina/Obręb"
|
||||
// description=""
|
||||
placeholder="gm. Chełmiec lub obr. 116"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
commune: e.target.value,
|
||||
}))
|
||||
}
|
||||
|
||||
<Input
|
||||
label="Gmina/Obręb"
|
||||
placeholder="gm. Chełmiec"
|
||||
value={ground.commune}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, commune: e.target.value }))}
|
||||
/>
|
||||
<TextInputField
|
||||
label="9. Działki"
|
||||
// description=""
|
||||
placeholder="Wszystkie numery działek"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
all_parcels: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.all_parcels}
|
||||
/>
|
||||
<TextInputField
|
||||
label="10. Działka przyłączana"
|
||||
// description=""
|
||||
placeholder="423"
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
target_parcel: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.target_parcel}
|
||||
/>
|
||||
<TextInputField
|
||||
label="11. Współrzędne układu uziomowego"
|
||||
// description=""
|
||||
placeholder={"49°42'54\"N 20°38'0\"E"}
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
geo_data: e.target.value,
|
||||
}))
|
||||
}
|
||||
value={ground.geo_data}
|
||||
/>{" "}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Input
|
||||
label="Wszystkie działki"
|
||||
placeholder="423, 424, 425"
|
||||
value={ground.all_parcels}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, all_parcels: e.target.value }))}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Działka przyłączana"
|
||||
placeholder="423"
|
||||
value={ground.target_parcel}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, target_parcel: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Współrzędne układu uziomowego"
|
||||
placeholder="49°42'54"N 20°38'0"E"
|
||||
value={ground.geo_data}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, geo_data: e.target.value }))}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<RadioGroup
|
||||
label="1. Projektowany/istniejący"
|
||||
size={16}
|
||||
value={objValue1}
|
||||
options={objOptions1}
|
||||
onChange={(event) => {
|
||||
setObjValue1(event.target.value);
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
objValue1: event.target.value,
|
||||
}));
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Typ obiektu
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{objOptions1.map((option) => (
|
||||
<label key={option.value} className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
value={option.value}
|
||||
checked={objValue1 === option.value}
|
||||
onChange={(e) => {
|
||||
setObjValue1(e.target.value);
|
||||
setGround(curr => ({ ...curr, objValue1: e.target.value }));
|
||||
}}
|
||||
className="mr-2"
|
||||
/>
|
||||
<TextInputField
|
||||
label="2. Nazwa uziemianego obiektu"
|
||||
// description=""
|
||||
placeholder={"ZK2a-1P lub słup nr 54"}
|
||||
width={440}
|
||||
onChange={(e) =>
|
||||
setGround((current) => ({
|
||||
...current,
|
||||
objName: e.target.value,
|
||||
}))
|
||||
}
|
||||
<span>{option.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Nazwa uziemianego obiektu"
|
||||
placeholder="ZK2a-1P lub słup nr 54"
|
||||
value={ground.objName}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, objName: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Results and Actions Section */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<CalculatorIcon className="w-5 h-5 text-green-600" />
|
||||
<span>Obliczenia</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Button
|
||||
onClick={() => {
|
||||
const res = getGrounding(
|
||||
parseInt(neededValue),
|
||||
parseFloat(resHValue),
|
||||
parseFloat(resVValue),
|
||||
ground.date
|
||||
);
|
||||
setGround((current) => ({ ...current, ...res }));
|
||||
}}
|
||||
appearance="primary"
|
||||
// className="p-2 bg-slate-200 rounded-md"
|
||||
onClick={calculateGrounding}
|
||||
disabled={!ground.date || !resHValue || !resVValue || isCalculating}
|
||||
loading={isCalculating}
|
||||
className="w-full"
|
||||
>
|
||||
Oblicz Uziemienie
|
||||
<CalculatorIcon className="w-5 h-5 mr-2" />
|
||||
{isCalculating ? 'Obliczanie...' : 'Oblicz uziemienie'}
|
||||
</Button>
|
||||
|
||||
{ground.result > 0 && (
|
||||
<div className="space-y-3">
|
||||
<Alert variant="success">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span>Uziemienie poziome:</span>
|
||||
<Badge variant="info">{ground.result_h} Ω</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Uziemienie pionowe:</span>
|
||||
<Badge variant="info">{ground.result_v} Ω</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between font-semibold">
|
||||
<span>Uziemienie całkowite:</span>
|
||||
<Badge variant="success">{ground.result} Ω</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Liczba szpil:</span>
|
||||
<Badge>{ground.rod_num} szt</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Długość bednarki:</span>
|
||||
<Badge>{ground.hor_len} m</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</Alert>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<DocumentDownloadIcon className="w-5 h-5 text-purple-600" />
|
||||
<span>Generuj dokumentację</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Button
|
||||
onClick={() => {
|
||||
const docx = generateDocument(ground);
|
||||
}}
|
||||
appearance="primary"
|
||||
// className="p-2 bg-slate-200 rounded-md"
|
||||
onClick={generateDocument}
|
||||
disabled={ground.result <= 0 || isGeneratingDoc}
|
||||
loading={isGeneratingDoc}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
Generuj Opis
|
||||
{isGeneratingDoc ? 'Generowanie...' : 'Generuj opis (DOCX)'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={generateDxf}
|
||||
appearance="primary"
|
||||
// className="p-2 bg-slate-200 rounded-md"
|
||||
disabled={ground.result <= 0 || isGeneratingDxf}
|
||||
loading={isGeneratingDxf}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
Generuj Rysunek
|
||||
{isGeneratingDxf ? 'Generowanie...' : 'Generuj rysunek (DXF)'}
|
||||
</Button>
|
||||
<h2>
|
||||
Uziemienie poziome: {ground.result_h} Ω ({ground.wszrg_h})
|
||||
</h2>
|
||||
<h2>
|
||||
Uziemienie pionowe: {ground.result_v} Ω ({ground.wszrg_v})
|
||||
</h2>
|
||||
<h2>Uziemienie: {ground.result} Ω</h2>
|
||||
<h2>Szpile: {ground.rod_num} szt</h2>
|
||||
<h2>Bednarka: {ground.hor_len} m</h2>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Instructions */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Instrukcje</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">1</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Wprowadź dane pomiarowe i parametry projektu</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">2</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Kliknij "Oblicz uziemienie" aby wykonać kalkulacje</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">3</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Wygeneruj dokumentację - opis i rysunek techniczny</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</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 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 kalkulatora uziemień</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={() => signIn()} className="w-full" size="lg">
|
||||
Zaloguj się
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
545
pages/uziomy_new.js
Normal file
545
pages/uziomy_new.js
Normal file
@@ -0,0 +1,545 @@
|
||||
import { useState } from "react";
|
||||
import { useSession, signIn } from "next-auth/react";
|
||||
import Layout from "../components/ui/Layout";
|
||||
import { Card, CardHeader, CardContent, CardTitle, CardDescription, Button, Input, Badge, Alert } from "../components/ui/components";
|
||||
import { BoltIcon as LightningBoltIcon, CalculatorIcon, DocumentArrowDownIcon as DocumentDownloadIcon, ClipboardDocumentListIcon as ClipboardListIcon } from '@heroicons/react/24/outline';
|
||||
import DatePicker from "react-datepicker";
|
||||
import { registerLocale } from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import pl from "date-fns/locale/pl";
|
||||
import PizZip from "pizzip";
|
||||
import Docxtemplater from "docxtemplater";
|
||||
registerLocale("pl", pl);
|
||||
|
||||
export default function Uziomy() {
|
||||
const { data: session } = useSession();
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [isCalculating, setIsCalculating] = useState(false);
|
||||
const [isGeneratingDoc, setIsGeneratingDoc] = useState(false);
|
||||
const [isGeneratingDxf, setIsGeneratingDxf] = useState(false);
|
||||
const [calDate, setCalDate] = useState(null);
|
||||
|
||||
const [ground, setGround] = useState({
|
||||
wet_coef: 0,
|
||||
resistivity: 0,
|
||||
resistance: 0,
|
||||
measure_dist: 0,
|
||||
rod_len: 0,
|
||||
rod_num: 0,
|
||||
rod_coef: 0,
|
||||
hor_len: 0,
|
||||
result_v: 0,
|
||||
result_h: 0,
|
||||
result: 0,
|
||||
wszrg_h: 0,
|
||||
wszrg_v: 0,
|
||||
wanted: 0,
|
||||
date: undefined,
|
||||
no: 0,
|
||||
pr_title: "Budowa przyłącza kablowego nN",
|
||||
in_city: undefined,
|
||||
commune: undefined,
|
||||
all_parcels: undefined,
|
||||
target_parcel: undefined,
|
||||
geo_data: undefined,
|
||||
object: "Przyłącz kablowy nN",
|
||||
objValue1: "proj.",
|
||||
objName: undefined,
|
||||
});
|
||||
|
||||
const [options] = useState([
|
||||
{ label: "5 Ω", value: "5" },
|
||||
{ label: "10 Ω", value: "10" },
|
||||
{ label: "15 Ω", value: "15" },
|
||||
{ label: "30 Ω", value: "30" },
|
||||
]);
|
||||
const [neededValue, setNeededValue] = useState("5");
|
||||
const [resHValue, setResHValue] = useState("88");
|
||||
const [resVValue, setResVValue] = useState("89");
|
||||
|
||||
const [objOptions1] = useState([
|
||||
{ label: "proj.", value: "proj." },
|
||||
{ label: "istn.", value: "istn." },
|
||||
]);
|
||||
const [objValue1, setObjValue1] = useState("proj.");
|
||||
|
||||
function getRandomInt(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function parseDate(dateString) {
|
||||
const parts = dateString.split(".");
|
||||
const day = parseInt(parts[0], 10);
|
||||
const month = parseInt(parts[1], 10) - 1;
|
||||
const year = parseInt(parts[2], 10);
|
||||
return new Date(year, month, day);
|
||||
}
|
||||
|
||||
function getGrounding(wanted, wszrg_h, wszrg_v, date) {
|
||||
const dateObject = parseDate(date);
|
||||
const month = dateObject.getMonth() + 1;
|
||||
|
||||
const wet_coef = month >= 6 && month <= 9 ? 1.2 : 1.6;
|
||||
const rod_len = wanted === 30 ? 2 : 3;
|
||||
|
||||
const resistivity_h = wszrg_h / wet_coef;
|
||||
const measure_dist_h = 1;
|
||||
const resistance_h = resistivity_h / (2 * Math.PI * measure_dist_h);
|
||||
|
||||
const resistivity_v = wszrg_v / wet_coef;
|
||||
const measure_dist_v = 1 + rod_len;
|
||||
const resistance_v = resistivity_v / (2 * Math.PI * measure_dist_v);
|
||||
|
||||
const result_v = (wszrg_v / (2 * Math.PI * rod_len)) * (Math.log((8 * rod_len) / 0.016) - 1);
|
||||
|
||||
let rod_num = 2;
|
||||
let hor_len = 1 + (rod_num - 1) * rod_len * 2;
|
||||
let result_h = (wszrg_h / (2 * Math.PI * hor_len)) * Math.log((hor_len * hor_len) / (1 * 0.0191));
|
||||
|
||||
let rod_coef = Math.pow(rod_num, 4) * 0.00002 - Math.pow(rod_num, 3) * 0.0009 +
|
||||
Math.pow(rod_num, 2) * 0.0137 - rod_num * 0.0981 + 1.0468;
|
||||
|
||||
let result = (result_v * result_h) / (result_v * rod_coef + rod_num * result_h * rod_coef);
|
||||
|
||||
while (result > wanted) {
|
||||
rod_num += 1;
|
||||
hor_len = 1 + (rod_num - 1) * rod_len * 2;
|
||||
result_h = (wszrg_h / (2 * Math.PI * hor_len)) * Math.log((hor_len * hor_len) / (1 * 0.0191));
|
||||
rod_coef = Math.pow(rod_num, 4) * 0.00002 - Math.pow(rod_num, 3) * 0.0009 +
|
||||
Math.pow(rod_num, 2) * 0.0137 - rod_num * 0.0981 + 1.0468;
|
||||
result = (result_v * result_h) / (result_v * rod_coef + rod_num * result_h * rod_coef);
|
||||
}
|
||||
|
||||
return {
|
||||
wet_coef: wet_coef,
|
||||
resistivity_h: resistivity_h.toFixed(2),
|
||||
resistance_h: resistance_h.toFixed(2),
|
||||
measure_dist_h: measure_dist_h,
|
||||
resistivity_v: resistivity_v.toFixed(2),
|
||||
resistance_v: resistance_v.toFixed(2),
|
||||
measure_dist_v: measure_dist_v,
|
||||
rod_len: rod_len,
|
||||
rod_num: rod_num,
|
||||
rod_coef: rod_coef.toFixed(2),
|
||||
hor_len: hor_len,
|
||||
result_v: result_v.toFixed(2),
|
||||
result_h: result_h.toFixed(2),
|
||||
result: result.toFixed(2),
|
||||
wszrg_h: wszrg_h,
|
||||
wszrg_v: wszrg_v,
|
||||
wanted: neededValue,
|
||||
};
|
||||
}
|
||||
|
||||
const calculateGrounding = () => {
|
||||
setIsCalculating(true);
|
||||
try {
|
||||
const res = getGrounding(
|
||||
parseInt(neededValue),
|
||||
parseFloat(resHValue),
|
||||
parseFloat(resVValue),
|
||||
ground.date
|
||||
);
|
||||
setGround((current) => ({ ...current, ...res }));
|
||||
} catch (error) {
|
||||
alert("Błąd podczas obliczeń: " + error.message);
|
||||
}
|
||||
setIsCalculating(false);
|
||||
};
|
||||
|
||||
const generateDocument = async () => {
|
||||
setIsGeneratingDoc(true);
|
||||
const data = {
|
||||
...ground,
|
||||
resisted_object: ground.objValue1 + " " + ground.objName,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/generateDocx", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Response was not ok.");
|
||||
|
||||
const blob = await response.blob();
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = downloadUrl;
|
||||
a.download = "opis_uziemienia.docx";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
alert("Błąd podczas generowania dokumentu");
|
||||
}
|
||||
setIsGeneratingDoc(false);
|
||||
};
|
||||
|
||||
const generateDxf = async () => {
|
||||
setIsGeneratingDxf(true);
|
||||
const dateParts = ground.date.split(".");
|
||||
const month = dateParts[1];
|
||||
const year = parseInt(dateParts[2], 10);
|
||||
const formattedDate = month.padStart(2, "0") + "." + year;
|
||||
|
||||
const inputData = {
|
||||
args: [
|
||||
ground.objValue1 + ground.objName,
|
||||
ground.pr_title,
|
||||
ground.object,
|
||||
ground.in_city + ", " + ground.commune + ", dz. nr " + ground.all_parcels,
|
||||
formattedDate,
|
||||
ground.hor_len,
|
||||
ground.rod_len,
|
||||
],
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/generateDxf", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(inputData),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Response was not ok.");
|
||||
|
||||
const blob = await response.blob();
|
||||
const downloadUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = downloadUrl;
|
||||
a.download = "uziom.dxf";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
alert("Błąd podczas generowania rysunku");
|
||||
}
|
||||
setIsGeneratingDxf(false);
|
||||
};
|
||||
|
||||
if (session) {
|
||||
return (
|
||||
<Layout title="Wastpol - Kalkulator uziemień">
|
||||
<div className="p-6 max-w-7xl mx-auto">
|
||||
{/* Page Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<div className="p-3 bg-yellow-100 rounded-lg">
|
||||
<LightningBoltIcon className="w-8 h-8 text-yellow-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Kalkulator uziemień</h1>
|
||||
<p className="text-gray-600">Oblicz parametry układu uziomowego i wygeneruj dokumentację</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Input Data Section */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<ClipboardListIcon className="w-5 h-5 text-blue-600" />
|
||||
<span>Dane pomiarowe</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wprowadź podstawowe dane pomiarowe i parametry projektu
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Data wykonania pomiaru
|
||||
</label>
|
||||
<DatePicker
|
||||
locale="pl"
|
||||
selected={calDate}
|
||||
onChange={(date) => {
|
||||
setCalDate(date);
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const year = date.getFullYear();
|
||||
const formattedDate = `${day}.${month}.${year}`;
|
||||
setGround((current) => ({ ...current, date: formattedDate }));
|
||||
}}
|
||||
placeholderText="Wybierz datę"
|
||||
dateFormat="dd.MM.yyyy"
|
||||
className="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Wymagane uziemienie
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{options.map((option) => (
|
||||
<label key={option.value} className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
value={option.value}
|
||||
checked={neededValue === option.value}
|
||||
onChange={(e) => setNeededValue(e.target.value)}
|
||||
className="mr-2"
|
||||
/>
|
||||
<span>{option.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Rezystywność gruntu pozioma (Ωm)"
|
||||
placeholder="86"
|
||||
value={resHValue}
|
||||
onChange={(e) => {
|
||||
setResHValue(e.target.value);
|
||||
const val = parseInt(e.target.value);
|
||||
const randomV = ground.wanted == 30 ?
|
||||
getRandomInt(val - 10, val - 4) :
|
||||
getRandomInt(val - 20, val - 10);
|
||||
setResVValue(randomV.toString());
|
||||
}}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Numer protokołu pomiarowego"
|
||||
placeholder="435"
|
||||
value={ground.no}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, no: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
label="Tytuł projektu"
|
||||
placeholder="Budowa przyłącza kablowego nN"
|
||||
value={ground.pr_title}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, pr_title: e.target.value }))}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Obiekt"
|
||||
placeholder="Przyłącz kablowy nN"
|
||||
value={ground.object}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, object: e.target.value }))}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Miejscowość"
|
||||
placeholder="Paszyn"
|
||||
value={ground.in_city}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, in_city: e.target.value }))}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Gmina/Obręb"
|
||||
placeholder="gm. Chełmiec"
|
||||
value={ground.commune}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, commune: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Input
|
||||
label="Wszystkie działki"
|
||||
placeholder="423, 424, 425"
|
||||
value={ground.all_parcels}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, all_parcels: e.target.value }))}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Działka przyłączana"
|
||||
placeholder="423"
|
||||
value={ground.target_parcel}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, target_parcel: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Współrzędne układu uziomowego"
|
||||
placeholder="49°42'54"N 20°38'0"E"
|
||||
value={ground.geo_data}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, geo_data: e.target.value }))}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Typ obiektu
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{objOptions1.map((option) => (
|
||||
<label key={option.value} className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
value={option.value}
|
||||
checked={objValue1 === option.value}
|
||||
onChange={(e) => {
|
||||
setObjValue1(e.target.value);
|
||||
setGround(curr => ({ ...curr, objValue1: e.target.value }));
|
||||
}}
|
||||
className="mr-2"
|
||||
/>
|
||||
<span>{option.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Nazwa uziemianego obiektu"
|
||||
placeholder="ZK2a-1P lub słup nr 54"
|
||||
value={ground.objName}
|
||||
onChange={(e) => setGround(curr => ({ ...curr, objName: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Results and Actions Section */}
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<CalculatorIcon className="w-5 h-5 text-green-600" />
|
||||
<span>Obliczenia</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Button
|
||||
onClick={calculateGrounding}
|
||||
disabled={!ground.date || !resHValue || !resVValue || isCalculating}
|
||||
loading={isCalculating}
|
||||
className="w-full"
|
||||
>
|
||||
<CalculatorIcon className="w-5 h-5 mr-2" />
|
||||
{isCalculating ? 'Obliczanie...' : 'Oblicz uziemienie'}
|
||||
</Button>
|
||||
|
||||
{ground.result > 0 && (
|
||||
<div className="space-y-3">
|
||||
<Alert variant="success">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span>Uziemienie poziome:</span>
|
||||
<Badge variant="info">{ground.result_h} Ω</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Uziemienie pionowe:</span>
|
||||
<Badge variant="info">{ground.result_v} Ω</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between font-semibold">
|
||||
<span>Uziemienie całkowite:</span>
|
||||
<Badge variant="success">{ground.result} Ω</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Liczba szpil:</span>
|
||||
<Badge>{ground.rod_num} szt</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Długość bednarki:</span>
|
||||
<Badge>{ground.hor_len} m</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</Alert>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<DocumentDownloadIcon className="w-5 h-5 text-purple-600" />
|
||||
<span>Generuj dokumentację</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Button
|
||||
onClick={generateDocument}
|
||||
disabled={ground.result <= 0 || isGeneratingDoc}
|
||||
loading={isGeneratingDoc}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
{isGeneratingDoc ? 'Generowanie...' : 'Generuj opis (DOCX)'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={generateDxf}
|
||||
disabled={ground.result <= 0 || isGeneratingDxf}
|
||||
loading={isGeneratingDxf}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
{isGeneratingDxf ? 'Generowanie...' : 'Generuj rysunek (DXF)'}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Instructions */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Instrukcje</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">1</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Wprowadź dane pomiarowe i parametry projektu</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">2</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Kliknij "Oblicz uziemienie" aby wykonać kalkulacje</p>
|
||||
</div>
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-xs font-semibold text-blue-600">3</span>
|
||||
</div>
|
||||
<p className="text-gray-600">Wygeneruj dokumentację - opis i rysunek techniczny</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<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 kalkulatora uziemień</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={() => signIn()} className="w-full" size="lg">
|
||||
Zaloguj się
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,16 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -17,3 +21,80 @@ a {
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-semibold text-gray-900;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-3xl lg:text-4xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-2xl lg:text-3xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-xl lg:text-2xl;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-gray-100 hover:bg-gray-200 text-gray-900 font-medium py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
@apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #cbd5e1 #f1f5f9;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
/* Loading animation */
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
/* Canvas styling */
|
||||
canvas {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,38 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||
"./templates/**/*.{js,ts,jsx,tsx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#eff6ff',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
},
|
||||
plugins: [],
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.5s ease-in-out',
|
||||
'slide-up': 'slideUp 0.3s ease-out',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(10px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user