Merge pull request #30 from SOFTLIMA/JHONATAN-TEXTO-DINAMICO-HOME

Alteração do painel de administração

public/API/salvarfoto.php

@@ -0,0 +1,65 @@
+<?php
+
+// Permitir requisições de outras origens
+header("Access-Control-Allow-Origin: *");
+header("Access-Control-Allow-Methods: POST");
+header("Access-Control-Allow-Headers: Content-Type");
+header('Content-Type: application/json; charset=utf-8');
+
+// Verifica se o método de requisição é POST
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    echo json_encode(["error" => "Método não permitido"]);
+    exit;
+}
+
+// Verifica se o arquivo foi enviado e não teve erro no upload
+if (!isset($_FILES['imagem']) || $_FILES['imagem']['error'] !== UPLOAD_ERR_OK) {
+    http_response_code(400);
+    echo json_encode(["error" => "Erro ao enviar a imagem", "error_code" => $_FILES['imagem']['error']]);
+    exit;
+}
+
+// Definindo o caminho para o diretório de destino (uma pasta antes da raiz da API)
+$uploadDir = dirname(__DIR__) . '/Galeria/Noticias/'; // Caminho antes da raiz da API
+if (!is_dir($uploadDir)) {
+    if (!mkdir($uploadDir, 0777, true)) {
+        http_response_code(500);
+        echo json_encode(["error" => "Falha ao criar diretório de upload"]);
+        exit;
+    }
+}
+
+// Define um nome único para o arquivo, usando o nome original e evitando sobrescritas
+$filename = basename($_FILES['imagem']['name']);
+$targetFile = $uploadDir . $filename;
+
+// Verifica se o arquivo já existe no diretório
+if (file_exists($targetFile)) {
+    // Se o arquivo já existe, retorna o caminho absoluto
+    http_response_code(200);
+    echo json_encode([
+        "success" => true,
+        "message" => "Arquivo já existe",
+        "file_path" => realpath($targetFile)  // Caminho absoluto do arquivo existente
+    ]);
+    exit;
+}
+
+// Move o arquivo para o diretório de destino
+if (move_uploaded_file($_FILES['imagem']['tmp_name'], $targetFile)) {
+    // Gera o caminho do arquivo que será retornado
+    $filePath = 'Galeria/Noticias/' . $filename;
+
+    // Retorna resposta de sucesso com o caminho do arquivo
+    http_response_code(200);
+    echo json_encode([
+        "success" => true,
+        "message" => "Imagem enviada com sucesso",
+        "file_path" => $filePath,
+        "file_name" => $filename
+    ]);
+} else {
+    http_response_code(500);
+    echo json_encode(["error" => "Falha ao mover o arquivo", "details" => error_get_last()]);
+}

src/app/Administracao/corpo-login/form-modal/form-modal.component.html

@@ -5,19 +5,38 @@ <h2 mat-dialog-title>{{ newItem.id ? 'Editar Item' : 'Adicionar Item' }}</h2>
       <mat-label>Título</mat-label>
       <input matInput [(ngModel)]="newItem.titulo" name="titulo" required>
     </mat-form-field>
+
     <mat-form-field>
       <mat-label>Data</mat-label>
       <input matInput [(ngModel)]="newItem.data" name="data" required>
     </mat-form-field>
+
     <mat-form-field class="input-desc">
       <mat-label>Descrição</mat-label>
       <textarea class="caixa-texto" matInput [(ngModel)]="newItem.descricao" name="descricao" required></textarea>
     </mat-form-field>
-    <mat-form-field>
-      <mat-label>Links de Imagens</mat-label>
+
+    <!-- Seleção entre Link de Imagem ou Upload -->
+    <mat-radio-group [(ngModel)]="imageOption" name="imageOption" required>
+      <mat-radio-button value="link">Link de Imagem</mat-radio-button>
+      <mat-radio-button value="upload">Upload de Imagem</mat-radio-button>
+    </mat-radio-group>
+
+    <!-- Campo para Link de Imagem -->
+    <mat-form-field *ngIf="imageOption === 'link'">
+      <mat-label>Link da Imagem</mat-label>
       <input matInput [(ngModel)]="newItem.link_Imgs" name="link_Imgs" required>
     </mat-form-field>
-    <button mat-button type="submit">{{ newItem.id ? 'Atualizar Item' : 'Adicionar Item' }}</button>
+
+    <!-- Campo para Upload de Imagem -->
+    <div *ngIf="imageOption === 'upload'" class="upload-field">
+      <!-- <label for="file-input">Imagem</label> -->
+      <input id="file-input" type="file" (change)="onFileSelected($event)" required>
+    </div>
+
+    <button mat-button type="submit" [disabled]="isSubmitting">
+      {{ isSubmitting ? 'Enviando...' : (newItem.id ? 'Atualizar Item' : 'Adicionar Item') }}
+    </button>
     <button mat-button type="button" (click)="onCancel()">Cancelar</button>
   </form>
 </mat-dialog-content>

