Komponenten

Komponenten eingebunden
woped · May 15, 2023 · 6761f45 · 6761f45
1 parent 9588f3d
commit 6761f45
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 54 deletions.
diff --git a/.husky/commit-msg → .husky/_commit-msg b/.husky/commit-msg → .husky/_commit-msg
diff --git a/.husky/pre-commit → .husky/_pre-commit b/.husky/pre-commit → .husky/_pre-commit
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { RouterModule, Routes } from '@angular/router';
 import { T2PComponent } from './t2p/t2p.component';
 import { HomeComponent } from './home/home.component';
+import { P2tComponent } from './p2t/p2t.component';
 
 
 const routes: Routes = [
@@ -20,7 +21,10 @@ const routes: Routes = [
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    T2PComponent,
+    HomeComponent,
+    P2tComponent,
   ],
 
   imports: [

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -18,62 +18,98 @@ <h1>WoPeD</h1>
 
 <div class="content" role="main">
 
+
+
+    <app-t2p></app-t2p>
+
+    <!-- <h2>Next Steps</h2>
+    <p>What do you want to do next with your app?</p> -->
+
+    <!-- <input type="hidden" #selection>
+
+    <div class="card-container">
+        <div class="card card-small" (click)="selection.value = 'component'" tabindex="0">
+            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+            </svg>
+
+            <span>New Component</span>
+        </div>
+
+        <div class="card card-small" (click)="selection.value = 'material'" tabindex="0">
+            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+            </svg>
+
+            <span>Angular Material</span>
+        </div>
+
+        <div class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
+            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+            </svg>
+
+            <span>Add PWA Support</span>
+        </div>
+
+        <div class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
+            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+            </svg>
+
+            <span>Add Dependency</span>
+        </div>
+
+        <div class="card card-small" (click)="selection.value = 'test'" tabindex="0">
+            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+            </svg>
+
+            <span>Run and Watch Tests</span>
+        </div>
+
+        <div class="card card-small" (click)="selection.value = 'build'" tabindex="0">
+            <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+            </svg>
+
+            <span>Build for Production</span>
+        </div> -->
+
+
+
     <!-- <app-t2p></app-t2p> -->
+    <!-- <app-p2t></app-p2t> -->
+
+    <!-- <div class="card highlight-card card-small">
+
+        <svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678"
+            viewBox="0 0 101.678 101.678">
+            <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
+                <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839"
+                    transform="translate(141 696)" fill="#dd0031" />
+                <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
+                    <path id="Path_33" data-name="Path 33"
+                        d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z"
+                        transform="translate(0.371 3.363)" fill="#fff" />
+                    <path id="Path_34" data-name="Path 34"
+                        d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z"
+                        transform="translate(0 0.005)" fill="#fff" />
+                </g>
+            </g>
+        </svg>
 
-    <!--
-  <div class="card highlight-card card-small">
-
-    <svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678"
-      viewBox="0 0 101.678 101.678">
-      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
-        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)"
-          fill="#dd0031" />
-        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
-          <path id="Path_33" data-name="Path 33"
-            d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z"
-            transform="translate(0.371 3.363)" fill="#fff" />
-          <path id="Path_34" data-name="Path 34"
-            d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z"
-            transform="translate(0 0.005)" fill="#fff" />
-        </g>
-      </g>
-    </svg>
+        <span>{{ title }} app is running!</span>
 
-    <span>{{ title }} app is running!</span>
+        <svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119"
+            height="1083.632" viewBox="0 0 516.119 1083.632">
+            <path id="Path_40" data-name="Path 40"
+                d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z"
+                transform="translate(-147.025 -140.939)" fill="#f5f5f5" />
+        </svg>
 
-    <svg id="rocket-smoke" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632"
-      viewBox="0 0 516.119 1083.632">
-      <path id="Path_40" data-name="Path 40"
-        d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z"
-        transform="translate(-147.025 -140.939)" fill="#f5f5f5" />
-    </svg>
+    </div> -->
 
-  </div> -->
-    <!-- <mat-stepper orientation="vertical" #stepper>
-        <mat-step>
-            <form>
-                <ng-template matStepLabel>Text</ng-template>
-                <mat-form-field appearance="fill" [style.width.%]=80>
-                    <mat-label>Enter Text to Transform</mat-label>
-                    <textarea matInput cdkTextareaAutosize cdkAutosizeMinRows="4" cdkAutosizeMaxRows="100"
-                        id="text-input"></textarea>
-                </mat-form-field>
-                <div>
-                    <button mat-button matStepperNext>Convert</button>
-                </div>
-            </form>
-        </mat-step>
-
-        <mat-step>
-            <ng-template matStepLabel>Process (Done)</ng-template>
-            <p>You are now done.</p>
-            <div>
-                <button mat-button matStepperPrevious>Back</button>
-                <button mat-button (click)="stepper.reset()">Reset</button>
-                <button mat-button>Download Process as .png</button>
-            </div>
-        </mat-step>
-    </mat-stepper> -->
     <!-- Tabs to Switch between T2P and P2T -->
     <!-- <mat-tab-group>
         <mat-tab label="T2P (Text-to-Process)" class="tabGroup">

diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
@@ -15,6 +15,7 @@ import {TextFieldModule} from '@angular/cdk/text-field';
 import { HomeComponent } from './home.component';
 import { T2PComponent } from '../t2p/t2p.component';
 import { T2PModule} from '../t2p/t2p.module';
+import { P2tComponent } from '../p2t/p2t.component';
 
 
  @NgModule({
@@ -34,6 +35,7 @@ import { T2PModule} from '../t2p/t2p.module';
     TextFieldModule,
     T2PComponent,
     T2PModule,
+    P2tComponent
 
   ],
   providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}],

diff --git a/src/app/p2t/p2t.component.ts b/src/app/p2t/p2t.component.ts
@@ -3,7 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-p2t',
   templateUrl: './p2t.component.html',
-  styleUrls: ['./p2t.component.css']
+  styleUrls: ['./p2t.component.css'],
+  template: `'<p>p2t works!</p>'`
 })
 export class P2tComponent {
 

diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>WoPed</title>
@@ -11,7 +12,10 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
 </head>
+
 <body class="mat-typography">
   <app-root></app-root>
+  <!-- <app-p2t></app-p2t> -->
 </body>
-</html>
+
+</html>