ajustes cars

tauisilva · Mar 3, 2024 · 5b0e5c0 · 5b0e5c0
1 parent c83d1d1
commit 5b0e5c0
Show file tree

Hide file tree

Showing 14 changed files with 329 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+package-lock.json
diff --git a/angular.json b/angular.json
@@ -54,15 +54,9 @@
           "configurations": {
             "production": {
               "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
-                },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "5mb"
                 }
               ],
               "outputHashing": "all"

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -9,7 +9,11 @@ import { ThemeService } from './services/theme.service';
   standalone: true,
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  imports: [RouterOutlet, NavbarComponent, ReposComponent]
+  imports: [
+    RouterOutlet,
+    NavbarComponent,
+    ReposComponent
+  ]
 })
 export class AppComponent implements OnInit {
   title = 'portfolio-app';

diff --git a/src/app/components/repos/repos.component.html b/src/app/components/repos/repos.component.html
@@ -1,24 +1,49 @@
 <section class="carousel">
-  <p-carousel [value]="repos"[numScroll]="1" [numVisible]="5" [responsiveOptions]="respOptions">
+  <p-carousel [value]="repos" [numScroll]="1" [numVisible]="5" [responsiveOptions]="respOptions">
     <ng-template pTemplate="header">
       <p class="pl-3 font-bold">Github - Repositórios</p>
     </ng-template>
     <ng-template let-repo pTemplate="item">
       <div class="border-1 h-full surface-border border-round m-2 text-center px-3">
         <section class="w-full top-info">
           <p class="font-semibold">{{ repo.name }}</p>
-          <a class="icon" [href]="repo.html_url" target="_blank"><i class="pi pi-github"></i></a>
+          <img src="assets/logos/angular17.png" class="icon">
         </section>
-        <div class="mb-3">
-          <img [src]="repo.img" alt="" class="w-full shadow-2" loading="eager">
-        </div>
-        <div>
-          <h6 class="mt-0 mb-3">{{ repo.description }}</h6>
-          <p-tag *ngIf="repo?.language" severity="success" [value]="repo?.language"></p-tag>
-          <div class="mt-5 flex align-items-center justify-content-center gap-2">
-            <!-- <p-button icon="pi pi-search" [rounded]="true" />
-                <p-button icon="pi pi-star-fill" [rounded]="true" severity="secondary" /> -->
+        <img [src]="repo.img" alt="" class="w-full shadow-2 border-round" loading="eager">
+        <div class="w-full body h-full">
+          <div class="flex justify-content-between">
+            <span class="date">Criado:<strong>{{formatData(repo.created_at)}}</strong></span>
+            <span class="date">Atualidao:<strong>{{formatData(repo.updated_at)}}</strong> </span>
+          </div>
+          <div class="w-full h-auto gap-1 flex">
+            <section class="w-full h-full">
+              <section class="w-full h-full flex border-round overflow-hidden">
+                @for (language of repo.langs; track $index) {
+                <div class="bar" [style.width]="language.percentage + '%'" [style.backgroundColor]="language.color">
+                </div>
+                }
+              </section>
+              <section class="w-full">
+                <section class="flex justify-content-between">
+                  @for (lan of repo.langs; track $index) {
+                  <div class="lang">
+                    <span class="bol" [style.backgroundColor]="lan.color"></span>
+                    <span class="txt">{{lan.name}}</span>
+                  </div>
+                  }
+                </section>
+              </section>
+            </section>
+            <p-tag *ngIf="repo?.language" severity="success" [value]="repo?.language"></p-tag>
           </div>
+          <section class="w-full text-left h-3rem">
+            <p class="description">{{ repo.description }}</p>
+          </section>
+          <section class="flex gap-2 justify-content-end">
+            <a class="icon" [href]="repo.html_url" target="_blank"><i class="pi pi-github"></i></a>
+            <a class="icon" [href]="repo.html_url" target="_blank"><i class="pi pi-eye"></i></a>
+            <a class="icon" [href]="repo.html_url" target="_blank"><i class="pi pi-info"></i></a>
+          </section>
         </div>
       </div>
     </ng-template>

diff --git a/src/app/components/repos/repos.component.scss b/src/app/components/repos/repos.component.scss
@@ -1,6 +1,53 @@
 .carousel {
-  ::ng-deep .p-carousel-item {
+  .p-carousel-item {
     padding-bottom: .5rem;
+    max-width: calc(100% / 5);
+  }
+
+  p-carousel,
+  .p-carousel,
+  .p-carousel-content,
+  .p-carousel-container,
+  .p-carousel-items-container {
+    height: 100%;
+  }
+
+  .p-carousel .p-carousel-indicators .p-carousel-indicator {
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .p-carousel .p-carousel-indicators .p-carousel-indicator button {
+    background-color: rgba(194, 170, 165, 0.23) !important;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    outline: none;
+  }
+
+  .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
+    background: none;
+  }
+
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: rgba(183, 150, 138, 0.7) !important;
+  }
+
+  .p-carousel .p-carousel-content {
+    flex-direction: column-reverse;
+  }
+
+  .p-carousel .p-carousel-indicators {
+    justify-content: end;
+  }
+
+  .p-link:focus {
+    box-shadow: none;
+  }
+
+  .p-link:disabled {
+    color: transparent !important;
   }
 
   .top-info {
@@ -14,13 +61,72 @@
       margin: 0;
     }
 
+    img.icon {
+      width: 1.5rem;
+    }
+
+
+  }
+
+  .body {
+    .lang {
+      display: flex;
+      align-items: center;
+      gap: .25rem;
+
+      .bol {
+        border-radius: 50%;
+        width: .5rem;
+        height: .5rem;
+      }
+
+      .txt {
+        font-weight: 500;
+        font-size: small;
+      }
+    }
+
+    .description {
+      font-weight: 500;
+      font-size: small;
+      margin: 0;
+      padding: .25rem 0;
+    }
+
     a.icon {
-      color: black;
+      color: var(--text-color);
 
       i {
         font-size: larger;
       }
     }
-
   }
+}
+
+.date {
+  font-size: small;
+  padding: .25rem 0;
+}
+
+.typeScript {
+  background-color: #3178c6;
+  // #0074bd
+  // #eb2d2f
+}
+
+.java {
+  background: rgb(0, 116, 189);
+  background: linear-gradient(90deg, rgba(0, 116, 189, 1) 0%, rgba(235, 45, 47, 1) 100%);
+}
+
+.angular {
+  background: rgb(220, 24, 125);
+  background: -moz-linear-gradient(90deg, rgba(220, 24, 125, 1) 0%, rgba(183, 29, 224, 1) 47%, rgba(128, 6, 250, 1) 100%);
+  background: -webkit-linear-gradient(90deg, rgba(220, 24, 125, 1) 0%, rgba(183, 29, 224, 1) 47%, rgba(128, 6, 250, 1) 100%);
+  background: linear-gradient(90deg, rgba(220, 24, 125, 1) 0%, rgba(183, 29, 224, 1) 47%, rgba(128, 6, 250, 1) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dc187d", endColorstr="#8006fa", GradientType=1);
+}
+
+.bar {
+  height: .5rem;
 }
diff --git a/src/app/components/repos/repos.component.ts b/src/app/components/repos/repos.component.ts
@@ -1,17 +1,24 @@
 import { NgClass, NgIf } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, inject } from '@angular/core';
 import { CarouselModule } from 'primeng/carousel';
 import { DataViewModule } from 'primeng/dataview';
 import { TagModule } from 'primeng/tag';
 import { GithubService } from '../../services/github.service';