src/app/Administracao/corpo-login/form-modal/form-modal.component.ts

@@ -3,6 +3,9 @@ import { FormsModule } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { SalvarFotoService } from '../../../../services/salvar.foto.service';
+import { MatRadioModule } from '@angular/material/radio';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-form-modal',
@@ -11,12 +14,18 @@ import { MatInputModule } from '@angular/material/input';
     MatDialogModule,
     MatFormFieldModule,
     MatInputModule,
-    FormsModule],
+    FormsModule,
+    MatRadioModule,
+    CommonModule],
   templateUrl: './form-modal.component.html',
   styleUrl: './form-modal.component.css'
 })
 export class FormModalComponent {
 
+  selectedFile!: File;
+  link_img: string = '';
+  isSubmitting: boolean = false;  // Variável para controlar o estado do botão de envio
+
   newItem = {
     id: "",
     data: "",
@@ -25,21 +34,53 @@ export class FormModalComponent {
     titulo: ""
   };
 
+  imageOption: 'link' | 'upload' = 'link';
+
   constructor(
     public dialogRef: MatDialogRef<FormModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any // Recebe os dados do item
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private salvarFotoService: SalvarFotoService
   ) {
     if (data) {
       this.newItem = { ...data, link_Imgs: data.link_Imgs.join(';') }; // Converte o array de volta para string
     }
   }
 
   onSubmit() {
-    this.dialogRef.close(this.newItem); // Envia os dados de volta para o componente pai
+    this.isSubmitting = true;  // Desabilita o botão de envio ao começar a requisição
+
+    if (this.imageOption === 'upload' && this.selectedFile) {
+      // Se for upload, chama o serviço para enviar a imagem
+      this.salvarFotoService.uploadImagem(this.selectedFile).subscribe({
+        next: (response) => {
+          this.link_img = response.file_name;  // Recebe o caminho da imagem
+          console.log('Imagem enviada com sucesso:', response.file_path);
+          this.newItem.link_Imgs = this.link_img;  // Atualiza o link da imagem no item
+
+          // Envia os dados e fecha o modal
+          this.dialogRef.close(this.newItem);
+        },
+        error: (error) => {
+          console.error('Erro ao enviar a imagem:', error);
+          this.isSubmitting = false;  // Reabilita o botão em caso de erro
+        }
+      });
+    } else {
+      // Se não for upload, apenas envia os dados e fecha o modal
+      this.dialogRef.close(this.newItem);
+    }
   }
 
   onCancel(): void {
     this.dialogRef.close();
   }
 
+  onFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement;
+
+    if (input.files && input.files[0]) {
+      this.selectedFile = input.files[0];  // Armazena o arquivo selecionado
+    }
+  }
+
 }

src/app/Components/noticia/noticia.component.html

@@ -1,23 +1,23 @@
-<div class="container">
+<div class="container" *ngIf="DATA[0]?.link_Imgs">
     <div class="cabecalho">
         <h1>Última Notícia</h1>
     </div>
 
     <div class="cartao">
-        <img src="Galeria/Noticias/Noticia1.jpg" alt="">
+        <img [src]="'Galeria/Noticias/' + DATA[0].link_Imgs[0]!" alt="">
 
         <div class="conteudo">
             <a href="#" class="titulo">
-                <h4>A ABICCA e a ABNT formalizam assinatura de acordo de cooperação.</h4>
+                <h4>{{DATA[0].titulo}}</h4>
             </a>
             <div class="data">
                 <i class="bi bi-clock-history me-2"></i>
-                <span>23/10/2024</span>
+                <span>{{DATA[0].data}}</span>
             </div>
-            <p class="descricao">{{descricao.substring(0,400) + '...'}}</p>
+            <p class="descricao">{{DATA[0].descricao.substring(0,400) + '...'}}</p>
 
             <div class="botao-container">
-                <button class="botao">Saiba mais.</button>
+                <button class="botao">Saiba mais</button>
             </div>
         </div>
     </div>

src/app/Components/noticia/noticia.component.ts

@@ -1,12 +1,54 @@
 import { Component } from '@angular/core';
