Added Tab Functionality and also realtime data handling

src/app/app-routing.module.ts

@@ -3,10 +3,12 @@ import { RouterModule, Routes } from '@angular/router';
 import { RedirectionComponent } from './redirection/redirection.component';
 import { HomeComponent } from './home/home.component';
 import { ContentResolver } from './ContentService/contentresolver.service';
+import { PasswordComponent } from './password/password.component';
 
 const routes: Routes = [
   {path : '', redirectTo : generateRandomRouteId(), pathMatch:'full'},
-  {path : ':id', component:HomeComponent, pathMatch:'full',resolve: { content: ContentResolver },}
+  {path : ':id', component:HomeComponent, pathMatch:'full',resolve: { content: ContentResolver },},
+  {path : 'login/:id',component : PasswordComponent,pathMatch : 'full'}
 ];
 
 @NgModule({

src/app/app.component.html

@@ -1 +1,2 @@
+<app-navigation></app-navigation>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -3,26 +3,37 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { environment } from '../environments/environment';
-import { provideAnalytics,getAnalytics,ScreenTrackingService,UserTrackingService } from '@angular/fire/analytics';
-import { provideDatabase,getDatabase } from '@angular/fire/database';
-import { provideFunctions,getFunctions } from '@angular/fire/functions';
+import {
+  provideAnalytics,
+  getAnalytics,
+  ScreenTrackingService,
+  UserTrackingService,
+} from '@angular/fire/analytics';
+import { provideDatabase, getDatabase } from '@angular/fire/database';
+import { provideFunctions, getFunctions } from '@angular/fire/functions';
 import { RedirectionComponent } from './redirection/redirection.component';
 import { HomeComponent } from './home/home.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
 import { ContentResolver } from './ContentService/contentresolver.service';
+import { NavigationComponent } from './navigation/navigation.component';
+import { PasswordComponent } from './password/password.component';
 // import {c}
 
 @NgModule({
   declarations: [
     AppComponent,
     RedirectionComponent,
-    HomeComponent
+    HomeComponent,
+    NavigationComponent,
+    PasswordComponent,
   ],
   imports: [
     BrowserModule,
@@ -31,25 +42,26 @@ import { ContentResolver } from './ContentService/contentresolver.service';
     FormsModule,
     MatInputModule,
     MatButtonModule,
-    provideFirebaseApp(() => initializeApp({
-      projectId: environment.FIREBASE_PROJECT_ID,
-      appId: environment.FIREBASE_APP_ID,
-      databaseURL: environment.FIREBASE_DATABASE_URL,
-      storageBucket: environment.FIREBASE_STORAGE_BUCKET,
-      apiKey: environment.FIREBASE_API_KEY,
-      authDomain: environment.FIREBASE_AUTH_DOMAIN,
-      messagingSenderId: environment.FIREBASE_MESSAGING_SENDER_ID,
-      measurementId: environment.FIREBASE_MEASUREMENT_ID
-    })),
+    MatToolbarModule,
+    MatIconModule,
+    provideFirebaseApp(() =>
+      initializeApp({
+        projectId: environment.FIREBASE_PROJECT_ID,
+        appId: environment.FIREBASE_APP_ID,
+        databaseURL: environment.FIREBASE_DATABASE_URL,
+        storageBucket: environment.FIREBASE_STORAGE_BUCKET,
+        apiKey: environment.FIREBASE_API_KEY,
+        authDomain: environment.FIREBASE_AUTH_DOMAIN,
+        messagingSenderId: environment.FIREBASE_MESSAGING_SENDER_ID,
+        measurementId: environment.FIREBASE_MEASUREMENT_ID,
+      })
+    ),
     // provideAnalytics(() => getAnalytics()),
     provideDatabase(() => getDatabase()),
     BrowserAnimationsModule,
     // provideFunctions(() => getFunctions())
-
   ],
-  providers: [
-    ScreenTrackingService,UserTrackingService,ContentResolver
-  ],
-  bootstrap: [AppComponent]
+  providers: [ScreenTrackingService, UserTrackingService, ContentResolver],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/home/home.component.css

@@ -0,0 +1,22 @@
+
+.div-form {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    /* overflow: hidden; Prevent scrolling */
+    margin: 0; /* Remove default margin */
+
+    /* Add spacing around the form */
+    padding: 20px;
+    box-sizing: border-box; /* Include padding in total width and height */
+  }
+
+  .full-screen-textarea {
+    width: 100%; /* 80% of the screen width */
+    height: 85vh; /* 80% of the screen height */
+    box-sizing: border-box; /* Include padding in total width and height */
+    padding: 10px; /* Adjust padding as needed */
+  }
+

src/app/home/home.component.html

@@ -1,10 +1,18 @@
-<!-- teaxt area using -->
-<form>
-    <mat-form-field >
-        <!-- Onchange of the text in text area upload it to realtime automatically -->
-        <textarea matInput placeholder="Enter your text here" [ngModelOptions]="{standalone: true}" [(ngModel)]="text" (ngModelChange)="uploadText()" ></textarea>
+<div class="div-form">
+  <form style="width: 100%;height: 100%;">
+    <mat-form-field class="full-screen-textarea">
+      <textarea class="full-screen-textarea"
+        matInput
+        placeholder="Enter your text here"
+        [ngModelOptions]="{ standalone: true }"
+        [(ngModel)]="text"
+        rows="22"
+        (ngModelChange)="uploadText()"
+        (keydown)="onTextareaKeydown($event)"
+      ></textarea>
     </mat-form-field>
-
-    <!-- submit button -->
-
-</form>
+    <div>
+      Word Count: {{ words }} | Character Count: {{ characters }}
+    </div>
+  </form>
+</div>

src/app/home/home.component.ts

@@ -20,15 +20,17 @@ import {
 export class HomeComponent implements OnInit {
   routeId: string | null;
   text: string | null = null;
-  textref: any;
+  words: number = 0; // Initialize the word count
+  characters: number = 0; // Initialize the character count
+
   constructor(private route: ActivatedRoute) {
     this.routeId = this.route.snapshot.paramMap.get('id');
     this.text = this.route.snapshot.data['content']; // Resolved content
   }
 
   ngOnInit() {
     console.log(this.routeId);
-
+    this.updateWordAndCharacterCount();
     if (this.routeId) {
       this.checkIfRouteIdExistsInRealtimeDatabase(this.routeId)
         .then((foundText) => {
@@ -52,6 +54,9 @@ export class HomeComponent implements OnInit {
       onChildChanged(docRef, (snapshot) => {
         // console.log('Child changed:', snapshot.val());
         this.text = snapshot.val() || null;
+
+        // Update word and character counts
+        this.updateWordAndCharacterCount();
       });
     } else {
       console.error('Route ID is null or undefined');
@@ -68,6 +73,7 @@ export class HomeComponent implements OnInit {
     const db = getDatabase();
     set(ref(db, routeId), {
       text: this.text || '', // Set text to the current value or an empty string
+      locked : false
     })
       .then(() => {
         console.log('Document created successfully');
@@ -100,6 +106,7 @@ export class HomeComponent implements OnInit {
   }
 
   uploadText() {
+    this.updateWordAndCharacterCount();
     // Upload Text to document with id 'routeId' inside the 'text' collection
     //routeId-> text-> text
     const routeID = this.route.snapshot.paramMap.get('id');
@@ -119,4 +126,46 @@ export class HomeComponent implements OnInit {
     }
   }
 
+  // Tab key functionality
+  onTextareaKeydown(event: KeyboardEvent) {
+    // Check if the pressed key is Tab
+    if (event.key === 'Tab') {
+      // Prevent the default Tab behavior (e.g., moving focus to the next element)
+      event.preventDefault();
+
+      // Insert a tab character into the textarea
+      const textarea = event.target as HTMLTextAreaElement;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+
+      // Insert a tab character at the current cursor position
+      const newText =
+        textarea.value.substring(0, start) +
+        '\t' +
+        textarea.value.substring(end);
+      this.text = newText;
+
+      // Update the cursor position
+      textarea.selectionStart = textarea.selectionEnd = start + 1;
+
+      // Update word and character counts
+      this.updateWordAndCharacterCount();
+    }
+  }
+
+  updateWordAndCharacterCount() {
+    if (this.text) {
+      // Split the text into words (using spaces as word separators)
+      const words = this.text.split(/\s+/).filter((word) => word.trim() !== '');
+
+      // Update the word count
+      this.words = words.length;
+
+      // Update the character count
+      this.characters = this.text.length;
+    } else {
+      this.words = 0;
+      this.characters = 0;
+    }
+  }
 }

src/app/navigation/navigation.component.html

@@ -0,0 +1,11 @@
+<mat-toolbar color="primary">
+
+    <span>NOTECODE</span>
+    <span class="spacer"></span>
+    <button mat-icon-button>
+        <mat-icon>lock</mat-icon>
+    </button>
+    <button mat-icon-button>
+        <mat-icon>account_circle</mat-icon>
+    </button>
+</mat-toolbar>

src/app/navigation/navigation.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationComponent } from './navigation.component';
+
+describe('NavigationComponent', () => {
+  let component: NavigationComponent;
+  let fixture: ComponentFixture<NavigationComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NavigationComponent]
+    });
+    fixture = TestBed.createComponent(NavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/navigation/navigation.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.css']
+})
+export class NavigationComponent {
+
+}

src/app/password/password.component.html

@@ -0,0 +1 @@
+<p>password works!</p>

src/app/password/password.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordComponent } from './password.component';
+
+describe('PasswordComponent', () => {
+  let component: PasswordComponent;
+  let fixture: ComponentFixture<PasswordComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PasswordComponent]
+    });
+    fixture = TestBed.createComponent(PasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/password/password.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-password',
+  templateUrl: './password.component.html',
+  styleUrls: ['./password.component.css']
+})
+export class PasswordComponent {
+
+}

src/styles.css

@@ -1,4 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
+html, body { height: 100%; width: 100%; overflow-y: hidden;}
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }