Max665/sharepulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added sample details UI to upload

Browse Source
This commit is contained in:
Max W. 2024-02-16 14:41:29 +01:00
parent dbc72a3dc4
commit 6b322825cd
2 changed files with 52 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/app/upload/upload.component.html
View File

@ -1,5 +1,5 @@
<div class="container mx-auto p-4 mt-4">
<h1 class="text-4xl font-bold text-center text-gray-800 mb-10">Upload Your File</h1>
<h1 class="text-4xl font-bold text-center text-gray-800 mb-5">Upload Your File</h1>
<div class="bg-white shadow-lg rounded-lg p-6">
<div *ngIf="!uploadStarted" class="flex flex-col items-center justify-center lg:p-5">
<!-- File Drop Area -->
@ -52,11 +52,54 @@
<p class="text-gray-700 mt-4">Uploading {{ fileToUpload.name }}...</p>
</div>
<!-- Upload Finished -->
<div *ngIf="uploadFinished" class="flex flex-col items-center justify-center animate-in fade-in duration-1000">
<img class="w-16 mb-3" src="./assets/circle-check-solid.svg">
<p class="text-gray-700 mb-3">File uploaded successfully!</p>
<button class="btn btn-primary w-full max-w-xs">Upload Another File</button>
<div *ngIf="uploadFinished" class="flex flex-col items-center justify-center p-6 animate-fade-in-up">
<div class="flex items-center justify-center rounded-full p-2 border-4 border-indigo-500">
<img class="w-16" [ngClass]="{'animate-in spin-in-1 duration-1000': uploadFinished}" src="./assets/circle-check-solid.svg" alt="Success">
</div>
<h3 class="text-lg font-semibold mt-3">File uploaded successfully!</h3>
<div class="flex flex-wrap mt-5 mb-5">
<div class="w-full px-4">
<div class="grid grid-cols-2 gap-4 items-center">
<div class="text-gray-600 text-right">File ID:</div>
<div>166554</div>
<div class="text-gray-600 text-right">Material:</div>
<div>Aluminum & Plastic</div>
<div class="text-gray-600 text-right">Color:</div>
<div>Black/Silver</div>
<div class="text-gray-600 text-right">Dimensions:</div>
<div>15 x 15 x 25 cm</div>
<div class="text-gray-600 text-right">Weight:</div>
<div>1.2 kg</div>
<div class="text-gray-600 text-right">Power:</div>
<div>10W LED (included)</div>
<div class="text-gray-600 text-right">Brightness:</div>
<div>700 lumens</div>
<div class="text-gray-600 text-right">Warranty:</div>
<div>2 years</div>
</div>
</div>
</div>
<p class="text-sm text-gray-500 mt-1">Your file is now securely stored on our servers.</p>
<div class="mt-4 flex flex-col w-full items-center">
<button class="btn btn-primary w-full max-w-xs">Upload Another File</button>
<button class="btn btn-outline btn-secondary mt-2 w-full max-w-xs">Download a file</button>
</div>
<a href="#" class="link link-primary mt-4">Manage your uploads</a>
</div>
</div>
</div>
<!-- Invisible SVGs to prevent lazy loading -->

6
frontend/src/app/upload/upload.component.ts
View File

@ -1,5 +1,5 @@
import {Component, ElementRef, ViewChild} from '@angular/core';
import {DecimalPipe, NgIf} from "@angular/common";
import {DecimalPipe, NgClass, NgIf} from "@angular/common";
import {FormatFileSizePipePipe} from "../format-file-size-pipe.pipe";
import {FormsModule} from "@angular/forms";
import axios, {AxiosProgressEvent} from "axios";
@ -12,7 +12,8 @@ import { DevelopmentStore } from '../../store/DevelopmentStore';
NgIf,
FormatFileSizePipePipe,
FormsModule,
DecimalPipe
DecimalPipe,
NgClass
],
templateUrl: './upload.component.html',
styleUrl: './upload.component.scss'
@ -96,6 +97,7 @@ export class UploadComponent {
axios.post(this.developmentStore.getBaseUrl() + 'api/v1/upload', formData, config)
.then(response => {
console.log('Upload completed successfully:', response.data);
console.log(response.data);
this.uploadFinished = true;
})
.catch(error => {