+import { CampoPainel } from '../../../Model/PainelADM';
+import { DynamoDBService } from '../../../aws/DynamoDBService';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-noticia',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './noticia.component.html',
   styleUrl: './noticia.component.css'
 })
 export class NoticiaComponent {
-  descricao: string = ' A ABICCA e a ABNT selaram um acordo histórico que promete revolucionar a normalização de cabos de aço e acessórios no Brasil. Marcos Antonio Piccoli, presidente da ABICCA, e líderes da ABNT uniram forças com um objetivo claro: elevar os padrões de qualidade e segurança na indústria. Este compromisso não só reforça a competitividade do setor, mas também traz benefícios diretos para consumidores e toda a cadeia produtiva. O que mais essa parceria pode trazer para o futuro da indústria brasileira?';
-}
+  DATA : CampoPainel[] = [];
+
+  constructor( private ddb : DynamoDBService){}
+
+  async ngOnInit(): Promise<void> {
+    await this.ddb.readAllItens().subscribe(result => {
+      if (result) {
+        result.forEach(item => {
+          this.DATA.push({
+            id: item['id'],
+            titulo: item['titulo'],
+            data: item['data'],
+            descricao: item['descricao'],
+            link_Imgs: item['link_Imgs'],
+          });
+        });
+      // Ordenar a lista DATA pelo campo 'data' no formato DD/MM/YYYY
+      this.DATA.sort((a: CampoPainel, b: CampoPainel) => {
+        const dateA = this.convertToDate(a.data);
+        const dateB = this.convertToDate(b.data);
+        return dateB.getTime() - dateA.getTime(); // Para crescente (mais antiga para mais recente)
+      });
+      }
+    });
+  }
+
+
+  private convertToDate(dateString: string): Date {
+    const parts = dateString.split('/');
+    // Verifique se o formato está correto
+    if (parts.length === 3) {
+      const day = parseInt(parts[0], 10);
+      const month = parseInt(parts[1], 10) - 1; // Mês começa do zero
+      const year = parseInt(parts[2], 10);
+      return new Date(year, month, day);
+    }
+    return new Date(); // Retorna uma data padrão se o formato estiver errado
+  }
+
+
+  }

src/app/Components/noticias/blog/blog.component.html

@@ -7,7 +7,7 @@ <h2>Últimas Notícias</h2>
     <div class="grid-container">
         <div *ngFor="let item of paginatedData; let i=index" class="noticia">
           <div class="img">
-              <a (click)="onClick(item)"><img [src]="item.link_Imgs[0]" [alt]="'Notícia'+ (i+1)" ></a>
+              <a (click)="onClick(item)"><img [src]="'Galeria/Noticias/' + item.link_Imgs[0]" [alt]="'Notícia'+ (i+1)" ></a>
           </div>
           <div class="texto">
               <h3><a (click)="onClick(item)">{{item.titulo}}</a></h3>

src/app/Components/noticias/noticias.component.ts

@@ -50,6 +50,8 @@ async ngOnInit(): Promise<void> {
     }
   });
 }
+
+
 showItens(): boolean{
   if (this.DATA.length > 0) {
     return true;

src/app/Components/noticias/popup-noticia/popup-noticia.component.css

@@ -7,6 +7,7 @@
   column-gap: 3%;
   background-image: linear-gradient(185deg, #a0a0a0, #f5f5f5);
   box-sizing: border-box; /* Inclui padding e borda nas dimensões totais */
+  /* border: 1px solid gray; */
 }
 
 .esquerda {

src/app/Components/noticias/popup-noticia/popup-noticia.component.html

@@ -1,6 +1,6 @@
 <div class="container">
     <div class="esquerda">
-        <img [src]="item.link_Imgs[0]" alt="" class="imagem">
+        <img [src]="'Galeria/Noticias/' + item.link_Imgs[0]" alt="" class="imagem">
     </div>
     <div class="direita">
       <span class="titulo">{{item.titulo}}</span>

src/aws/DynamoDBService.ts

@@ -17,9 +17,7 @@ export class DynamoDBService {
   private dynamoDB: DynamoDBClient = new DynamoDBClient;
   private config = awsConfig;
 
-  constructor(private auth : AuthService, private http : HttpClient) {
-    this.initializeDynamoDBClient();
-  }
+  constructor(private auth : AuthService, private http : HttpClient) {}
 
   async initializeDynamoDBClient() {
     const tokens = await this.auth.getCurrentSession();

src/services/salvar.foto.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SalvarFotoService {
+
+  private apiUrl = 'https://abicca.com.br/API/salvarfoto.php';
+
+  constructor(private http: HttpClient) {}
+
+  uploadImagem(imagem: File): Observable<any> {
+    // Cria um formulário de dados para enviar a imagem
+    const formData = new FormData();
+    formData.append('imagem', imagem);
+
+    const headers = new HttpHeaders({
+      // Outros cabeçalhos, se necessário
+    });
+
+    // Verifica se está rodando localmente
+    if (window.location.hostname === 'localhost') {
+      const response = {
+        file_path: `${imagem.name}`
+      };
+      return of(response);
+    } else {
+      // Se não for localhost, envia para a API remota
+      return this.http.post<any>(this.apiUrl, formData, {
+        headers: new HttpHeaders({
+          'Accept': 'application/json'
+        })
+      });
+    }
+  }
+}