Skip to content

Commit

Permalink
linting
Browse files Browse the repository at this point in the history
  • Loading branch information
@egekocabas
egekocabas committed Feb 17, 2025
1 parent e57bbbe commit ad16a81
Show file tree
Hide file tree
Showing 4 changed files with 175 additions and 222 deletions.
230 changes: 88 additions & 142 deletions client/src/app/pages/about/about.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,160 +9,106 @@

<!-- Container for all content -->
<div class="container mx-auto p-6">
<!-- ==================== MAIN FEATURES + GET IN TOUCH ==================== -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- LEFT COLUMN: MAIN FEATURES -->
<div class="p-4 border rounded-lg shadow-md">
<h2 class="text-lg font-semibold mb-2">Main Features</h2>
@for (feature of coreFeatures; track feature.title) {
<div class="mb-3 border-b pb-2 last:border-0 last:pb-0">
<div class="flex items-center mb-1">
<i [ngClass]="feature.icon + ' text-blue-600 mr-2'"></i>
<h3 class="font-semibold">{{ feature.title }}</h3>
</div>
<p class="text-sm text-gray-700">{{ feature.description }}</p>
</div>
}
</div>

<!-- RIGHT COLUMN: GET IN TOUCH -->
<div class="p-4 border rounded-lg shadow-md">
<h2 class="text-lg font-semibold mb-2">Get in Touch</h2>
<p>
<a
href="https://github.com/ls1intum/Helios/issues/new?template=1-bug-report.yml"
class="text-blue-500 hover:underline"
target="_blank"
>Report a Bug</a
>
</p>
<p>
<a
href="https://github.com/ls1intum/Helios/issues/new?template=2-feature-request.yml"
class="text-blue-500 hover:underline"
target="_blank"
>Request a Feature</a
>
</p>
<p>
<a
href="https://github.com/ls1intum/Helios/releases"
class="text-blue-500 hover:underline"
target="_blank"
>Release Notes</a
>
</p>
<!-- ==================== MAIN FEATURES + GET IN TOUCH ==================== -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- LEFT COLUMN: MAIN FEATURES -->
<div class="p-4 border rounded-lg shadow-md">
<h2 class="text-lg font-semibold mb-2">Main Features</h2>
@for (feature of coreFeatures; track feature.title) {
<div class="mb-3 border-b pb-2 last:border-0 last:pb-0">
<div class="flex items-center mb-1">
<i [ngClass]="feature.icon + ' text-blue-600 mr-2'"></i>
<h3 class="font-semibold">{{ feature.title }}</h3>
</div>
<p class="text-sm text-gray-700">{{ feature.description }}</p>
</div>
}
</div>

<!-- RIGHT COLUMN: GET IN TOUCH -->
<div class="p-4 border rounded-lg shadow-md">
<h2 class="text-lg font-semibold mb-2">Get in Touch</h2>
<p>
<a href="https://github.com/ls1intum/Helios/issues/new?template=1-bug-report.yml" class="text-blue-500 hover:underline" target="_blank">Report a Bug</a>
</p>
<p>
<a href="https://github.com/ls1intum/Helios/issues/new?template=2-feature-request.yml" class="text-blue-500 hover:underline" target="_blank">Request a Feature</a>
</p>
<p>
<a href="https://github.com/ls1intum/Helios/releases" class="text-blue-500 hover:underline" target="_blank">Release Notes</a>
</p>
</div>
</div>

<!-- ==================== 3) PROJECT ADVISORS ==================== -->
<section class="mt-6 p-4 border rounded-lg shadow-md text-center">
<h2 class="text-lg font-semibold mb-4">Project Advisors</h2>
<div class="flex justify-center flex-wrap gap-4">
@for (advisor of projectAdvisors; track advisor.name) {
<div class="p-3 border rounded-md text-center w-48">
<img
[ngSrc]="getGithubProfilePictureUrl(advisor.githubId)"
alt="{{ advisor.name }}"
width="112"
height="112"
class="w-28 h-28 mx-auto rounded-full mb-2"
/>
<p class="font-semibold">{{ advisor.name }}</p>
<p class="text-sm text-gray-600">{{ advisor.description }}</p>

@if (advisor.website) {
<a
[href]="advisor.website"
target="_blank"
class="text-blue-500 inline-block mt-1"
>Website</a
>
}
@if (advisor.githubHandle) {
<a
[href]="getGithubProfileUrl(advisor.githubHandle)"
target="_blank"
class="text-blue-500 inline-block mt-1 ml-2"
>GitHub</a
>
}
</div>
}
</div>
</section>
<!-- ==================== 4) CONTRIBUTORS ==================== -->
<section class="mt-6 p-4 border rounded-lg shadow-md text-center">
<h2 class="text-lg font-semibold mb-4">Contributors</h2>

