Meged Ombase's and Salvi's changes from main branch in frontend.
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
# Info
|
||||
|
||||
---
|
||||
|
||||
## Work distribution
|
||||
|
||||
- Design: Kapil
|
||||
- Frontend: Shivani, Shriniwas, Ombase, Tejas, Sonali, Dinesh
|
||||
- Backend: Vedang, Lalit
|
||||
- DBMS: Lalit
|
||||
- HDFS: Sonali, Prajakta, Poonam
|
||||
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
In this mini project, we'll be creating something similar to Google Drive. There shall be 3 pages, landing, login/registration and main page where all the files uploaded by the user will be shown. Kapil is supposed to design the UI and send it over by Sunday. Based on this design, people in the frontend department shall work on the pages.
|
||||
|
||||
Landing page is basically a home page containing small description of the project, features etc. Login/registration page will ask for username/password. Lalit is expected to implement it using MySQL/MongoDB, i.e. he is responsible for user authentication. Once the user is authenticated, they shall be redirected to the main page where they can view their files, and upload/delete them.
|
||||
|
||||
Vedang is responsible to developing the backend code in Java for encrypting the uploaded files and decrypting the downloaded files. These files will be stored in Hadoop File System (HDFS) which shall be handled by Sonali, Prajakta and Poonam.
|
||||
|
||||
We are planning to make this a good enough project so that we can maybe open source it and make it a part of our resume. Therefore it is important that y'all work sahi se and finish your stuff by the deadlines. We are expected to finish the entire project ✨ before IN-SEM exam ✨
|
||||
|
||||
While you are working on the project, note down the things you are doing so that we can provide it to the people doing the documentation.
|
||||
|
||||
---
|
||||
|
||||
Generated
+4963
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
@@ -0,0 +1,134 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
const FileTable = ({ initialPath }) => {
|
||||
const [currentPath, setCurrentPath] = useState(initialPath || "/");
|
||||
const [files, setFiles] = useState([]);
|
||||
|
||||
// Helpers to parse entry
|
||||
const getType = (entry) =>
|
||||
entry.trim().startsWith("📁") ? "Folder" : "File";
|
||||
const getName = (entry) => entry.trim().replace(/^📁\s*|^📄\s*/, "");
|
||||
const isFile = (entry) => getType(entry) === "File";
|
||||
|
||||
// Fetch and show only top-level entries (indentation = 0)
|
||||
const fetchFiles = async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`http://192.168.29.61:8080/api/hdfs/listFiles?hdfsPath=${currentPath}`
|
||||
);
|
||||
const data = await response.json();
|
||||
|
||||
// Filter entries: only those without leading spaces
|
||||
const filtered = data.filter(
|
||||
(entry) => entry.match(/^ */)[0].length === 0
|
||||
);
|
||||
setFiles(filtered);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch files:", error);
|
||||
setFiles([]);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchFiles();
|
||||
}, [currentPath]);
|
||||
|
||||
// Navigate into a folder
|
||||
const handleOpenFolder = (folderName) => {
|
||||
const newPath =
|
||||
currentPath === "/" ? `/${folderName}` : `${currentPath}/${folderName}`;
|
||||
setCurrentPath(newPath);
|
||||
};
|
||||
|
||||
// Go up one level
|
||||
const goBack = () => {
|
||||
if (currentPath === "/") return;
|
||||
const parts = currentPath.split("/").filter(Boolean);
|
||||
parts.pop();
|
||||
setCurrentPath(parts.length === 0 ? "/" : `/${parts.join("/")}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative overflow-x-auto shadow-md rounded-lg">
|
||||
<div className="flex items-center justify-between px-6 py-4 bg-blue-100 text-black font-medium">
|
||||
<span>Path: {currentPath}</span>
|
||||
{currentPath !== "/" && (
|
||||
<button onClick={goBack} className="text-blue-600 hover:underline">
|
||||
⬅️ Go Back
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<table className="w-full text-sm text-left text-black">
|
||||
<thead className="text-xs text-black uppercase bg-blue-100">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
File Name
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Type
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{files.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan="3" className="px-6 py-4 text-gray-600">
|
||||
No files found.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
files.map((entry, idx) => {
|
||||
const name = getName(entry);
|
||||
const type = getType(entry);
|
||||
const encodedPath = encodeURIComponent(`${currentPath}/${name}`);
|
||||
const downloadUrl = `http://192.168.29.61:8080/api/hdfs/downloadFile?hdfsPath=${encodedPath}&localPath=E:/testdownload/${name}&kalas=${
|
||||
currentPath.split("/")[1] || "user"
|
||||
}`;
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={idx}
|
||||
className="even:bg-blue-50 odd:bg-white border-b border-blue-200"
|
||||
>
|
||||
<td className="px-6 py-4 font-medium whitespace-nowrap">
|
||||
{name}
|
||||
</td>
|
||||
<td className="px-6 py-4">{type}</td>
|
||||
<td className="px-6 py-4">
|
||||
{isFile(entry) ? (
|
||||
<a
|
||||
href={downloadUrl}
|
||||
className="font-medium text-blue-600 hover:underline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleOpenFolder(name)}
|
||||
className="font-medium text-blue-600 hover:underline"
|
||||
>
|
||||
Open
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
FileTable.propTypes = {
|
||||
initialPath: PropTypes.string,
|
||||
};
|
||||
|
||||
export default FileTable;
|
||||
@@ -0,0 +1,68 @@
|
||||
import React, { useState } from "react";
|
||||
import { uploadFileToHDFS } from "../utils/api";
|
||||
|
||||
const FileUpload = () => {
|
||||
const [file, setFile] = useState(null);
|
||||
const [hdfsPath, setHdfsPath] = useState("/kalas");
|
||||
const [uploadedFileName, setUploadedFileName] = useState("");
|
||||
const [username, setUsername] = useState("kalas");
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!file || !uploadedFileName) {
|
||||
return;
|
||||
}
|
||||
uploadFileToHDFS(file, hdfsPath, uploadedFileName, username);
|
||||
};
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="p-5 py-16 border rounded shadow w-full max-w-md"
|
||||
>
|
||||
<h2 className="text-lg font-bold mb-2">Upload File Your File</h2>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
onChange={(e) => {
|
||||
setFile(e.target.files[0]);
|
||||
setUploadedFileName(e.target.files[0]?.name || "");
|
||||
}}
|
||||
className="mb-2"
|
||||
/>
|
||||
|
||||
{/* <input
|
||||
type="text"
|
||||
placeholder="HDFS Path"
|
||||
value={hdfsPath}
|
||||
onChange={(e) => setHdfsPath(e.target.value)}
|
||||
className="border p-2 mb-2 w-full"
|
||||
/> */}
|
||||
|
||||
{/* <input
|
||||
type="text"
|
||||
placeholder="Uploaded File Name"
|
||||
value={uploadedFileName}
|
||||
onChange={(e) => setUploadedFileName(e.target.value)}
|
||||
className="border p-2 mb-2 w-full"
|
||||
/> */}
|
||||
|
||||
{/* <input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="border p-2 mb-2 w-full"
|
||||
/> */}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded"
|
||||
>
|
||||
Upload File
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default FileUpload;
|
||||
@@ -0,0 +1,287 @@
|
||||
import React from "react";
|
||||
import Footer from "../components/Footer";
|
||||
{
|
||||
/* <img src="vector.png" alt="" className="h-100" /> */
|
||||
}
|
||||
|
||||
const DrivethruLandingPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-white overflow-hidden">
|
||||
<div className="bg-white min-h-screen flex items-center relative">
|
||||
<div className="container mx-auto px-6 relative z-10">
|
||||
<div className="flex flex-col md:flex-row items-center">
|
||||
<div className="hidden md:block md:w-1/2 lg:w-3/5"></div>
|
||||
|
||||
<div className="w-full mt-70 md:w-1/2 lg:w-2/5 max-w-lg bg-transparent">
|
||||
<div className="flex items-center mb-8">
|
||||
<div className="text-cyan-400 mr-3">
|
||||
<svg
|
||||
className="w-12 h-12"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 2L2 12L12 22L22 12L12 2Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-5xl font-bold text-black">Drive-thru</h1>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold mb-6 text-black">
|
||||
Store, Access & Share Your Files — Anytime, Anywhere!
|
||||
</h2>
|
||||
|
||||
<p className="text-gray-800 mb-10 text-lg">
|
||||
A simple, secure, and fast cloud storage solution for all your
|
||||
files. Upload, organize, and access with ease.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-row space-x-4">
|
||||
<button className="px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-full transition-colors duration-200 shadow-md">
|
||||
Get Started
|
||||
</button>
|
||||
<button className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full transition-colors duration-200 shadow-md">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white py-16">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between mb-24">
|
||||
{" "}
|
||||
<div className="w-full md:w-1/2 lg:w-2/5 flex justify-center md:justify-end">
|
||||
<img
|
||||
src="./He.png"
|
||||
alt="Person using Drive-thru on laptop"
|
||||
className="mx h-auto max-w-full"
|
||||
/>
|
||||
</div>
|
||||
{/* Features Card */}
|
||||
<div className="w-full md:w-1/2 lg:w-3/5 mb-12 md:mb-0">
|
||||
<div className="bg-blue-100 rounded-3xl p-8 md:p-10 shadow-lg">
|
||||
<h2 className="text-3xl font-bold mb-8">Key Features</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start">
|
||||
<div className="text-emerald-500 mr-3 mt-1">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-lg font-semibold">
|
||||
"Easy Upload & Access" – Drag & drop, instant access.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="text-emerald-500 mr-3 mt-1">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-lg font-semibold">
|
||||
"Secure & Private" – End-to-end encryption.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="text-emerald-500 mr-3 mt-1">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-lg font-semibold">
|
||||
"Seamless Sharing" – Share files with one click.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="text-emerald-500 mr-3 mt-1">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h.5A2.5 2.5 0 0020 5.5v-1.65"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-lg font-semibold">
|
||||
"Access Anywhere" – Works on all devices.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* How It Works Section */}
|
||||
<div className="flex flex-col md:flex-row-reverse items-center justify-between">
|
||||
{/* Person with Phone Image */}
|
||||
<div className="w-full md:w-1/2 lg:w-2/5 mb-12 md:mb-0 flex justify-center md:justify-start">
|
||||
<img
|
||||
src="./She.png"
|
||||
alt="Person using Drive-thru on phone"
|
||||
className="h-auto max-w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* How It Works Card */}
|
||||
<div className="w-full md:w-1/2 lg:w-3/5">
|
||||
<div className="bg-blue-100 rounded-3xl p-8 md:p-10 shadow-lg">
|
||||
<h2 className="text-3xl font-bold mb-8">How It Works</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start">
|
||||
<div className="text-emerald-500 mr-3 mt-1">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-lg font-semibold">
|
||||
Create an account – Sign up in seconds.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="text-emerald-500 mr-3 mt-1">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-lg font-semibold">
|
||||
Upload files – Drag & drop or select from your device.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="text-emerald-500 mr-3 mt-1">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
></path>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-lg font-semibold">
|
||||
Manage files – Rename, move, or delete easily.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="text-emerald-500 mr-3 mt-1">
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-lg font-semibold">
|
||||
Access anytime – Open files from any device.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DrivethruLandingPage;
|
||||
@@ -1,17 +1,107 @@
|
||||
import React from "react";
|
||||
import Sidebar from "../../components/Sidebar";
|
||||
import FileList from "../../components/FileList";
|
||||
import FileUpload from "../../components/FileUpload";
|
||||
import { FiPlus } from "react-icons/fi";
|
||||
|
||||
const Dashboard = () => {
|
||||
const [files, setFiles] = React.useState([]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const response = await fetch(
|
||||
"http://192.168.29.61:8080/api/hdfs/listFiles?hdfsPath=/"
|
||||
);
|
||||
const data = await response.json();
|
||||
setFiles(data);
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <!-- Main modal --> */}
|
||||
<div
|
||||
id="static-modal"
|
||||
data-modal-backdrop="static"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"
|
||||
>
|
||||
<div class="relative p-4 w-full max-w-170 h-150 flex items-center justify-center">
|
||||
{/* <!-- Modal content --> */}
|
||||
<div class="relative bg-white rounded-lg shadow-sm ">
|
||||
{/* <!-- Modal header --> */}
|
||||
<div class="flex items-center justify-between p-2 md:p-5 rounded-t dark:border-gray-600 border-gray-200">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Static modal
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
data-modal-hide="static-modal"
|
||||
>
|
||||
<svg
|
||||
class="w-3 h-3"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 14 14"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Close modal</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* <!-- Modal body --> */}
|
||||
<div class="p-4 md:p-5 space-y-4">
|
||||
<FileUpload />
|
||||
</div>
|
||||
{/* <!-- Modal footer --> */}
|
||||
{/* <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b ">
|
||||
<button
|
||||
data-modal-hide="static-modal"
|
||||
type="button"
|
||||
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
I accept
|
||||
</button>
|
||||
<button
|
||||
data-modal-hide="static-modal"
|
||||
type="button"
|
||||
class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||||
>
|
||||
Decline
|
||||
</button>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Sidebar />
|
||||
<div className="p-4 sm:ml-64">
|
||||
<div className="p-4 border-2 border-gray-200 border-dashed rounded-lg mt-14">
|
||||
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
|
||||
<p>
|
||||
This is your custom dashboard body. Place your widgets, charts,
|
||||
stats, or other components here.
|
||||
</p>
|
||||
<div className="w-full flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold mb-4">Dashboard</h1>
|
||||
<button
|
||||
data-modal-target="static-modal"
|
||||
data-modal-toggle="static-modal"
|
||||
class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
type="button"
|
||||
>
|
||||
<FiPlus className="text-2xl" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<FileList files={files}></FileList>
|
||||
<section className="w-full flex justify-end items-center min-h-160">
|
||||
{/* <!-- Modal toggle --> */}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -263,7 +263,6 @@ const DrivethruLandingPage = () => {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Image */}
|
||||
<div className="w-full md:w-1/2 flex justify-center order-2 md:order-1">
|
||||
<div className="relative p-4 bg-gradient-to-r from-blue-50 to-emerald-50 rounded-2xl max-w-xs sm:max-w-lg md:max-w-md lg:max-w-lvh">
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
// utils/api.js
|
||||
export const uploadFileToHDFS = async (
|
||||
file,
|
||||
hdfsPath,
|
||||
uploadedFileName,
|
||||
username
|
||||
) => {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
formData.append("hdfsPath", "/kalas");
|
||||
formData.append("uploadedFileName", uploadedFileName);
|
||||
formData.append("username", "kalas");
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
"http://192.168.29.61:8080/api/hdfs/uploadFile",
|
||||
{
|
||||
method: "POST",
|
||||
body: formData,
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json(); // or response.json() if JSON is returned
|
||||
|
||||
console.log("Response:", data);
|
||||
} else {
|
||||
console.error("Upload failed with status:", response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error uploading file:", error);
|
||||
alert("An error occurred while uploading the file.");
|
||||
}
|
||||
};
|
||||
@@ -1,14 +1,26 @@
|
||||
# CC-MINI (2025)
|
||||
|
||||
`frontend` branch is intended only for pushing frontend files within the [Frontend](Frontend/) folder.
|
||||
|
||||
---
|
||||
|
||||
Design: https://www.figma.com/design/37nOQ4PtUUGVTmPAQJ1lwU/Drive-thru
|
||||
## Git config
|
||||
|
||||
## Current state
|
||||
Create a new directory for this project, and run these following commands for initalizing git:
|
||||
|
||||
|  |  |  | 
|
||||
| --- | --- | --- | --- |
|
||||
| [landing](Frontend/samples/landing.png) | [login](Frontend/samples/login.jpg) | [signup](Frontend/samples/signup.jpg) | [dashboard](Frontend/samples/dashboard.jpg)
|
||||
```shell
|
||||
git clone https://github.com/kshitij-ka/cc-mini.git
|
||||
cd cc-mini
|
||||
git config --local user.name "Your name"
|
||||
git config --local user.email "your@ema.il"
|
||||
git config --local core.autocrlf input # For Linux/MacOS users
|
||||
git config --local core.autocrlf true # For Windows users
|
||||
git checkout frontend # If you're working on frontend
|
||||
git checkout backend # If you're working on backend
|
||||
```
|
||||
|
||||
## Where to push?
|
||||
|
||||
- For frontend, please push to [Frontend](https://github.com/kshitij-ka/cc-mini/tree/frontend/Frontend) folder in the [frontend branch](https://github.com/kshitij-ka/cc-mini/tree/frontend).
|
||||
- For backend, please push to [Backend](https://github.com/kshitij-ka/cc-mini/tree/backend/Backend) folder in the [backend branch](https://github.com/kshitij-ka/cc-mini/tree/backend/).
|
||||
- I will be merging changes from both the branches in the main branch for deploying.
|
||||
|
||||
---
|
||||
|
||||
Generated
-6
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Drive-thru",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
Reference in New Issue
Block a user