refactor: add language samples

Author: nzbin

projects/dev-app/src/app/home/home.component.html

@@ -1,7 +1,7 @@
 <mat-sidenav-container>
   <mat-sidenav-content>
 
-    <mtx-split [style.height]="options.height.value+options.height.unit">
+    <mtx-split>
       <mtx-split-pane>
         <code-editor #editor
                      [style.height]="options.height.value+options.height.unit"
@@ -28,6 +28,6 @@
   </mat-sidenav-content>
 
   <mat-sidenav mode="side" position="end" opened>
-    <gui-form [style.width.px]="300" [config]="config" [model]="options" />
+    <gui-form [style.width.px]="300" [form]="form" [config]="config" [model]="options" />
   </mat-sidenav>
 </mat-sidenav-container>

projects/dev-app/src/app/home/home.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AfterViewInit, Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MtxSplitModule } from '@ng-matero/extensions/split';
 
@@ -21,14 +22,20 @@ import { languages } from '@codemirror/language-data';
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, AfterViewInit {
+  private readonly destroyRef = inject(DestroyRef);
+
   languages = languages;
 
+  form = new FormGroup({});
+
   config: GuiFields = {
     language: {
       type: 'select',
       name: 'Language',
-      options: languages.map(lang => ({ label: lang.name, value: lang.name.toLowerCase() })),
+      options: languages
+        .map(lang => ({ label: lang.name, value: lang.name.toLowerCase() }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
     },
     theme: {
       type: 'buttonToggle',
@@ -108,14 +115,36 @@ export class HomeComponent implements OnInit {
     indentUnit: '',
     lineWrapping: false,
     highlightWhitespace: false,
-    height: { value: 200, unit: 'px' },
+    height: { value: 100, unit: '%' },
   };
 
-  code = 'console.log("Hello world")';
+  code = '';
 
   log(e: any) {
     console.log(e);
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.getLangSample('javascript');
+  }
+
+  ngAfterViewInit(): void {
+    this.form
+      .get('language')
+      ?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((lang: string) => {
+        console.log(lang);
+        this.getLangSample(lang.replace(' ', '_').replace('#', 'sharp'));
+      });
+  }
+
+  getLangSample(lang: string) {
+    fetch(`/assets/lang_samples/${lang}.txt`).then(async response => {
+      if (response.ok) {
+        this.code = await response.text();
+      } else {
+        this.code = '';
+      }
+    });
+  }
 }

projects/dev-app/src/assets/lang_samples/angular_template.txt

@@ -0,0 +1,16 @@
+<h2>Todos</h2>
+<input #text />
+<button (click)="add(text.value)">Add</button>
+
+@for (todo of todos; track $index) {
+  <p>
+    <input type="checkbox" (change)="toggle($index)" />
+    @if (todo.done) {
+      <s>{{ todo.text }}</s>
+    } @else {
+      <span>{{ todo.text }}</span>
+    }
+  </p>
+} @empty {
+  <p>No todos</p>
+}

projects/dev-app/src/assets/lang_samples/bash.txt

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+###### CONFIG
+ACCEPTED_HOSTS="/root/.hag_accepted.conf"
+BE_VERBOSE=false
+
+if [ "$UID" -ne 0 ]
+then
+  echo "Superuser rights required"
+  exit 2
+fi
+
+genApacheConf(){
+  echo -e "# Host ${HOME_DIR}$1/$2 :"
+}
+
+echo '"quoted"' | tr -d \" > text.txt

projects/dev-app/src/assets/lang_samples/c++.txt

@@ -0,0 +1,18 @@
+class MyClass {       // The class
+  public:             // Access specifier
+    int myNum;        // Attribute (int variable)
+    string myString;  // Attribute (string variable)
+};
+
+int main() {
+  MyClass myObj;  // Create an object of MyClass
+
+  // Access attributes and set values
+  myObj.myNum = 15;
+  myObj.myString = "Some text";
+
+  // Print attribute values
+  cout << myObj.myNum << "\n";
+  cout << myObj.myString;
+  return 0;
+}

projects/dev-app/src/assets/lang_samples/c.txt

@@ -0,0 +1,6 @@
+#include <stdio.h>
+
+int main() {
+  printf("Hello World!");
+  return 0;
+}

projects/dev-app/src/assets/lang_samples/clojure.txt

@@ -0,0 +1,11 @@
+(def ^:dynamic chunk-size 17)
+
+(defn next-chunk [rdr]
+  (let [buf (char-array chunk-size)
+        s (.read rdr buf)]
+  (when (pos? s)
+    (java.nio.CharBuffer/wrap buf 0 s))))
+
+(defn chunk-seq [rdr]
+  (when-let [chunk (next-chunk rdr)]
+    (cons chunk (lazy-seq (chunk-seq rdr)))))

projects/dev-app/src/assets/lang_samples/coffeescript.txt

@@ -0,0 +1,13 @@
+grade = (student, period=(if b? then 7 else 6)) ->
+  if student.excellentWork
+    "A+"
+  else if student.okayStuff
+    if student.triedHard then "B" else "B-"
+  else
+    "C"
+
+class Animal extends Being
+  constructor: (@name) ->
+
+  move: (meters) ->
+    alert @name + " moved #{meters}m."

projects/dev-app/src/assets/lang_samples/csharp.txt

@@ -0,0 +1,17 @@
+using System.IO.Compression;
+
+#pragma warning disable 414, 3021
+
+namespace MyApplication
+{
+    [Obsolete("...")]
+    class Program : IInterface
+    {
+        public static List<int> JustDoIt(int count)
+        {
+            Span<int> numbers = stackalloc int[length];
+            Console.WriteLine($"Hello {Name}!");
+            return new List<int>(new int[] { 1, 2, 3 })
+        }
+    }
+}

projects/dev-app/src/assets/lang_samples/css.txt

@@ -0,0 +1,13 @@
+body {
+  background-color: lightblue;
+}
+
+h1 {
+  color: white;
+  text-align: center;
+}
+
+p {
+  font-family: verdana;
+  font-size: 20px;
+}