<!-- 4a) Your existing local contributors -->
<div class="mb-6">
<div class="flex justify-center flex-wrap gap-4">
@for (contributor of contributors; track contributor.name) {
<div class="p-3 border rounded-md text-center w-48">
<img
[ngSrc]="getGithubProfilePictureUrl(contributor.githubId)"
alt="{{ contributor.name }}"
width="112"
height="112"
class="w-28 h-28 mx-auto rounded-full mb-2"
/>
<p class="font-semibold">{{ contributor.name }}</p>
<p class="text-sm text-gray-600">{{ contributor.description }}</p>
<!-- ==================== 3) PROJECT ADVISORS ==================== -->
<section class="mt-6 p-4 border rounded-lg shadow-md text-center">
<h2 class="text-lg font-semibold mb-4">Project Advisors</h2>
<div class="flex justify-center flex-wrap gap-4">
@for (advisor of projectAdvisors; track advisor.name) {
<div class="p-3 border rounded-md text-center w-48">
<img [ngSrc]="getGithubProfilePictureUrl(advisor.githubId)" alt="{{ advisor.name }}" width="112" height="112" class="w-28 h-28 mx-auto rounded-full mb-2" />
<p class="font-semibold">{{ advisor.name }}</p>
<p class="text-sm text-gray-600">{{ advisor.description }}</p>

@if (contributor.website) {
<a
[href]="contributor.website"
class="text-blue-500 inline-block mt-1"
target="_blank"
>Website</a
>
}
@if (contributor.githubHandle) {
<a
[href]="getGithubProfileUrl(contributor.githubHandle)"
class="text-blue-500 inline-block mt-1 ml-2"
target="_blank"
>GitHub</a
>
}
</div>
}
</div>
@if (advisor.website) {
<a [href]="advisor.website" target="_blank" class="text-blue-500 inline-block mt-1">Website</a>
}
@if (advisor.githubHandle) {
<a [href]="getGithubProfileUrl(advisor.githubHandle)" target="_blank" class="text-blue-500 inline-block mt-1 ml-2">GitHub</a>
}
</div>
}
</div>
</section>
<!-- ==================== 4) CONTRIBUTORS ==================== -->
<section class="mt-6 p-4 border rounded-lg shadow-md text-center">
<h2 class="text-lg font-semibold mb-4">Contributors</h2>

<!-- 4b) Fetched GitHub contributors from the Helios repo -->
<div class="container mx-auto p-4">
<p class="text-lg font-semibold mb-4">GitHub Contributors</p>

<!-- Use a responsive grid or flex layout with gap -->
<div class="flex flex-wrap justify-center gap-8">
@for (gitCont of githubContributors(); track gitCont.id) {
<!-- A simple column layout with no border or background -->
<div class="flex flex-col items-center">
<!-- Avatar -->
<app-user-avatar
[user]="gitCont"
class="rounded-full mb-2"
></app-user-avatar>
<!-- 4a) Your existing local contributors -->
<div class="mb-6">
<div class="flex justify-center flex-wrap gap-4">
@for (contributor of contributors; track contributor.name) {
<div class="p-3 border rounded-md text-center w-48">
<img [ngSrc]="getGithubProfilePictureUrl(contributor.githubId)" alt="{{ contributor.name }}" width="112" height="112" class="w-28 h-28 mx-auto rounded-full mb-2" />
<p class="font-semibold">{{ contributor.name }}</p>
<p class="text-sm text-gray-600">{{ contributor.description }}</p>

<!-- Login -->
<p class="text-sm text-gray-600">{{ gitCont.login }}</p>
@if (contributor.website) {
<a [href]="contributor.website" class="text-blue-500 inline-block mt-1" target="_blank">Website</a>
}
@if (contributor.githubHandle) {
<a [href]="getGithubProfileUrl(contributor.githubHandle)" class="text-blue-500 inline-block mt-1 ml-2" target="_blank">GitHub</a>
}
</div>
}
</div>
</div>

<!-- Contributions -->
<p class="mt-2 text-sm font-medium">
Contributions:
<span class="text-blue-500">{{ gitCont.contributions }}</span>
</p>
</div>
}
</div>
</div>
<!-- 4b) Fetched GitHub contributors from the Helios repo -->
<div class="container mx-auto p-4">
<p class="text-lg font-semibold mb-4">GitHub Contributors</p>