+import { fIsoDate } from '../../utils/data';
 
 @Component({
   selector: 'app-repos',
   standalone: true,
-  imports: [TagModule, DataViewModule, NgIf, NgClass, CarouselModule],
+  imports: [
+    TagModule,
+    DataViewModule,
+    NgIf, NgClass,
+    CarouselModule
+  ],
   templateUrl: './repos.component.html',
   styleUrl: './repos.component.scss',
-  providers: [GithubService]
+  providers: [GithubService],
+  encapsulation: ViewEncapsulation.None
 })
 
 export class ReposComponent implements OnInit {
@@ -34,18 +41,48 @@ export class ReposComponent implements OnInit {
       { breakpoint: '599px', numVisible: 1, numScroll: 1 }
 
     ]
+    // this.repos = repos;
     this.load();
+    // this.repos.forEach((r) => {
+    //   const l = r.lang;
+    //   r.langs = this.getLan(l);
+    // })
   }
 
   load() {
     this.gitService.getAll().subscribe((repos) => {
       if (repos) {
-        this.repos = repos;
-        repos.forEach(async (r: any) => {
+        const res = repos.slice(0, 10);
+        res.forEach(async (r: any) => {
           const img = await this.gitService.getImg(r?.html_url).toPromise();
           r.img = img;
+          const languages = await this.gitService.getLangs(r?.full_name).toPromise();
+          r.langs = this.getLan(languages);
         });
+        this.repos = res;
       }
     })
   }
+  formatData(data: Date) {
+    return fIsoDate(new Date(data));
+  }
+
+
+
+  getLan(data: any): any {
+    const total: any = Object.values(data).reduce((acc: any, value: any) => acc + value, 0);
+    console.log(74.21 + 22.05 + 3.75);
+    const obj = Object.entries(data).map(([key, value]: [any, any]) => ({
+      name: key,
+      percentage: ((value / total) * 100).toFixed(2),
+      color: this.getRandomColor(),
+    }));
+    obj.sort((a, b) => parseFloat(b.percentage) - parseFloat(a.percentage));
+    return obj;
+  }
+
+
+  getRandomColor(): string {
+    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+  }
 }