From b82999a75632c6cd82892b63afb6aff7331019c6 Mon Sep 17 00:00:00 2001 From: Timothy Dodd Date: Fri, 23 Feb 2024 15:46:01 -0500 Subject: [PATCH] Updated Main Welcome page --- src/app/_services/route.service.ts | 20 +++++---- src/app/app-routing.module.ts | 4 +- src/app/app.component.html | 9 +++- src/app/app.component.ts | 14 +++++- .../convert-view/convert-view.component.html | 2 - .../format-view/format-view.component.html | 3 -- src/app/pages/welcome/welcome.component.css | 7 +++ src/app/pages/welcome/welcome.component.ts | 45 +++++++++++++++++++ .../time/time-zones/time-zones.component.html | 1 - src/styles.scss | 12 +++++ 10 files changed, 99 insertions(+), 18 deletions(-) create mode 100644 src/app/pages/welcome/welcome.component.css create mode 100644 src/app/pages/welcome/welcome.component.ts diff --git a/src/app/_services/route.service.ts b/src/app/_services/route.service.ts index 9966a31..cc1e61b 100644 --- a/src/app/_services/route.service.ts +++ b/src/app/_services/route.service.ts @@ -8,16 +8,19 @@ export class RouteService{ public static getRoutes() { - const routes: Routes = []; + const routes: Routes = [ + { path: '', pathMatch: 'full', loadComponent: () => import('../pages/welcome/welcome.component').then(mod => mod.WelcomeComponent), data: { title: 'Welcome to Util Plex' } } + ]; + for (const c of RouteService.routeCategories) { for (const route of c.routes) { if (route.loadComponent) { - routes.push({ path: route.url.substring(1), pathMatch: 'full', loadComponent: route.loadComponent }); + routes.push({ path: route.url.substring(1), pathMatch: 'full', loadComponent: route.loadComponent, data: { title: route.title } }); }else{ - routes.push({ path: route.url.substring(1), pathMatch: 'full', component: route.component }); + routes.push({ path: route.url.substring(1), pathMatch: 'full', component: route.component,data:{title:route.title} }); } } } @@ -27,21 +30,21 @@ export class RouteService{ { name: 'Formatters', routes: [ - { name: 'SQL', url: '/format/sql', loadComponent: () => import('../formatters/f-sql/f-sql.component').then(mod => mod.FSqlComponent) }, - { name: 'JSON', url: '/format/json', loadComponent: () => import('../formatters/f-json/f-json.component').then(mod => mod.FJsonComponent) }, - { name: 'CSS', url: '/format/css', loadComponent: () => import('../formatters/f-css/f-css.component').then(mod => mod.FCssComponent) } + { name: 'SQL', title:'SQL Formatter', url: '/format/sql', loadComponent: () => import('../formatters/f-sql/f-sql.component').then(mod => mod.FSqlComponent) }, + { name: 'JSON', title: 'JSON Formatter', url: '/format/json', loadComponent: () => import('../formatters/f-json/f-json.component').then(mod => mod.FJsonComponent) }, + { name: 'CSS', title: 'CSS Formatter', url: '/format/css', loadComponent: () => import('../formatters/f-css/f-css.component').then(mod => mod.FCssComponent) } ] }, { name: 'Converters', routes: [ - { name: 'Json To Yaml', url: '/convert/json-yaml', loadComponent: () => import('../converters/c-json-yaml/c-json-yaml.component').then(mod => mod.CJsonYamlComponent) }, + { name: 'Json To Yaml', title: 'Json To Yaml', url: '/convert/json-yaml', loadComponent: () => import('../converters/c-json-yaml/c-json-yaml.component').then(mod => mod.CJsonYamlComponent) }, ] }, { name: 'Time', routes: [ - { name: 'Time Zones', url: '/time/zones', loadComponent: () => import('../time/time-zones/time-zones.component').then(mod => mod.TimeZonesComponent)}, + { name: 'Time Zones', title:'Time Zone Conversions' , url: '/time/zones', loadComponent: () => import('../time/time-zones/time-zones.component').then(mod => mod.TimeZonesComponent)}, ] } ] @@ -53,6 +56,7 @@ export interface RouteCategory{ export interface UpRoute{ name: string | any; url: string | any; + title:string ; component?: Type; loadComponent?: () => Type | Observable | DefaultExport>> | Promise | DefaultExport>>; } \ No newline at end of file diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9a9be3e..b828ef5 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,4 +8,6 @@ const routes: Routes = [...RouteService.getRoutes()]; imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) -export class AppRoutingModule { } +export class AppRoutingModule { + + } diff --git a/src/app/app.component.html b/src/app/app.component.html index 90aceca..c6d2a93 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,8 +4,13 @@
-
GitHub
+
+ @if(title()){ +

{{title()}}

+ } + GitHub + +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index aa676e7..d7f9c5e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import { Component, inject, signal } from '@angular/core'; +import { ActivationStart, Router } from '@angular/router'; @Component({ selector: 'app-root', @@ -8,5 +9,16 @@ import { Component } from '@angular/core'; export class AppComponent { + router = inject(Router); + title = signal(null) + constructor() { + this.router.events.subscribe((event) => { + if (event instanceof ActivationStart) { + + const data = event.snapshot.data['title'] || null; + this.title.set(data); + } + }); + } } diff --git a/src/app/converters/convert-view/convert-view.component.html b/src/app/converters/convert-view/convert-view.component.html index 75b7cc3..02c7c92 100644 --- a/src/app/converters/convert-view/convert-view.component.html +++ b/src/app/converters/convert-view/convert-view.component.html @@ -1,5 +1,3 @@ -

{{title}}

-
{{error()}}
diff --git a/src/app/formatters/format-view/format-view.component.html b/src/app/formatters/format-view/format-view.component.html index 75b7cc3..338e968 100644 --- a/src/app/formatters/format-view/format-view.component.html +++ b/src/app/formatters/format-view/format-view.component.html @@ -1,7 +1,4 @@ -

{{title}}

-
{{error()}}
-
diff --git a/src/app/pages/welcome/welcome.component.css b/src/app/pages/welcome/welcome.component.css new file mode 100644 index 0000000..08aed20 --- /dev/null +++ b/src/app/pages/welcome/welcome.component.css @@ -0,0 +1,7 @@ +:host { + display: block; + + main { + max-width: 800px; + } +} \ No newline at end of file diff --git a/src/app/pages/welcome/welcome.component.ts b/src/app/pages/welcome/welcome.component.ts new file mode 100644 index 0000000..a34b11a --- /dev/null +++ b/src/app/pages/welcome/welcome.component.ts @@ -0,0 +1,45 @@ +import { CommonModule } from "@angular/common"; +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'app-welcome', + standalone: true, + imports: [ + CommonModule, + ], + template: ` + +
+
+

Util Plex is a web-based platform designed to assist developers and coders by providing tools for formatting programming code and converting data formats.

+
+
+

Code Formatting Features

+

Our code formatter allows users to input unstructured or unformatted code into a text box and receive well-formatted, readable code in return. This feature supports multiple programming languages, including CSS, and adheres to best practices for code structure and readability.

+

How to Use:

+
    +
  1. Select the Code Format: Choose the programming language or format for the code you are working with.
    2. +
  2. Input Your Code: Paste the code into the designated input box on the left side of the page.
    3. +
  3. Receive Formatted Code: Click the 'Format' button to process your code. The formatted code will appear in the output box on the right, ready for use.
    4. +
+
+
+

Data Conversion Tools

+

Our platform also offers tools for converting data between different formats, such as JSON to YAML, and a time zone converter for managing times across different geographic locations. These tools are designed to simplify data management tasks and improve workflow efficiency.

+
    +
  • JSON to YAML Converter: Convert JSON files into YAML format for enhanced readability and compatibility with various applications.
    • +
  • Time Zone Converter: Easily convert times between different time zones to coordinate schedules and deadlines across global teams.
    • +
+
+
+

About Util Plex

+

Util Plex aims to support the development community by providing a reliable, user-friendly platform for code formatting and data conversion. Whether you are a professional developer or a beginner, our tools are designed to enhance your productivity and improve the quality of your work.

+
+
+ + + `, + styleUrl: './welcome.component.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class WelcomeComponent { } diff --git a/src/app/time/time-zones/time-zones.component.html b/src/app/time/time-zones/time-zones.component.html index a911648..8dd9253 100644 --- a/src/app/time/time-zones/time-zones.component.html +++ b/src/app/time/time-zones/time-zones.component.html @@ -1,4 +1,3 @@ -

Time Zone Conversions

diff --git a/src/styles.scss b/src/styles.scss index d9181df..1aea9ef 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -70,8 +70,20 @@ h4, h5, h6 { color: var(--headers); + font-weight: bold; } +h2 { + font-size: 18px; +} + +h3 { + font-size: 16px; +} + +h2 { + color: rgba($purple, 0.75); +} .form-control:focus { border-color: $purple;