<!-- Use a responsive grid or flex layout with gap -->
<div class="flex flex-wrap justify-center gap-8">
@for (gitCont of githubContributors(); track gitCont.id) {
<!-- A simple column layout with no border or background -->
<div class="flex flex-col items-center">
<!-- Avatar -->
<app-user-avatar [user]="gitCont" class="rounded-full mb-2"></app-user-avatar>

<!-- Login -->
<p class="text-sm text-gray-600">{{ gitCont.login }}</p>

</section>
<!-- Contributions -->
<p class="mt-2 text-sm font-medium">
Contributions:
<span class="text-blue-500">{{ gitCont.contributions }}</span>
</p>
</div>
}
</div>
</div>
</section>

<div class="mt-6 p-4 border rounded-lg shadow-md text-center">
<h2 class="text-lg font-semibold mb-2">Operator</h2>
Expand Down
61 changes: 32 additions & 29 deletions client/src/app/pages/about/about.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,26 @@
import {Component, OnInit, signal} from '@angular/core';
import { Component, OnInit, signal } from '@angular/core';
import { PageHeadingComponent } from '@app/components/page-heading/page-heading.component';
import {NgClass, NgOptimizedImage} from '@angular/common';
import {UserInfoDto} from "@app/core/modules/openapi";
import {UserAvatarComponent} from "@app/components/user-avatar/user-avatar.component";
import { NgClass, NgOptimizedImage } from '@angular/common';
import { UserInfoDto } from '@app/core/modules/openapi';
import { UserAvatarComponent } from '@app/components/user-avatar/user-avatar.component';

interface Feature {
icon: string;
title: string;
description: string;
}

export type ExtendedUserInfoDto = UserInfoDto & {
contributions: number;
export type GitHubContributorInfo = {
id: number;
login: string;
avatar_url: string;
html_url: string;
contributions: string;
};

export type ExtendedUserInfoDto = UserInfoDto & {
contributions: string;
};

@Component({
selector: 'app-about',
Expand Down Expand Up @@ -47,45 +54,41 @@ export class AboutComponent implements OnInit {
{
icon: 'pi pi-sitemap',
title: 'Visualization of GitHub Actions pipelines',
description:
'See how your CI/CD pipelines connect and interact with a clear, visual diagram.',
description: 'See how your CI/CD pipelines connect and interact with a clear, visual diagram.',
},
{
icon: 'pi pi-lock',
title: 'Environment Locking/Unlocking',
description:
'Manage environment availability to prevent conflicts during critical deploys.',
description: 'Manage environment availability to prevent conflicts during critical deploys.',
},
{
icon: 'pi pi-send',
title: 'Deployment Management',
description:
'Track and control deployments through a user-friendly interface.',
description: 'Track and control deployments through a user-friendly interface.',
},
{
icon: 'pi pi-chart-bar',
title: 'Test Analytics (Coming Soon)',
description:
'Detailed analytics on test results, coverage, and performance trends.',
}
description: 'Detailed analytics on test results, coverage, and performance trends.',
},
];

ngOnInit(): void {
fetch('https://api.github.com/repos/ls1intum/Helios/contributors')
.then((response) => response.json())
.then((data: any[]) => {
this.githubContributors.set(
data.map((contributor) => ({
id: contributor.id,
login: contributor.login,
avatarUrl: contributor.avatar_url,
name: contributor.login,
htmlUrl: contributor.html_url,
contributions: contributor.contributions,
}))
);
})
.catch((error) => console.error('Error fetching contributors:', error));
.then(response => response.json())
.then((data: GitHubContributorInfo[]) => {
this.githubContributors.set(
data.map(contributor => ({
id: contributor.id,
login: contributor.login,
avatarUrl: contributor.avatar_url,
name: contributor.login,
htmlUrl: contributor.html_url,
contributions: contributor.contributions,
}))
);
})
.catch(error => console.error('Error fetching contributors:', error));
}

getGithubProfilePictureUrl(userId: number): string {
Expand Down
2 changes: 1 addition & 1 deletion client/src/app/pages/imprint/imprint.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ <h3 class="text-lg font-semibold mt-4">Publisher</h3>
Technical University of Munich<br />
Postal address: Arcisstrasse 21, 80333 Munich<br />
Telephone: +49-(0)89-289-01<br />
Email: <a href="mailto:[email protected]" class="text-blue-500">poststelle&#64;tum.de</a><br/>
Email: <a href="mailto:[email protected]" class="text-blue-500">poststelle&#64;tum.de</a><br />
</p>

<h3 class="text-lg font-semibold mt-4">Authorized to represent</h3>
Expand Down
Loading

0 comments on commit ad16a81

Please sign in to comment.