Drone: only build & push container on tag/promote

this logo shouldn't require a font

.drone.yml

@@ -0,0 +1,58 @@
+---
+kind: pipeline
+type: kubernetes
+name: build
+
+metadata:
+  labels:
+    pod-security.kubernetes.io/audit: privileged
+
+services:
+  - name: docker daemon
+    image: docker:dind
+    privileged: true
+    environment:
+      DOCKER_TLS_CERTDIR: ""
+    when:
+      event:
+        - tag
+        - promote
+
+steps:
+  - name: node.js build
+    image: node:18
+    commands:
+      - npm add --global pnpm
+      - pnpm i
+      - rm -f ./node_modules/ngx-monaco-editor/lib/monaco.d.ts
+      - sed -i '1d' ./node_modules/ngx-monaco-editor/lib/types.d.ts
+      - ./node_modules/.bin/ionic build --prod
+      - ./node_modules/.bin/ngsw-config ./www/ ./ngsw-config.json /i
+      - echo -n $(npx uuid) | tee ./www/version.html
+    environment:
+      NODE_OPTIONS: --openssl-legacy-provider
+
+  - name: container build
+    image: docker:latest
+    privileged: true
+    commands:
+      - "while ! docker stats --no-stream; do sleep 1; done"
+      - docker image build -t $DOCKER_REGISTRY/noded/frontend .
+      - docker push $DOCKER_REGISTRY/noded/frontend
+    environment:
+      DOCKER_HOST: tcp://localhost:2375
+      DOCKER_REGISTRY:
+        from_secret: DOCKER_REGISTRY
+    when:
+      event:
+        - tag
+        - promote
+
+  - name: k8s rollout
+    image: bitnami/kubectl:latest
+    commands:
+      - kubectl rollout restart -n noded deployment/noded-frontend
+    when:
+      event:
+        - tag
+        - promote

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

Dockerfile

@@ -0,0 +1,3 @@
+FROM joseluisq/static-web-server:2
+
+COPY ./www /public/i

README.md

@@ -0,0 +1,12 @@
+# Requirements for frontend development
+- Node.js 14.x
+- The PNPM package manager
+- The Ionic CLI, globally
+    - `npm --global add @ionic/cli`
+
+## For development:
+```sh
+pnpm i
+ionic serve
+```
+

android/.gitignore

@@ -0,0 +1,91 @@
+# NPM renames .gitignore to .npmignore
+# In order to prevent that, we remove the initial "."
+# And the CLI then renames it
+
+# Using Android gitignore template: https://github.com/github/gitignore/blob/master/Android.gitignore
+
+# Built application files
+*.apk
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public

android/.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

android/.idea/compiler.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="CompilerConfiguration">
+    <bytecodeTargetLevel target="1.8" />
+  </component>
+</project>

android/.idea/jarRepositories.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="RemoteRepositoriesConfiguration">
+    <remote-repository>
+      <option name="id" value="central" />
+      <option name="name" value="Maven Central repository" />
+      <option name="url" value="https://repo1.maven.org/maven2" />
+    </remote-repository>
+    <remote-repository>
+      <option name="id" value="jboss.community" />
+      <option name="name" value="JBoss Community repository" />
+      <option name="url" value="https://repository.jboss.org/nexus/content/repositories/public/" />
+    </remote-repository>
+    <remote-repository>
+      <option name="id" value="BintrayJCenter" />
+      <option name="name" value="BintrayJCenter" />
+      <option name="url" value="https://jcenter.bintray.com/" />
+    </remote-repository>
+    <remote-repository>
+      <option name="id" value="Google" />
+      <option name="name" value="Google" />
+      <option name="url" value="https://dl.google.com/dl/android/maven2/" />
+    </remote-repository>
+    <remote-repository>
+      <option name="id" value="MavenRepo" />
+      <option name="name" value="MavenRepo" />
+      <option name="url" value="https://repo.maven.apache.org/maven2/" />
+    </remote-repository>
+  </component>
+</project>

android/.idea/misc.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/build/classes" />
+  </component>
+  <component name="ProjectType">
+    <option name="id" value="Android" />
+  </component>
+</project>

android/app/.npmignore

@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep

android/app/build.gradle

@@ -0,0 +1,46 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "io.ionic.starter"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.warn("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}

android/app/capacitor.build.gradle

@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_1_8
+      targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}

android/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java

@@ -0,0 +1,27 @@
+package com.getcapacitor.myapp;
+
+import android.content.Context;
+
+import androidx.test.platform.app.InstrumentationRegistry;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+import static org.junit.Assert.*;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+  @Test
+  public void useAppContext() throws Exception {
+    // Context of the app under test.
+    Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+    assertEquals("com.getcapacitor.app", appContext.getPackageName());
+  }
+}

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="io.ionic.starter">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
+            android:name="io.ionic.starter.MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="@string/custom_url_scheme" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <!-- Camera, Photos, input file -->
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <!-- Geolocation API -->
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+    <uses-feature android:name="android.hardware.location.gps" />
+    <!-- Network API -->
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <!-- Navigator.getUserMedia -->
+    <!-- Video -->
+    <uses-permission android:name="android.permission.CAMERA" />
+    <!-- Audio -->
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
+</manifest>

android/app/src/main/assets/capacitor.config.json

@@ -0,0 +1,14 @@
+{
+  "appId": "io.ionic.starter",
+  "appName": "frontend",
+  "bundledWebRuntime": false,
+  "npmClient": "npm",
+  "webDir": "www",
+  "plugins": {
+    "SplashScreen": {
+      "launchShowDuration": 0
+    }
+  },
+  "cordova": {},
+  "linuxAndroidStudioPath": "/home/garrettmills/.local/android-studio/bin/studio.sh"
+}

android/app/src/main/java/io/ionic/starter/MainActivity.java

@@ -0,0 +1,21 @@
+package io.ionic.starter;
+
+import android.os.Bundle;
+
+import com.getcapacitor.BridgeActivity;
+import com.getcapacitor.Plugin;
+
+import java.util.ArrayList;
+
+public class MainActivity extends BridgeActivity {
+  @Override
+  public void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+
+    // Initializes the Bridge
+    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
+      // Additional plugins you've installed go here
+      // Ex: add(TotallyAwesomePlugin.class);
+    }});
+  }
+}

android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>

android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>

android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">frontend</string>
+    <string name="title_activity_main">frontend</string>
+    <string name="package_name">io.ionic.starter</string>
+    <string name="custom_url_scheme">io.ionic.starter</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>

android/app/src/main/res/xml/config.xml

@@ -0,0 +1,6 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <access origin="*" />
+  
+  
+</widget>

android/app/src/main/res/xml/file_paths.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>

android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java

@@ -0,0 +1,17 @@
+package com.getcapacitor.myapp;
+
+import org.junit.Test;
+
+import static org.junit.Assert.*;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+  @Test
+  public void addition_isCorrect() throws Exception {
+    assertEquals(4, 2 + 2);
+  }
+}

android/build.gradle

@@ -0,0 +1,29 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:3.6.1'
+        classpath 'com.google.gms:google-services:4.3.3'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        jcenter()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

android/capacitor.settings.gradle

@@ -0,0 +1,3 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')

android/gradle.properties

@@ -0,0 +1,24 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,188 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
+if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
+  cd "$(dirname "$0")"
+fi
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,100 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'

android/variables.gradle

@@ -0,0 +1,17 @@
+ext {
+    minSdkVersion = 21
+    compileSdkVersion = 29
+    targetSdkVersion = 29
+    androidxAppCompatVersion = '1.1.0'
+    androidxCoreVersion =  '1.2.0'
+    androidxMaterialVersion =  '1.1.0-rc02'
+    androidxBrowserVersion =  '1.2.0'
+    androidxLocalbroadcastmanagerVersion =  '1.0.0'
+    androidxExifInterfaceVersion = '1.2.0'
+    firebaseMessagingVersion =  '20.1.2'
+    playServicesLocationVersion =  '17.0.0'
+    junitVersion =  '4.12'
+    androidxJunitVersion =  '1.1.1'
+    androidxEspressoCoreVersion =  '3.2.0'
+    cordovaAndroidVersion =  '7.0.0'
+}

angular.json

@@ -25,21 +25,41 @@
                 "input": "src/assets",
                 "output": "assets"
               },
+              {
+                "glob": "**/*.svg",
+                "input": "src/assets",
+                "output": "assets"
+              },
               {
                 "glob": "**/*.svg",
                 "input": "node_modules/ionicons/dist/ionicons/svg",
                 "output": "./svg"
-              }
+              },
+              { "glob": "**/*", "input": "node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" },
+
+              "src/manifest.webmanifest"
             ],
             "styles": [
+              {
+                "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+              },
               {
                 "input": "src/theme/variables.scss"
               },
               {
                 "input": "src/global.scss"
+              },
+              {
+                "input": "src/assets/font/fonts.css"
+              },
+              {
+                "input": "node_modules/katex/dist/katex.min.css"
               }
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/marked/lib/marked.js",
+              "node_modules/katex/dist/katex.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -49,6 +69,10 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
+              "index": {
+                "input": "src/index.prod.html",
+                "output": "index.html"
+              },
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -62,9 +86,15 @@
                 {
                   "type": "initial",
                   "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             },
             "ci": {
               "progress": false
@@ -111,7 +141,8 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "/assets"
-              }
+              },
+              "src/manifest.webmanifest"
             ]
           },
           "configurations": {

azure-pipelines.yml

@@ -16,8 +16,45 @@ steps:
   displayName: 'Install Node.js'
 
 - script: |
-    # npm install -g @angular/cli 
     npm install -g @ionic/cli
+    npm update
     npm install
     ionic build --prod
   displayName: 'npm install and build'
+
+- task: CmdLine@2
+  inputs:
+    script: |
+      echo $(Build.Repository.LocalPath)
+      ls -la $(Build.Repository.LocalPath)
+
+# # Archive files
+- task: ArchiveFiles@2
+  inputs:
+    rootFolderOrFile: '$(Build.Repository.LocalPath)/www'
+    includeRootFolder: true
+    archiveType: 'tar'
+    archiveFile: '$(Build.ArtifactStagingDirectory)/target-www.tar.gz'
+    replaceExistingArchive: true
+    verbose: true
+
+- task: PublishPipelineArtifact@1
+  inputs:
+    # targetPath: '$(Pipeline.Workspace)'
+    targetPath: '$(Build.ArtifactStagingDirectory)/target-www.tar.gz'
+    artifact: 'FrontEnd'
+    publishLocation: 'pipeline'
+
+- task: CopyFilesOverSSH@0
+  displayName: 'Securely copy files to the remote machine'
+  inputs:
+    sshEndpoint: GoogleServer
+    sourceFolder: '$(Build.ArtifactStagingDirectory)'
+    targetFolder: /var/lib/app/pipeline/
+    failOnEmptySource: true
+
+- task: SSH@0
+  displayName: 'Run shell commands on remote machine'
+  inputs:
+    sshEndpoint: GoogleServer
+    commands: '/var/lib/app/pipeline/frontend-deploy.sh'

capacitor.config.json

@@ -0,0 +1,14 @@
+{
+  "appId": "io.ionic.starter",
+  "appName": "frontend",
+  "bundledWebRuntime": false,
+  "npmClient": "npm",
+  "webDir": "www",
+  "plugins": {
+    "SplashScreen": {
+      "launchShowDuration": 0
+    }
+  },
+  "cordova": {},
+  "linuxAndroidStudioPath": "/home/garrettmills/.local/android-studio/bin/studio.sh"
+}

ngsw-config.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "prefetch",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -9,34 +9,60 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "build:prod": "rm -f ./node_modules/ngx-monaco-editor/lib/monaco.d.ts && sed -i '1d' ./node_modules/ngx-monaco-editor/lib/types.d.ts && ionic build --prod && ngsw-config ./www/ ./ngsw-config.json /i && echo -n $(uuidgen) | tee ./www/version.html",
+    "docker:build": "docker build -t ${DOCKER_REGISTRY}/noded/frontend .",
+    "docker:push": "docker push ${DOCKER_REGISTRY}/noded/frontend",
+    "postinstall": "sed -i '/^declare let MonacoEnvironment/d' node_modules/ngx-monaco-editor/lib/monaco.d.ts"
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "~8.1.2",
-    "@angular/core": "~8.1.2",
-    "@angular/forms": "~8.1.2",
-    "@angular/platform-browser": "~8.1.2",
-    "@angular/platform-browser-dynamic": "~8.1.2",
-    "@angular/router": "~8.1.2",
+    "@angular/common": "~10.1.5",
+    "@angular/core": "~10.1.5",
+    "@angular/forms": "~10.1.5",
+    "@angular/platform-browser": "~10.1.5",
+    "@angular/platform-browser-dynamic": "~10.1.5",
+    "@angular/pwa": "^0.1001.7",
+    "@angular/router": "~10.1.5",
+    "@angular/service-worker": "~10.1.5",
+    "@ckeditor/ckeditor5-angular": "^2.0.1",
+    "@ckeditor/ckeditor5-build-decoupled-document": "^27.0.0",
+    "@convergencelabs/monaco-collab-ext": "^0.3.2",
+    "@fortawesome/fontawesome-free": "^5.15.1",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
-    "@ionic/angular": "^4.7.1",
+    "@ionic/angular": "^5.3.5",
+    "@ionic/cli": "^6.12.0",
+    "@ng-stack/contenteditable": "^1.1.0",
+    "ag-grid-angular": "^24.1.0",
+    "ag-grid-community": "^24.1.0",
+    "angular-resize-event": "^2.0.1",
     "core-js": "^2.5.4",
-    "rxjs": "~6.5.1",
+    "dexie": "^3.0.2",
+    "highlight.js": "^10.6.0",
+    "ionic-selectable": "^4.7.1",
+    "katex": "0.12.0",
+    "marked": "1.2.5",
+    "moment": "^2.24.0",
+    "ng-connection-service": "^1.0.4",
+    "ngx-highlightjs": "^4.1.3",
+    "ngx-markdown": "^10.1.1",
+    "ngx-monaco-editor": "^9.0.0",
+    "rxjs": "~6.6.3",
     "tslib": "^1.9.0",
-    "zone.js": "~0.9.1"
+    "uuid": "^3.4.0",
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
     "@angular-devkit/architect": "~0.801.2",
-    "@angular-devkit/build-angular": "~0.801.2",
-    "@angular-devkit/core": "~8.1.2",
-    "@angular-devkit/schematics": "~8.1.2",
-    "@angular/cli": "~8.1.2",
-    "@angular/compiler": "~8.1.2",
-    "@angular/compiler-cli": "~8.1.2",
-    "@angular/language-service": "~8.1.2",
+    "@angular-devkit/build-angular": "~0.1001.6",
+    "@angular-devkit/core": "~10.1.6",
+    "@angular-devkit/schematics": "^10.1.6",
+    "@angular/cli": "^10.1.6",
+    "@angular/compiler": "~10.1.5",
+    "@angular/compiler-cli": "~10.1.5",
+    "@angular/language-service": "~10.1.5",
     "@ionic/angular-toolkit": "^2.1.1",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
@@ -52,7 +78,7 @@
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",
-    "typescript": "~3.4.3"
+    "typescript": "~4.0.3"
   },
   "description": "An Ionic project"
 }

proxy.conf.json

@@ -2,6 +2,8 @@
   "/link_api": {
     "target": "http://localhost:8000",
     "secure": false,
+    "ws": true,
+    "changeOrigin": true,
     "logLevel": "debug",
     "pathRewrite": {"^/link_api":  ""}
   }

src/app/app-routing.module.ts

@@ -1,5 +1,8 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import {LoginPage} from './pages/login/login.page';
+import {AuthService} from './service/auth.service';
+import {GuestOnlyGuard} from './service/guard/GuestOnly.guard';
 
 const routes: Routes = [
   {
@@ -9,15 +12,17 @@ const routes: Routes = [
   },
   {
     path: 'home',
+    canActivate: [AuthService],
     loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
   },
   {
-    path: 'list',
-    loadChildren: () => import('./list/list.module').then(m => m.ListPageModule)
+    path: 'editor',
+    loadChildren: () => import('./components/components.module').then( m => m.ComponentsModule)
   },
   {
-    path: 'editor',
-    loadChildren: () => import('./pages/editor/editor.module').then( m => m.EditorPageModule)
+    path: 'login',
+    canActivate: [GuestOnlyGuard],
+    component: LoginPage,
   }
 ];
 

src/app/app.component.html

@@ -1,24 +1,56 @@
-<ion-app>
-  <ion-split-pane contentId="main-content">
-    <ion-menu contentId="main-content" type="overlay">
+<ion-app class="dark">
+  <ion-split-pane contentId="main-content" *ngIf="ready$ | async">
+    <ion-menu class="sidebar no-print" menuId="main-menu" contentId="main-content" content="content" type="push" side="start" *ngIf="!api.isPublicUser">
       <ion-header>
-        <ion-toolbar>
-          <ion-title>Menu</ion-title>
+        <ion-toolbar color="primary">
+          <ion-title style="font-weight: bold; color: white;">{{ appName }}
+            <ion-menu-toggle menu="first" autoHide="false"></ion-menu-toggle>
+          </ion-title>
         </ion-toolbar>
+        <ion-list>
+          <ion-list-header>
+            <ion-buttons>
+              <ion-button fill="outline" [color]="refreshingMenu ? 'success' : 'light'" (click)="onMenuRefresh()">
+                <ion-icon color="tertiary" name="refresh"></ion-icon>
+              </ion-button>
+              <ion-button fill="outline" color="light" (click)="onCreateClick($event)">
+                <ion-icon color="primary" name="add-circle"></ion-icon>&nbsp;<span class="button-text">Create</span>
+              </ion-button>
+              <ion-button fill="outline" color="light" (click)="onDeleteClick()" [disabled]="!deleteTarget">
+                <ion-icon color="danger" name="trash"></ion-icon>
+              </ion-button>
+              <ion-button fill="outline" color="light" (click)="onNodeMenuClick($event)" [disabled]="!menuTarget || !menuTarget.id">
+                <i class="fa fa-ellipsis-v" style="color: darkgrey"></i>
+              </ion-button>
+              <ion-button fill="outline" color="light" (click)="onVirtualRootClear($event)" *ngIf="virtualRootPageId" title="Show entire tree">
+                <i class="fa fa-search-minus" style="color: darkgrey"></i>
+              </ion-button>
+            </ion-buttons>
+          </ion-list-header>
+        </ion-list>
       </ion-header>
       <ion-content>
-        <ion-list>
-          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
-            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
-              <ion-icon slot="start" [name]="p.icon"></ion-icon>
-              <ion-label>
-                {{p.title}}
-              </ion-label>
-            </ion-item>
-          </ion-menu-toggle>
-        </ion-list>
+        <app-tree-root
+          #menuTree
+          [items]="nodes"
+          iconClassField="faIconClass"
+          (itemSelected)="onMenuItemClick($event)"
+          (itemActivated)="onMenuItemActivate($event)"
+          (itemRightClicked)="onMenuItemRightClick($event)"
+        ></app-tree-root>
       </ion-content>
+      <ion-footer>
+        <ion-searchbar
+          placeholder="Quick filter"
+          (ionChange)="onMenuFilterChange($event)"
+        ></ion-searchbar>
+        <ion-item button lines="full" (click)="showOptions($event)">
+          <ion-icon name="list" slot="start"></ion-icon>
+          <ion-label>Menu</ion-label>
+        </ion-item>
+      </ion-footer>
     </ion-menu>
-    <ion-router-outlet id="main-content"></ion-router-outlet>
+
+    <ion-router-outlet id="main-content" #content main></ion-router-outlet>
   </ion-split-pane>
 </ion-app>

src/app/app.component.scss

@@ -0,0 +1,38 @@
+.sidebar {
+  max-width: 20em !important;
+}
+
+//text portion of buttons
+.button-text {
+  color: var(--ion-color-medium-shade);
+}
+
+.tree-node-container {
+  .tree-node-icon {
+    margin-right: 10px;
+  }
+
+  &.page {
+    .tree-node-icon {
+      color: var(--noded-background-note);
+    }
+  }
+
+  &.db {
+    .tree-node-icon {
+      color: var(--noded-background-db);
+    }
+  }
+
+  &.code {
+    .tree-node-icon {
+      color: var(--noded-background-code);
+    }
+  }
+
+  &.files, &.file_box {
+    .tree-node-icon {
+      color: var(--noded-background-files);
+    }
+  }
+}

src/app/app.component.spec.ts

@@ -1,67 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { TestBed, async } from '@angular/core/testing';
-
-import { Platform } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-
-  let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
-
-  beforeEach(async(() => {
-    statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
-    splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
-    platformReadySpy = Promise.resolve();
-    platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
-
-    TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-      providers: [
-        { provide: StatusBar, useValue: statusBarSpy },
-        { provide: SplashScreen, useValue: splashScreenSpy },
-        { provide: Platform, useValue: platformSpy },
-      ],
-      imports: [ RouterTestingModule.withRoutes([])],
-    }).compileComponents();
-  }));
-
-  it('should create the app', async () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it('should initialize the app', async () => {
-    TestBed.createComponent(AppComponent);
-    expect(platformSpy.ready).toHaveBeenCalled();
-    await platformReadySpy;
-    expect(statusBarSpy.styleDefault).toHaveBeenCalled();
-    expect(splashScreenSpy.hide).toHaveBeenCalled();
-  });
-
-  it('should have menu labels', async () => {
-    const fixture = await TestBed.createComponent(AppComponent);
-    await fixture.detectChanges();
-    const app = fixture.nativeElement;
-    const menuItems = app.querySelectorAll('ion-label');
-    expect(menuItems.length).toEqual(2);
-    expect(menuItems[0].textContent).toContain('Home');
-    expect(menuItems[1].textContent).toContain('List');
-  });
-
-  it('should have urls', async () => {
-    const fixture = await TestBed.createComponent(AppComponent);
-    await fixture.detectChanges();
-    const app = fixture.nativeElement;
-    const menuItems = app.querySelectorAll('ion-item');
-    expect(menuItems.length).toEqual(2);
-    expect(menuItems[0].getAttribute('ng-reflect-router-link')).toEqual('/home');
-    expect(menuItems[1].getAttribute('ng-reflect-router-link')).toEqual('/list');
-  });
-
-});

src/app/app.component.ts

@@ -1,45 +1,822 @@
-import { Component } from '@angular/core';
+import {Component, OnInit, ViewChild, HostListener} from '@angular/core';
 
-import { Platform } from '@ionic/angular';
+import {
+  AlertController,
+  ModalController,
+  Platform,
+  PopoverController,
+  LoadingController,
+  ToastController, NavController
+} from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { ApiService } from './service/api.service';
+import { Router } from '@angular/router';
+import {BehaviorSubject, Observable} from 'rxjs';
+import {OptionPickerComponent} from './components/option-picker/option-picker.component';
+import {OptionMenuComponent} from './components/option-menu/option-menu.component';
+import {SelectorComponent} from './components/sharing/selector/selector.component';
+import {SessionService} from './service/session.service';
+import {SearchComponent} from './components/search/Search.component';
+import {NodeTypeIcons} from './structures/node-types';
+import {NavigationService} from './service/navigation.service';
+import {DatabaseService} from './service/db/database.service';
+import {EditorService} from './service/editor.service';
+import {debug} from './utility';
+import {AuthService} from './service/auth.service';
+import {OpenerService} from './service/opener.service';
+import {TreeRootComponent} from './components/tree-root/tree-root.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss']
 })
-export class AppComponent {
-  public appPages = [
-    {
-      title: 'Home',
-      url: '/home',
-      icon: 'home'
-    },
-    {
-      title: 'List',
-      url: '/list',
-      icon: 'list'
-    },
-    {
-      title: 'Editor',
-      url: '/editor',
-      icon: 'edit'
-    }
-  ];
+export class AppComponent implements OnInit {
+  @ViewChild('menuTree') menuTree: TreeRootComponent;
+  public readonly ready$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  public addChildTarget: any = false;
+  public deleteTarget: any = false;
+  public menuTarget: any = false;
+  public refreshingMenu = false;
+  public lastClickEvent?: {event: MouseEvent, item: any};
+  public nodes = [];
+  public virtualRootPageId?: string;
+  public typeIcons = NodeTypeIcons;
+
+  public get appName(): string {
+    return this.session.appName || 'Noded';
+  }
+
+  public darkMode = false;
+  protected loader?: any;
+  protected hasSearchOpen = false;
+  protected versionInterval?: any;
+  protected showedNewVersionAlert = false;
+  protected showedOfflineAlert = false;
 
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
-    private statusBar: StatusBar
-  ) {
+    private statusBar: StatusBar,
+    public readonly api: ApiService,
+    protected router: Router,
+    protected alerts: AlertController,
+    protected popover: PopoverController,
+    protected modal: ModalController,
+    protected session: SessionService,
+    protected loading: LoadingController,
+    protected navService: NavigationService,
+    protected toasts: ToastController,
+    protected db: DatabaseService,
+    protected editor: EditorService,
+    protected auth: AuthService,
+    protected opener: OpenerService,
+  ) { }
+
+  public onMenuItemClick(event: {event: MouseEvent, item: any}) {
+    this.addChildTarget = false;
+    this.deleteTarget = false;
+    this.menuTarget = false;
+
+    if ( !event.item.noChildren && (!event.item.level || event.item.level === 'manage') ) {
+      this.addChildTarget = event.item;
+    }
+
+    if ( !event.item.noDelete && (!event.item.level || event.item.level === 'manage') ) {
+      this.deleteTarget = event.item;
+    }
+
+    this.menuTarget = event.item;
+    this.lastClickEvent = event;
+  }
+
+  public onMenuItemActivate(event: {event: MouseEvent, item: any}) {
+    this.navigateEditorToNode(event.item);
+  }
+
+  public onMenuItemRightClick(event: {event: MouseEvent, item: any}) {
+    event.event.preventDefault();
+    event.event.stopPropagation();
+
+    this.addChildTarget = false;
+    this.deleteTarget = false;
+    this.menuTarget = false;
+
+    if ( !event.item.noChildren && (!event.item.level || event.item.level === 'manage') ) {
+      this.addChildTarget = event.item;
+    }
+
+    if ( !event.item.noDelete && (!event.item.level || event.item.level === 'manage') ) {
+      this.deleteTarget = event.item;
+    }
+
+    this.menuTarget = event.item;
+    this.lastClickEvent = event;
+
+    this.onNodeMenuClick(event.event, true);
+  }
+
+  public onMenuFilterChange(event) {
+    const filterValue = event?.detail?.value;
+    debug('Filtering tree:', filterValue);
+    this.menuTree?.filterTree(filterValue);
+  }
+
+  async checkNewVersion() {
+    if ( !this.showedNewVersionAlert && await this.session.newVersionAvailable() ) {
+      const toast = await this.toasts.create({
+        cssClass: 'compat-toast-container',
+        header: 'Update Available',
+        message: `A new version of ${this.appName} is available. Please refresh to update.`,
+        buttons: [
+          {
+            side: 'end',
+            text: 'Refresh',
+            handler: () => {
+              window.location.reload();
+            },
+          },
+        ],
+      });
+
+      this.showedNewVersionAlert = true;
+      await toast.present();
+    }
+  }
+
+  ngOnInit() {
+    debug('Initializing application.');
     this.initializeApp();
   }
 
-  initializeApp() {
-    this.platform.ready().then(() => {
-      this.statusBar.styleDefault();
-      this.splashScreen.hide();
+  @HostListener('window:popstate', ['$event'])
+  dismissModal(event) {
+    const modal = this.modal.getTop();
+
+    if ( modal ) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.modal.dismiss();
+    }
+  }
+
+  showOptions($event) {
+    this.popover.create({
+      event: $event,
+      component: OptionPickerComponent,
+      componentProps: {
+        toggleDark: () => this.toggleDark(),
+        isDark: () => this.isDark(),
+        showSearch: () => this.handleKeyboardEvent(),
+        isPrefetch: () => this.isPrefetch(),
+        togglePrefetch: () => this.togglePrefetch(),
+        doPrefetch: () => this.doPrefetch(),
+      }
+    }).then(popover => popover.present());
+  }
+
+  @HostListener('document:keyup.control./', ['$event'])
+  async handleKeyboardEvent() {
+    if ( this.hasSearchOpen ) {
+      return;
+    }
+
+    const modal = await this.modal.create({
+      component: SearchComponent,
+      cssClass: 'modal-med',
+    });
+
+    const modalState = {
+      modal : true,
+      desc : 'Search everything'
+    };
+
+    history.pushState(modalState, null);
+
+    this.hasSearchOpen = true;
+    await modal.present();
+
+    await modal.onDidDismiss();
+    this.hasSearchOpen = false;
+  }
+
+  public navigateEditorToNode(node: any) {
+    if ( !node.data ) {
+      node = { data: node };
+    }
+
+    const id = node.data.id;
+    const nodeId = node.data.node_id;
+    if ( !node.data.virtual ) {
+      debug('Navigating editor to node:', {id, nodeId});
+
+      this.opener.currentPageId = id;
+      this.opener.openTarget(id, nodeId);
+    }
+  }
+
+  async onNodeMenuClick($event, fromContextMenu = false) {
+    let canManage = this.menuTarget.level === 'manage';
+    if ( !canManage ) {
+      if ( !this.menuTarget.level ) {
+        canManage = true;
+      }
+    }
+
+    if ( !this.menuTarget.id ) {
+      return;
+    }
+
+    const options = [
+      {name: 'Make Virtual Root', icon: 'fa fa-search-plus', value: 'virtual_root'},
+      {name: 'Export to HTML', icon: 'fa fa-file-export', value: 'export_html'},
+      // {name: 'Export as PDF', icon: 'fa fa-file-export', value: 'export_pdf'},
+    ];
+
+    const manageOptions = [
+      ...(fromContextMenu ? this.getCreateNodeMenuItems() : []),
+      {name: 'Share Sub-Tree', icon: 'fa fa-share-alt', value: 'share'},
+      {name: 'Delete Sub-Tree', icon: 'fa fa-trash noded-danger', value: 'delete'},
+    ];
+
+    if ( this.menuTarget.bookmark ) {
+      options.push({name: 'Remove Bookmark', icon: 'fa fa-star', value: 'bookmark_remove'});
+    } else {
+      options.push({name: 'Bookmark', icon: 'fa fa-star', value: 'bookmark_add'});
+    }
+
+    const popover = await this.popover.create({
+      component: OptionMenuComponent,
+      componentProps: {
+        menuItems: [
+            ...(!canManage ? options : [...options, ...manageOptions]),
+        ],
+      },
+      event: $event,
+    });
+
+    popover.onDidDismiss().then((result) => {
+      if ( result.data === 'share' ) {
+        this.modal.create({
+          component: SelectorComponent,
+          cssClass: 'modal-med',
+          componentProps: {
+            node: this.menuTarget,
+          }
+        }).then(modal => {
+          const modalState = {
+            modal : true,
+            desc : 'Share page'
+          };
+
+          history.pushState(modalState, null);
+
+          modal.present();
+        });
+      } else if ( result.data === 'export_html' ) {
+        this.exportTargetAsHTML();
+      } else if ( result.data === 'export_pdf' ) {
+        // this.exportTargetAsPDF();
+      } else if ( result.data === 'virtual_root' ) {
+        this.setVirtualRoot();
+      } else if ( result.data === 'bookmark_add' ) {
+        this.addBookmark();
+      } else if ( result.data === 'bookmark_remove' ) {
+        this.removeBookmark();
+      } else if ( result.data === 'top-level' ) {
+        this.onTopLevelCreate();
+      } else if ( result.data === 'child' ) {
+        this.onChildCreate();
+      } else if ( result.data === 'form' ) {
+        this.onChildCreate('form');
+      } else if ( result.data === 'delete' ) {
+        this.onDeleteClick();
+      }
+    });
+
+    await popover.present();
+  }
+
+  async setVirtualRoot() {
+    if ( this.menuTarget && this.menuTarget?.type === 'page' ) {
+      debug('virtual root menu target', this.menuTarget);
+      this.virtualRootPageId = this.menuTarget.id;
+      this.reloadMenuItems().subscribe();
+    }
+  }
+
+  onVirtualRootClear(event) {
+    delete this.virtualRootPageId;
+    this.reloadMenuItems().subscribe();
+  }
+
+  async exportTargetAsHTML() {
+    const exportRecord: any = await new Promise((res, rej) => {
+      const reqData = {
+        format: 'html',
+        PageId: this.menuTarget.id,
+      };
+
+      this.api.post(`/exports/subtree`, reqData).subscribe({
+        next: (result) => {
+          res(result.data);
+        },
+        error: rej
+      });
+    });
+
+    const dlUrl = this.api._build_url(`/exports/${exportRecord.UUID}/download`);
+    window.open(dlUrl, '_blank');
+  }
+
+  addBookmark() {
+    const bookmarks = this.session.get('user.preferences.bookmark_page_ids') || [];
+
+    if ( !bookmarks.includes(this.menuTarget.id) ) {
+      bookmarks.push(this.menuTarget.id);
+    }
+
+    this.session.set('user.preferences.bookmark_page_ids', bookmarks);
+    this.session.save().then(() => this.navService.requestSidebarRefresh({ quiet: true }));
+  }
+
+  removeBookmark() {
+    let bookmarks = this.session.get('user.preferences.bookmark_page_ids') || [];
+    bookmarks = bookmarks.filter(x => x !== this.menuTarget.id);
+
+    this.session.set('user.preferences.bookmark_page_ids', bookmarks);
+    this.session.save().then(() => this.navService.requestSidebarRefresh({ quiet: true }));
+  }
+
+  getCreateNodeMenuItems() {
+    return [
+      {
+        name: 'Create Top-Level Note',
+        icon: 'fa fa-sticky-note noded-note',
+        value: 'top-level',
+        title: 'Create a new top-level note page',
+      },
+      ...(this.addChildTarget ? [
+        {
+          name: 'Create Child Note',
+          icon: 'fa fa-sticky-note noded-note',
+          value: 'child',
+          title: 'Create a note page as a child of the given note',
+        },
+        {
+          name: 'Create Form',
+          icon: 'fa fa-clipboard-list noded-form',
+          value: 'form',
+          title: 'Create a new form page as a child of the given note',
+        },
+      ] : []),
+    ];
+  }
+
+  async onCreateClick($event: MouseEvent) {
+    const menuItems = this.getCreateNodeMenuItems();
+
+    const popover = await this.popover.create({
+      event: $event,
+      component: OptionMenuComponent,
+      componentProps: {
+        menuItems,
+      },
+    });
+
+    popover.onDidDismiss().then(({ data: value }) => {
+      if ( value === 'top-level' ) {
+        this.onTopLevelCreate();
+      } else if ( value === 'child' ) {
+        this.onChildCreate();
+      } else if ( value === 'form' ) {
+        this.onChildCreate('form');
+      }
+    });
+
+    await popover.present();
+  }
+
+  async onTopLevelCreate() {
+    const alert = await this.alerts.create({
+      header: 'Create Page',
+      message: 'Please enter a new name for the page:',
+      cssClass: 'page-prompt',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: 'My Awesome Page'
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary'
+        },
+        {
+          text: 'Create',
+          handler: async args => {
+            const page = await this.editor.createPage(args.name);
+            this.reloadMenuItems().subscribe();
+            await this.router.navigate(['/editor', { id: page.UUID }]);
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async onChildCreate(pageType?: string) {
+    const alert = await this.alerts.create({
+      header: 'Create Sub-Page',
+      message: 'Please enter a new name for the page:',
+      cssClass: 'page-prompt',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: 'My Awesome Page'
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary'
+        },
+        {
+          text: 'Create',
+          handler: async args => {
+            args = {
+              name: args.name,
+              parentId: this.addChildTarget.id,
+              pageType,
+            };
+            this.api.post('/page/create-child', args).subscribe(res => {
+              this.reloadMenuItems().subscribe(() => {
+                this.router.navigate(['/editor', { id: res.data.UUID }]);
+              });
+            });
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async onDeleteClick() {
+    const alert = await this.alerts.create({
+      header: 'Delete page?',
+      message:
+        'Deleting this page will make its contents and all of its children inaccessible. Are you sure you want to continue?',
+      buttons: [
+        {
+          text: 'Keep It',
+          role: 'cancel'
+        },
+        {
+          text: 'Delete It',
+          handler: async () => {
+            this.api
+              .post(`/page/delete/${this.deleteTarget.id}`)
+              .subscribe(res => {
+                if ( this.opener.currentPageId === this.deleteTarget.id ) {
+                  this.router.navigate(['/home']);
+                }
+
+                this.reloadMenuItems().subscribe();
+                this.deleteTarget = false;
+                this.addChildTarget = false;
+                this.menuTarget = false;
+              });
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  onMenuRefresh(quiet = false) {
+    if ( !quiet ) {
+      this.refreshingMenu = true;
+    }
+
+    this.reloadMenuItems().subscribe();
+
+    setTimeout(() => {
+      if ( !quiet ) {
+        this.refreshingMenu = false;
+      }
+    }, 2000);
+  }
+
+  reloadMenuItems() {
+    return new Observable(sub => {
+      this.api.getMenuItems(false, this.virtualRootPageId).then(nodes => {
+        this.nodes = nodes;
+        sub.next();
+        sub.complete();
+      });
     });
   }
+
+  async initializeApp() {
+    const initializedOnce = this.navService.initialized$.getValue();
+
+    if ( this.isDark() ) {
+      this.toggleDark();
+    }
+
+    debug('app', this);
+    this.loader = await this.loading.create({
+      message: 'Setting things up...',
+      cssClass: 'noded-loading-mask',
+      showBackdrop: true,
+    });
+
+    debug('Initializing platform and database...');
+    await this.loader.present();
+    await this.platform.ready();
+    await this.db.createSchemata();
+
+    let toast: any;
+
+    if ( !initializedOnce ) {
+      debug('Subscribing to offline changes...');
+      this.api.offline$.subscribe(async isOffline => {
+        if ( isOffline && !this.showedOfflineAlert ) {
+          debug('Application went offline!');
+          toast = await this.toasts.create({
+            cssClass: 'compat-toast-container',
+            message: 'Uh, oh! It looks like you\'re offline. Some features might not work as expected...',
+          });
+
+          this.showedOfflineAlert = true;
+          await toast.present();
+        } else if ( !isOffline && this.showedOfflineAlert ) {
+          debug('Appliation went online!');
+          await toast.dismiss();
+          this.showedOfflineAlert = false;
+          await this.api.syncOfflineData();
+        }
+      });
+    }
+
+    debug('Getting initial status...');
+    let stat: any = await this.session.stat();
+    debug('Got stat:', stat);
+
+    this.api.isPublicUser = !!stat.public_user;
+    this.api.isAuthenticated = !!stat.authenticated_user;
+    this.api.systemBase = stat.system_base;
+
+    if ( !this.api.isAuthenticated || this.api.isPublicUser ) {
+      debug('Unauthenticated or public user...');
+      if ( !this.api.isOffline ) {
+        debug('Trying to resume session...');
+        await this.api.resumeSession();
+        debug('Checking new status...');
+        stat = await this.session.stat();
+        debug('Got session resume stat:', stat);
+
+        this.api.isAuthenticated = stat.authenticated_user;
+        this.api.isPublicUser = stat.public_user;
+
+        if ( !stat.authenticated_user ) {
+          debug('Not authenticated! Redirecting.');
+          window.location.href = `${stat.system_base}start`;
+          return;
+        }
+      } else {
+        debug('Unauthenticated offline user. Purging local data!');
+        await this.db.purge();
+        window.location.href = `${stat.system_base}start`;
+        return;
+      }
+    }
+
+    debug('Set app name and system base:', stat.app_name, stat.system_base);
+    this.session.appName = stat.app_name;
+    this.session.systemBase = stat.system_base;
+
+    debug('Initializing session...');
+    await this.session.initialize();
+
+    if ( this.session.get('user.preferences.dark_mode') && !this.darkMode ) {
+      this.toggleDark();
+    }
+
+    debug('Hiding native splash screen & setting status bar styles...');
+    await this.statusBar.styleDefault();
+    await this.splashScreen.hide();
+
+    // If we went online after being offline, sync the local data
+    if ( !this.api.isOffline && await this.api.needsSync() ) {
+      this.loader.message = 'Syncing data...';
+      try {
+        await this.api.syncOfflineData();
+      } catch (e) {
+        this.toasts.create({
+          cssClass: 'compat-toast-container',
+          message: 'An error occurred while syncing offline data. Not all data was saved.',
+          buttons: [
+            'Okay'
+          ],
+        }).then(tst => {
+          tst.present();
+        });
+      }
+    }
+
+    if ( this.isPrefetch() && !this.api.isPublicUser ) {
+      debug('Pre-fetching offline data...');
+      this.loader.message = 'Downloading data...';
+      try {
+        await this.api.prefetchOfflineData();
+      } catch (e) {
+        debug('Pre-fetch error:', e);
+        this.toasts.create({
+          cssClass: 'compat-toast-container',
+          message: 'An error occurred while pre-fetching offline data. Not all data was saved.',
+          buttons: [
+              'Okay'
+          ],
+        }).then(tst => {
+          tst.present();
+        });
+      }
+    }
+
+    this.navService.initialized$.next(true);
+
+    if ( !this.api.isPublicUser && this.session.get('user.preferences.default_page') ) {
+      debug('Navigating to default page!');
+      const id = this.session.get('user.preferences.default_page');
+      const node = this.findNode(id);
+      if ( node ) {
+        this.navigateEditorToNode(node);
+      } else if ( this.auth.authInProgress ) {
+        await this.router.navigate(['/home']);
+      }
+    } else if ( this.auth.authInProgress ) {
+      await this.router.navigate(['/home']);
+    }
+
+    if ( !initializedOnce ) {
+      debug('Creating menu subscription...');
+      this.navService.sidebarRefresh$.subscribe(([_, quiet]) => {
+        this.onMenuRefresh(quiet);
+      });
+
+      this.navService.navigationRequest$.subscribe(request => {
+        debug('Page navigation request: ', request);
+        if ( !request.pageId ) {
+          debug('Empty page ID. Will not navigate.');
+          return;
+        }
+
+        this.opener.currentPageId = request.pageId;
+        this.router.navigate(['/editor', {
+          id: request.pageId,
+          ...(request.nodeId ? { node_id: request.nodeId } : {}),
+        }]);
+      });
+
+      this.navService.initializationRequest$.subscribe((count) => {
+        if ( count === 0 ) {
+          return;
+        }
+
+        this.initializeApp().then(() => {
+          this.router.navigate(['/login']);
+        });
+      });
+    }
+
+    debug('Reloading menu items...');
+    this.reloadMenuItems().subscribe(() => {
+      debug('Reloaded menu items. Displaying interface.');
+      this.ready$.next(true);
+
+      setTimeout(() => {
+        this.loader.dismiss();
+        // this.menuTree?.treeModel?.expandAll();
+      }, 10);
+
+      if ( !this.versionInterval ) {
+        this.versionInterval = setInterval(() => {
+          debug('Checking for new application version.');
+          this.checkNewVersion();
+        }, 1000 * 60 * 5); // Check for new version every 5 mins
+      }
+    });
+
+    this.auth.authInProgress = false;
+  }
+
+  async doPrefetch() {
+    if ( this.api.isOffline ) {
+      return;
+    }
+
+    this.loader = await this.loading.create({
+      message: 'Pre-fetching data...',
+      cssClass: 'noded-loading-mask',
+      showBackdrop: true,
+    });
+
+    await new Promise(res => setTimeout(res, 2000));
+
+    await this.loader.present();
+
+    try {
+      if (await this.api.needsSync()) {
+        this.loader.message = 'Syncing data...';
+        await this.api.syncOfflineData();
+      }
+
+      this.loader.message = 'Downloading data...';
+      await this.api.prefetchOfflineData();
+    } catch (e) {
+      const msg = await this.alerts.create({
+        header: 'Uh, oh!',
+        message: 'An unexpected error occurred while trying to sync offline data, and we were unable to continue.',
+        buttons: [
+          'OK',
+        ],
+      });
+
+      await msg.present();
+    }
+
+    this.loader.dismiss();
+  }
+
+  toggleDark() {
+    // const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+    this.darkMode = !this.darkMode;
+    this.session.set('user.preferences.dark_mode', this.darkMode);
+    document.body.classList.toggle('dark', this.darkMode);
+  }
+
+  togglePrefetch() {
+    this.session.set('user.preferences.auto_prefetch', !this.isPrefetch());
+  }
+
+  findNode(id: string, nodes = this.nodes) {
+    for ( const node of nodes ) {
+      if ( node.id === id ) {
+        return node;
+      }
+
+      if ( node.children ) {
+        const foundNode = this.findNode(id, node.children);
+        if ( foundNode ) {
+          return foundNode;
+        }
+      }
+    }
+  }
+
+  isDark() {
+    return !!this.darkMode;
+  }
+
+  isPrefetch() {
+    return !!this.session.get('user.preferences.auto_prefetch');
+  }
+
+  async onTreeNodeMove({ node, to }) {
+    if ( this.api.isOffline ) {
+      debug('Cannot move node. API is offline.');
+      return;
+    }
+
+    const { parent } = to;
+    debug('Moving node:', { node, parent });
+
+    try {
+      await this.api.moveMenuNode(node.id, to.parent.id);
+    } catch (error) {
+      console.error('Error moving tree node:', error);
+      this.alerts.create({
+        header: 'Error Moving Node',
+        message: error.message,
+        buttons: [
+          {
+            text: 'Okay',
+            role: 'cancel',
+          },
+        ],
+      }).then(x => x.present());
+    }
+
+    await this.reloadMenuItems().toPromise();
+  }
 }

src/app/app.module.ts

@@ -8,8 +8,34 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
-import {HttpClientModule} from '@angular/common/http';
-import {ComponentsModule} from './components/components.module';
+import { HttpClientModule } from '@angular/common/http';
+import { ComponentsModule } from './components/components.module';
+import {AgGridModule} from 'ag-grid-angular';
+import {MonacoEditorModule} from 'ngx-monaco-editor';
+import { APP_BASE_HREF, PlatformLocation } from '@angular/common';
+import {MarkdownModule, MarkedOptions} from 'ngx-markdown';
+import {ConnectionServiceModule} from 'ng-connection-service';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
+import { AngularResizedEventModule } from 'angular-resize-event';
+import { IonicSelectableModule } from 'ionic-selectable';
+import * as hljs from 'highlight.js';
+import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
+
+/**
+ * This function is used internal to get a string instance of the `<base href="" />` value from `index.html`.
+ * This is an exported function, instead of a private function or inline lambda, to prevent this error:
+ *
+ * `Error encountered resolving symbol values statically.`
+ * `Function calls are not supported.`
+ * `Consider replacing the function or lambda with a reference to an exported function.`
+ *
+ * @param platformLocation an Angular service used to interact with a browser's URL
+ * @return a string instance of the `<base href="" />` value from `index.html`
+ */
+export function getBaseHref(platformLocation: PlatformLocation): string {
+  return platformLocation.getBaseHrefFromDOM();
+}
 
 @NgModule({
   declarations: [AppComponent],
@@ -20,11 +46,45 @@ import {ComponentsModule} from './components/components.module';
     AppRoutingModule,
     HttpClientModule,
     ComponentsModule,
+    AgGridModule.withComponents([]),
+    MonacoEditorModule.forRoot(),
+    HighlightModule,
+    MarkdownModule.forRoot({
+      markedOptions: {
+        provide: MarkedOptions,
+        useValue: {
+          highlight(code: string, lang: string, callback?: (error: any, code: string) => void): string {
+            const highlighted = hljs.highlight(lang, code, true);
+
+            if ( callback ) {
+              callback(null, highlighted.value);
+            }
+
+            return highlighted.value;
+          },
+        },
+      }
+    }),
+    ConnectionServiceModule,
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+    AngularResizedEventModule,
+    IonicSelectableModule,
   ],
   providers: [
     StatusBar,
     SplashScreen,
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    {
+      provide: APP_BASE_HREF,
+      useFactory: getBaseHref,
+      deps: [PlatformLocation]
+    },
+    {
+      provide: HIGHLIGHT_OPTIONS,
+      useValue: {
+        fullLibraryLoader: () => import('highlight.js'),
+      }
+    },
   ],
   bootstrap: [AppComponent]
 })

src/app/components/components.module.ts

@@ -1,15 +1,202 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import {HostComponent} from './editor/host/host.component';
+import {NodePickerComponent} from './editor/node-picker/node-picker.component';
+import {IonicModule} from '@ionic/angular';
+import {DatabaseComponent} from './editor/database/database.component';
+import {AgGridModule} from 'ag-grid-angular';
+import {ColumnsComponent} from './editor/database/columns/columns.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ContenteditableModule} from '@ng-stack/contenteditable';
+import {CodeComponent} from './editor/code/code.component';
+import {MonacoEditorModule} from 'ngx-monaco-editor';
+import {IonicSelectableModule} from 'ionic-selectable';
+import {FilesComponent} from './editor/files/files.component';
+import {OptionPickerComponent} from './option-picker/option-picker.component';
+import {HostOptionsComponent} from './editor/host-options/host-options.component';
+import {OptionMenuComponent} from './option-menu/option-menu.component';
+import {SelectorComponent} from './sharing/selector/selector.component';
+import {NumericEditorComponent} from './editor/database/editors/numeric/numeric-editor.component';
+import {ParagraphEditorComponent} from './editor/database/editors/paragraph/paragraph-editor.component';
+import {ParagraphModalComponent} from './editor/database/editors/paragraph/paragraph-modal.component';
+import {BooleanEditorComponent} from './editor/database/editors/boolean/boolean-editor.component';
+import {SelectEditorComponent} from './editor/database/editors/select/select-editor.component';
+import {MultiSelectEditorComponent} from './editor/database/editors/select/multiselect-editor.component';
+import {DatetimeEditorComponent} from './editor/database/editors/datetime/datetime-editor.component';
+import {DatetimeRendererComponent} from './editor/database/renderers/datetime-renderer.component';
+import {CurrencyRendererComponent} from './editor/database/renderers/currency-renderer.component';
+import {BooleanRendererComponent} from './editor/database/renderers/boolean-renderer.component';
+import {SearchComponent} from './search/Search.component';
+import {TreeRootComponent} from './tree-root/tree-root.component';
+
+import {NormComponent} from './nodes/norm/norm.component';
+import {MarkdownComponent as MarkdownEditorComponent} from './nodes/markdown/markdown.component';
+import {DirectivesModule} from '../directives/directives.module';
+import {MarkdownModule} from 'ngx-markdown';
+import {VersionModalComponent} from './version-modal/version-modal.component';
+import {EditorPageRoutingModule} from '../pages/editor/editor-routing.module';
+import {ViewerPageRoutingModule} from '../pages/viewer/viewer-routing.module';
+import {EditorPage} from '../pages/editor/editor.page';
+import {ViewerPage} from '../pages/viewer/viewer.page';
+import {LoginPage} from '../pages/login/login.page';
+import {WysiwygComponent} from './wysiwyg/wysiwyg.component';
+import {WysiwygEditorComponent} from './editor/database/editors/wysiwyg/wysiwyg-editor.component';
+import {WysiwygModalComponent} from './editor/database/editors/wysiwyg/wysiwyg-modal.component';
+import {AngularResizedEventModule} from 'angular-resize-event';
+import {DateTimeFilterComponent} from './editor/database/filters/date-time.filter';
+import {DatabasePageComponent} from './editor/database/database-page.component';
+import {PageLinkRendererComponent} from './editor/database/renderers/page-link-renderer.component';
+import {PageLinkEditorComponent} from './editor/database/editors/page-link/page-link-editor.component';
+import {LinkRendererComponent} from './editor/database/renderers/link-renderer.component';
+import {FormInputComponent} from './nodes/form-input/form-input.component';
+import {FormInputOptionsComponent} from './nodes/form-input/options/form-input-options.component';
+import {DatabaseLinkComponent} from './editor/forms/database-link.component';
+import {FileBoxComponent} from './nodes/file-box/file-box.component';
+import {FileBoxPageComponent} from './nodes/file-box/file-box-page.component';
 
 @NgModule({
-  declarations: [HostComponent],
-  imports: [
-    CommonModule
+  declarations: [
+    NodePickerComponent,
+    DatabaseComponent,
+    ColumnsComponent,
+    CodeComponent,
+    FilesComponent,
+    OptionPickerComponent,
+    HostOptionsComponent,
+    OptionMenuComponent,
+    SelectorComponent,
+    NumericEditorComponent,
+    ParagraphEditorComponent,
+    ParagraphModalComponent,
+    BooleanEditorComponent,
+    SelectEditorComponent,
+    MultiSelectEditorComponent,
+    DatetimeEditorComponent,
+    DatetimeRendererComponent,
+    CurrencyRendererComponent,
+    BooleanRendererComponent,
+    SearchComponent,
+    TreeRootComponent,
+
+    NormComponent,
+    MarkdownEditorComponent,
+    VersionModalComponent,
+    EditorPage,
+    ViewerPage,
+    LoginPage,
+    WysiwygComponent,
+    WysiwygEditorComponent,
+    WysiwygModalComponent,
+    DateTimeFilterComponent,
+    DatabasePageComponent,
+    PageLinkRendererComponent,
+    LinkRendererComponent,
+    PageLinkEditorComponent,
+    FormInputComponent,
+    FormInputOptionsComponent,
+    DatabaseLinkComponent,
+    FileBoxComponent,
+    FileBoxPageComponent,
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    AgGridModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ContenteditableModule,
+    MonacoEditorModule,
+    DirectivesModule,
+    MarkdownModule,
+    EditorPageRoutingModule,
+    ViewerPageRoutingModule,
+    AngularResizedEventModule,
+    IonicSelectableModule,
+  ],
+  entryComponents: [
+    NodePickerComponent,
+    DatabaseComponent,
+    ColumnsComponent,
+    CodeComponent,
+    FilesComponent,
+    OptionPickerComponent,
+    HostOptionsComponent,
+    OptionMenuComponent,
+    SelectorComponent,
+    NumericEditorComponent,
+    ParagraphEditorComponent,
+    ParagraphModalComponent,
+    BooleanEditorComponent,
+    SelectEditorComponent,
+    MultiSelectEditorComponent,
+    DatetimeEditorComponent,
+    DatetimeRendererComponent,
+    CurrencyRendererComponent,
+    BooleanRendererComponent,
+    SearchComponent,
+    TreeRootComponent,
+
+    NormComponent,
+    MarkdownEditorComponent,
+    VersionModalComponent,
+    EditorPage,
+    ViewerPage,
+    LoginPage,
+    WysiwygComponent,
+    WysiwygEditorComponent,
+    WysiwygModalComponent,
+    DateTimeFilterComponent,
+    DatabasePageComponent,
+    PageLinkRendererComponent,
+    LinkRendererComponent,
+    PageLinkEditorComponent,
+    FormInputComponent,
+    FormInputOptionsComponent,
+    DatabaseLinkComponent,
+    FileBoxComponent,
+    FileBoxPageComponent,
   ],
-  entryComponents: [HostComponent],
   exports: [
-    HostComponent
+    NodePickerComponent,
+    DatabaseComponent,
+    ColumnsComponent,
+    CodeComponent,
+    FilesComponent,
+    OptionPickerComponent,
+    HostOptionsComponent,
+    OptionMenuComponent,
+    SelectorComponent,
+    NumericEditorComponent,
+    ParagraphEditorComponent,
+    ParagraphModalComponent,
+    BooleanEditorComponent,
+    SelectEditorComponent,
+    MultiSelectEditorComponent,
+    DatetimeEditorComponent,
+    DatetimeRendererComponent,
+    CurrencyRendererComponent,
+    BooleanRendererComponent,
+    SearchComponent,
+    TreeRootComponent,
+
+    NormComponent,
+    MarkdownEditorComponent,
+    VersionModalComponent,
+    EditorPage,
+    ViewerPage,
+    LoginPage,
+    WysiwygComponent,
+    WysiwygEditorComponent,
+    WysiwygModalComponent,
+    DateTimeFilterComponent,
+    DatabasePageComponent,
+    PageLinkRendererComponent,
+    LinkRendererComponent,
+    PageLinkEditorComponent,
+    FormInputComponent,
+    FormInputOptionsComponent,
+    DatabaseLinkComponent,
+    FileBoxComponent,
+    FileBoxPageComponent,
   ]
 })
-export class ComponentsModule { }
+export class ComponentsModule {}

src/app/components/editor/code/code.component.html

@@ -0,0 +1,23 @@
+<div class="code-wrapper" style="width: 100%; margin-top: 10px;" *ngIf="!notAvailableOffline">
+  <ion-toolbar>
+      <ion-item>
+        <ion-label position="floating">Language</ion-label>
+        <ion-select style="min-width: 40px;" [(ngModel)]="editorOptions.language" (ionChange)="onSelectChange()" [disabled]="readonly">
+          <ion-select-option *ngFor="let lang of languageOptions" [value]="lang.toLowerCase()">{{lang}}</ion-select-option>
+        </ion-select>
+      </ion-item>
+  </ion-toolbar>
+  <div class="editor-container" #editorContainer>
+    <ngx-monaco-editor style="width: 100%; height: 100%;"
+       [options]="editorOptions"
+       [(ngModel)]="editorValue"
+       (onInit)="onMonacoEditorInit($event)"
+       (ngModelChange)="onEditorModelChange($event)"
+       #theEditor
+       class="editor"
+    ></ngx-monaco-editor>
+  </div>
+</div>
+<div class="code-wrapper not-offline" style="width: 100%; height: 600px; margin-top: 10px;" *ngIf="notAvailableOffline">
+  Sorry, this code editor is not available offline yet.
+</div>

src/app/components/editor/code/code.component.scss

@@ -0,0 +1,10 @@
+div.code-wrapper {
+  border: 2px solid #8c8c8c;
+  border-radius: 3px;
+
+  &.not-offline {
+    text-align: center;
+    padding-top: 100px;
+    color: #595959;
+  }
+}

src/app/components/editor/code/code.component.ts

@@ -0,0 +1,470 @@
+import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {v4} from 'uuid';
+import {ApiService, ResourceNotAvailableOfflineError} from '../../../service/api.service';
+import {EditorNodeContract} from '../../nodes/EditorNode.contract';
+import {EditorService} from '../../../service/editor.service';
+import {EditorComponent} from 'ngx-monaco-editor';
+import * as MonacoCollabExt from '@convergencelabs/monaco-collab-ext';
+import {FlitterSocketConnection, FlitterSocketServerClientTransaction} from '../../../flitter-socket';
+import {debug} from '../../../utility';
+import {environment} from '../../../../environments/environment';
+
+export interface RemoteUser {
+    uuid: string;
+    uid: string;
+    display: string;
+    color: string;
+    cursor?: any;
+    selection?: any;
+}
+
+export interface RemoteInsertOperation {
+    type: 'insert';
+    index: number;
+    text: string;
+    fullContents?: string;
+}
+
+export interface RemoteReplaceOperation {
+    type: 'replace';
+    index: number;
+    text: string;
+    length: number;
+    fullContents?: string;
+}
+
+export interface RemoteDeleteOperation {
+    type: 'delete';
+    index: number;
+    length: number;
+    fullContents?: string;
+}
+
+export type RemoteOperation = RemoteInsertOperation | RemoteReplaceOperation | RemoteDeleteOperation;
+
+@Component({
+    selector: 'editor-code',
+    templateUrl: './code.component.html',
+    styleUrls: ['./code.component.scss'],
+})
+export class CodeComponent extends EditorNodeContract implements OnInit, OnDestroy {
+    @Input() nodeId: string;
+    @Input() editorUUID?: string;
+    @ViewChild('theEditor') theEditor: EditorComponent;
+    @ViewChild('editorContainer') editorContainer: ElementRef;
+    public dirty = false;
+    protected dbRecord: any = {};
+    protected codeRefId!: string;
+    public notAvailableOffline = false;
+    public containerHeight = 540;
+
+    protected cursorManager?: MonacoCollabExt.RemoteCursorManager;
+    protected selectionManager?: MonacoCollabExt.RemoteSelectionManager;
+    protected contentManager?: MonacoCollabExt.EditorContentManager;
+
+    protected remoteUsers: RemoteUser[] = [];
+    protected localUser?: RemoteUser;
+    protected socket?: FlitterSocketConnection;
+    protected editorGroupID!: string;
+
+    public editorOptions = {
+        theme: this.isDark() ? 'vs-dark' : 'vs',
+        language: 'javascript',
+        uri: v4(),
+        readOnly: false,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        scrollbar: {
+            alwaysConsumeMouseWheel: false,
+        },
+    };
+
+    public editorValue = '';
+    public get readonly() {
+        return !this.node || !this.editorService.canEdit();
+    }
+
+    public languageOptions: Array<string> = [
+        'ABAP',
+        'AES',
+        'Apex',
+        'AZCLI',
+        'Bat',
+        'C',
+        'Cameligo',
+        'Clojure',
+        'CoffeeScript',
+        'Cpp',
+        'Csharp',
+        'CSP',
+        'CSS',
+        'Dockerfile',
+        'Fsharp',
+        'Go',
+        'GraphQL',
+        'Handlebars',
+        'HTML',
+        'INI',
+        'Java',
+        'JavaScript',
+        'JSON',
+        'Kotlin',
+        'LeSS',
+        'Lua',
+        'Markdown',
+        'MiPS',
+        'MSDAX',
+        'MySQL',
+        'Objective-C',
+        'Pascal',
+        'Pascaligo',
+        'Perl',
+        'pgSQL',
+        'PHP',
+        'Plaintext',
+        'Postiats',
+        'PowerQuery',
+        'PowerShell',
+        'Pug',
+        'Python',
+        'R',
+        'Razor',
+        'Redis',
+        'RedShift',
+        'RestructuredText',
+        'Ruby',
+        'Rust',
+        'SB',
+        'Scheme',
+        'SCSS',
+        'Shell',
+        'SOL',
+        'SQL',
+        'St',
+        'Swift',
+        'TCL',
+        'Twig',
+        'TypeScript',
+        'VB',
+        'XML',
+        'YAML',
+    ];
+    protected hadLoad = false;
+
+    constructor(
+        public editorService: EditorService,
+        public readonly api: ApiService,
+    ) { super(); }
+
+    public isDark() {
+        return document.body.classList.contains('dark');
+    }
+
+    public isDirty(): boolean | Promise<boolean> {
+        return this.dirty;
+    }
+
+    public needsSave(): boolean | Promise<boolean> {
+        return this.dirty;
+    }
+
+    public writeChangesToNode(): void | Promise<void> {
+        this.node.Value.Mode = 'code';
+        this.node.Value.Value = this.codeRefId;
+        this.node.value = this.codeRefId;
+    }
+
+    public needsLoad(): boolean | Promise<boolean> {
+        return this.node && !this.hadLoad;
+    }
+
+    public performLoad(): void | Promise<void> {
+        return new Promise((res, rej) => {
+            if ( !this.node.Value ) {
+                this.node.Value = {};
+            }
+
+            if ( !this.node.Value.Value && this.editorService.canEdit() ) {
+                this.api.createCodium(this.page.UUID, this.node.UUID).then(data => {
+                    this.dbRecord = data;
+                    this.node.Value.Mode = 'code';
+                    this.node.Value.Value = data.UUID;
+                    this.node.value = data.UUID;
+                    this.codeRefId = data.UUID;
+                    this.editorOptions.readOnly = this.readonly;
+                    this.onSelectChange(false);
+                    this.hadLoad = true;
+                    this.notAvailableOffline = false;
+                    res();
+                }).catch(rej);
+            } else {
+                this.api.getCodium(this.page.UUID, this.node.UUID, this.node.Value.Value, this.node.associatedTypeVersionNum).then(data => {
+                    this.dbRecord = data;
+                    this.initialValue = this.dbRecord.code;
+                    this.editorValue = this.dbRecord.code;
+                    this.editorOptions.language = this.dbRecord.Language;
+                    this.codeRefId = this.node.Value.Value;
+                    this.editorOptions.readOnly = this.readonly;
+                    this.onSelectChange(false);
+                    this.hadLoad = true;
+                    this.notAvailableOffline = false;
+                    res();
+                }).catch(e => {
+                    if ( e instanceof ResourceNotAvailableOfflineError ) {
+                        this.notAvailableOffline = true;
+                    } else {
+                        rej(e);
+                    }
+                });
+            }
+        });
+    }
+
+    public performSave(): void | Promise<void> {
+        if ( !this.editorService.canEdit() ) {
+            return;
+        }
+
+        return new Promise((res, rej) => {
+            this.dbRecord.code = this.editorValue;
+            this.dbRecord.Language = this.editorOptions.language;
+
+            this.api.saveCodium(this.page.UUID, this.node.UUID, this.node.Value.Value, this.dbRecord).then(data => {
+                this.dbRecord = data;
+                this.editorOptions.language = this.dbRecord.Language;
+                this.editorValue = this.dbRecord.code;
+                this.dirty = false;
+                res();
+            }).catch(rej);
+        });
+    }
+
+    public performDelete(): void | Promise<void> {
+        return this.api.deleteCodium(this.page.UUID, this.node.UUID, this.node.Value.Value);
+    }
+
+    ngOnInit() {
+        this.editorService = this.editorService.getEditor(this.editorUUID);
+
+        this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
+            this.editorOptions.readOnly = !this.editorService.canEdit();
+        });
+
+        const url = `${environment.websocketBase}/api/v1/socket/code/.websocket`;
+        debug(`Editor socket URL: ${url}`);
+
+        if ( !this.editorService.isVersion() ) {
+            const socket = new FlitterSocketConnection(url);
+            socket.controller(this);
+
+            socket.on_open().then(() => {
+                debug('Connected to code editor socket', socket);
+                socket.asyncRequest('subscribe', { resource_id: this.node.Value.Value }).then(([transaction, _, data]) => {
+                    debug('Subscribed to editor group:', data);
+                    if ( data.editor_group_id ) {
+                        this.editorGroupID = data.editor_group_id;
+                        this.socket = socket;
+                        this.localUser = data.local_user;
+                    }
+                });
+            });
+        }
+    }
+
+    ngOnDestroy() {
+        if ( this.socket ) {
+            this.socket.socket.close();
+        }
+    }
+
+    onMonacoEditorInit(editor) {
+        let ignoreEvent = false;
+        const updateHeight = () => {
+            const contentHeight = Math.max(540, editor.getContentHeight());
+            this.containerHeight = contentHeight;
+
+            try {
+                ignoreEvent = true;
+                editor.layout({ width: this.editorContainer.nativeElement.offsetWidth, height: contentHeight });
+            } finally {
+                ignoreEvent = false;
+            }
+        };
+
+        editor.onDidChangeCursorPosition(event => {
+            this.socket?.asyncRequest('update_cursor', {
+                position: event.position,
+                uuid: this.localUser?.uuid,
+                editor_group_id: this.editorGroupID,
+            });
+        });
+
+        editor.onDidChangeCursorSelection(event => {
+            this.socket?.asyncRequest('update_selection', {
+                startPosition: {
+                    lineNumber: event.selection.startLineNumber,
+                    column: event.selection.startColumn,
+                },
+                endPosition: {
+                    lineNumber: event.selection.endLineNumber,
+                    column: event.selection.endColumn,
+                },
+                uuid: this.localUser?.uuid,
+                editor_group_id: this.editorGroupID,
+            });
+        });
+
+        editor.onDidContentSizeChange(updateHeight);
+        updateHeight();
+
+        this.cursorManager = new MonacoCollabExt.RemoteCursorManager({
+            editor,
+            tooltips: true,
+            tooltipDuration: 2,
+        });
+
+        this.selectionManager = new MonacoCollabExt.RemoteSelectionManager({ editor });
+
+        this.contentManager = new MonacoCollabExt.EditorContentManager({
+            editor,
+            onInsert: (index, text) => {
+                if ( this.readonly ) {
+                    return;
+                }
+
+                this.socket?.asyncRequest('apply', {
+                    editor_group_id: this.editorGroupID,
+                    operations: [
+                        {
+                            type: 'insert',
+                            index,
+                            text,
+                        },
+                    ],
+                });
+            },
+            onReplace: (index, length, text) => {
+                if ( this.readonly ) {
+                    return;
+                }
+
+                this.socket?.asyncRequest('apply', {
+                    editor_group_id: this.editorGroupID,
+                    operations: [
+                        {
+                            type: 'replace',
+                            index,
+                            text,
+                            length,
+                        },
+                    ],
+                });
+            },
+            onDelete: (index, length) => {
+                if ( this.readonly ) {
+                    return;
+                }
+
+                this.socket?.asyncRequest('apply', {
+                    editor_group_id: this.editorGroupID,
+                    operations: [
+                        {
+                            type: 'delete',
+                            index,
+                            length,
+                        },
+                    ],
+                });
+            },
+        });
+    }
+
+    applyOperation(op: RemoteOperation) {
+        if ( op.type === 'insert' ) {
+            this.contentManager?.insert(op.index, op.text);
+        } else if ( op.type === 'replace' ) {
+            this.contentManager?.replace(op.index, op.length, op.text);
+        } else if ( op.type === 'delete' ) {
+            this.contentManager?.delete(op.index, op.length);
+        }
+    }
+
+    async applyRemoteOperation(transaction: FlitterSocketServerClientTransaction, connection: FlitterSocketConnection) {
+        const ops: RemoteOperation[] = transaction.incoming.operations || [];
+        for ( const op of ops ) {
+            this.applyOperation(op);
+        }
+    }
+
+    async updateCursorPosition(transaction: FlitterSocketServerClientTransaction, connection: FlitterSocketConnection) {
+        const position = transaction.incoming.position;
+        const uuid = transaction.incoming.uuid;
+
+        for ( const user of this.remoteUsers ) {
+            if ( user.uuid === uuid ) {
+                user.cursor?.setPosition(position);
+            }
+        }
+    }
+
+    async updateSelection(transaction: FlitterSocketServerClientTransaction, connection: FlitterSocketConnection) {
+        const startPosition = transaction.incoming.startPosition;
+        const endPosition = transaction.incoming.endPosition;
+        const uuid = transaction.incoming.uuid;
+
+        for ( const user of this.remoteUsers ) {
+            if ( user.uuid === uuid ) {
+                if ( startPosition && endPosition ) {
+                    user.selection?.setPositions(startPosition, endPosition);
+                    user.selection?.show();
+                } else {
+                    user.selection?.hide();
+                }
+            }
+        }
+    }
+
+    async setEditorGroupUsers(transaction: FlitterSocketServerClientTransaction, connection: FlitterSocketConnection) {
+        const remoteUsers: RemoteUser[] = Array.isArray(transaction.incoming?.users) ? transaction.incoming.users : [];
+        console.log('set editor group users', remoteUsers, transaction);
+        for ( const user of this.remoteUsers ) {
+            this.cursorManager?.removeCursor(user.uuid);
+            user.cursor?.dispose();
+            delete user.cursor;
+
+            this.selectionManager?.removeSelection(user.uuid);
+            user.selection?.dispose();
+            delete user.selection;
+        }
+
+        while ( !this.cursorManager ) {
+            await new Promise(r => setTimeout(r, 500));
+        }
+
+        this.remoteUsers = remoteUsers;
+        for ( const user of this.remoteUsers ) {
+            user.cursor = this.cursorManager?.addCursor(user.uuid, user.color, user.display);
+            user.cursor?.setOffset(0);
+            user.cursor?.show();
+
+            user.selection = this.selectionManager?.addSelection(user.uuid, user.color);
+        }
+    }
+
+    public onEditorModelChange($event) {
+        if ( this.editorValue !== this.dbRecord.code ) {
+            this.dirty = true;
+            this.editorService.triggerSave();
+        }
+    }
+
+    public onSelectChange(updateDbRecord = true) {
+        if ( updateDbRecord ) {
+            this.dbRecord.Language = this.editorOptions.language;
+            this.editorService.triggerSave();
+            this.dirty = true;
+        }
+
+        this.editorOptions = {...this.editorOptions};
+    }
+}

src/app/components/editor/database/columns/columns.component.html

@@ -0,0 +1,150 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Manage Database Columns</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismissModal(false)">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-grid>
+    <ion-row
+      *ngFor="let colSet of columnSets; let i = index"
+      class="column-def"
+    >
+      <ion-col size="5">
+        <ion-item>
+          <ion-label position="floating">Field Label</ion-label>
+          <ion-input type="text" required [(ngModel)]="columnSets[i].headerName"></ion-input>
+        </ion-item>
+      </ion-col>
+      <ion-col size="4">
+        <ion-item>
+          <ion-label position="floating">Data Type</ion-label>
+          <ion-select interface="popover" [(ngModel)]="columnSets[i].Type">
+            <ion-select-option value="text">Text</ion-select-option>
+            <ion-select-option value="number">Number</ion-select-option>
+            <ion-select-option value="paragraph">Paragraph</ion-select-option>
+            <ion-select-option value="wysiwyg">Rich-Text</ion-select-option>
+            <ion-select-option value="boolean">Boolean</ion-select-option>
+            <ion-select-option value="select">Select</ion-select-option>
+            <ion-select-option value="multiselect">Multi-Select</ion-select-option>
+            <ion-select-option value="datetime">Date-Time</ion-select-option>
+            <ion-select-option value="currency">Currency</ion-select-option>
+            <ion-select-option value="index">Incrementing Index</ion-select-option>
+            <ion-select-option value="page_link">Link to Page</ion-select-option>
+            <ion-select-option value="link">Hyperlink</ion-select-option>
+<!--            <ion-select-option value="person">Person</ion-select-option>-->
+<!--            <ion-select-option value="url">URL</ion-select-option>-->
+<!--            <ion-select-option value="email">E-Mail</ion-select-option>-->
+          </ion-select>
+        </ion-item>
+      </ion-col>
+      <ion-col size="3" align-items-center>
+        <ion-row>
+          <ion-button fill="outline" color="light" (click)="onDeleteClick(i)">
+            <ion-icon color="danger" name="trash"></ion-icon>
+          </ion-button>
+          <ion-button
+              fill="outline"
+              color="light"
+              (click)="iteratePin(i)"
+              [title]="columnSets[i].additionalData.pinned ? 'Column is pinned to the ' + columnSets[i].additionalData.pinned : 'Column is not pinned'"
+          >
+            <i
+              class="fa fa-caret-square-left"
+              style="font-size: 1.7em; color: #cccccc" *ngIf="columnSets[i].additionalData.pinned === 'left'"
+            ></i>
+            <i
+              class="fa fa-caret-square-right"
+              style="font-size: 1.7em; color: #cccccc" *ngIf="columnSets[i].additionalData.pinned === 'right'"
+            ></i>
+            <i
+              class="fa fa-square"
+              style="font-size: 1.7em; color: #cccccc" *ngIf="!columnSets[i].additionalData.pinned"
+            ></i>
+          </ion-button>
+        </ion-row>
+        <ion-row>
+          <ion-button fill="outline" color="light" size="small" (click)="onUpArrow(i)">
+            <ion-icon color="dark" name="arrow-up"></ion-icon>
+          </ion-button>
+          <ion-button fill="outline" color="light" size="small" (click)="onDownArrow(i)">
+            <ion-icon color="dark" name="arrow-down"></ion-icon>
+          </ion-button>
+        </ion-row>
+      </ion-col>
+      <ion-col size="5" *ngIf="columnSets[i].Type === 'boolean'">
+        <ion-item>
+          <ion-label position="floating">Label Type</ion-label>
+          <ion-select interface="popover" [(ngModel)]="columnSets[i].additionalData.labelType">
+            <ion-select-option value="true_false">True/False</ion-select-option>
+            <ion-select-option value="yes_no">Yes/No</ion-select-option>
+            <ion-select-option value="1_0">1/0</ion-select-option>
+            <ion-select-option value="checkbox">Checkbox</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-col>
+      <ion-col size="12" *ngIf="columnSets[i].Type === 'select' || columnSets[i].Type === 'multiselect'">
+        <ion-button (click)="onAddOption(i)" fill="outline">Add Option</ion-button>
+        <ng-container *ngIf="columnSets[i].additionalData.options">
+          <ion-row *ngFor="let option of columnSets[i].additionalData.options; let n = index">
+            <ion-col size="10">
+              <ion-item>
+                <ion-label position="floating">Value</ion-label>
+                <ion-input [(ngModel)]="columnSets[i].additionalData.options[n].value"></ion-input>
+              </ion-item>
+            </ion-col>
+            <ion-col size="2">
+              <ion-button fill="outline" color="light" size="small" (click)="onDeleteOptionClick(i, n)">
+                <ion-icon color="danger" name="trash"></ion-icon>
+              </ion-button>
+            </ion-col>
+          </ion-row>
+        </ng-container>
+      </ion-col>
+      <ion-col size="12" *ngIf="columnSets[i].Type === 'datetime'">
+        <ion-list>
+          <ion-radio-group value="YYYY-MM-DD h:mm a" [(ngModel)]="columnSets[i].additionalData.format">
+            <ion-list-header>Format</ion-list-header>
+            <ion-item>
+              <ion-label>Date Only</ion-label>
+              <ion-radio slot="start" value="YYYY-MM-DD"></ion-radio>
+            </ion-item>
+            <ion-item>
+              <ion-label>Time Only</ion-label>
+              <ion-radio slot="start" value="h:mm a"></ion-radio>
+            </ion-item>
+            <ion-item>
+              <ion-label>Both</ion-label>
+              <ion-radio slot="start" value="YYYY-MM-DD h:mm a"></ion-radio>
+            </ion-item>
+          </ion-radio-group>
+        </ion-list>
+      </ion-col>
+      <ion-col size="12" *ngIf="columnSets[i].Type === 'currency'">
+        <ion-item>
+          <ion-label position="floating">Currency</ion-label>
+          <ion-select [(ngModel)]="columnSets[i].additionalData.currency">
+            <ion-select-option value="USD">US Dollar</ion-select-option>
+            <ion-select-option value="EUR">Euro</ion-select-option>
+            <ion-select-option value="MXN">Mexican Peso</ion-select-option>
+            <ion-select-option value="CNY">Chinese Yuan</ion-select-option>
+            <ion-select-option value="XAG">Silver</ion-select-option>
+            <ion-select-option value="XAU">Gold</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>
+
+<ion-footer>
+  <ion-buttons style="padding: 10px;">
+    <ion-button (click)="onAddColumnClick()" fill="outline">Add Column</ion-button>
+    <ion-button (click)="dismissModal(true)" color="success" fill="outline">Save</ion-button>
+  </ion-buttons>
+</ion-footer>

src/app/components/editor/database/columns/columns.component.scss

@@ -0,0 +1,6 @@
+.column-def {
+  border: 2px solid #ccc;
+  margin: 5px;
+  padding: 5px;
+  border-radius: 7px;
+}

src/app/components/editor/database/columns/columns.component.ts

@@ -0,0 +1,96 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {AlertController, ModalController} from '@ionic/angular';
+import {uuid_v4} from '../../../../utility';
+
+@Component({
+  selector: 'editor-database-columns',
+  templateUrl: './columns.component.html',
+  styleUrls: ['./columns.component.scss'],
+})
+export class ColumnsComponent implements OnInit {
+  @Input() columnSets: Array<{headerName: string, field: string, Type: string, additionalData: any}> = [];
+
+  constructor(
+      protected modals: ModalController,
+      protected alerts: AlertController,
+  ) { }
+
+  ngOnInit() {}
+
+  onAddColumnClick() {
+    this.columnSets.push({headerName: '', field: uuid_v4(), Type: '', additionalData: {}});
+  }
+
+  onAddOption(i) {
+    const set = this.columnSets[i];
+    if ( !Array.isArray(set.additionalData.options) ) {
+      set.additionalData.options = [];
+    }
+
+    set.additionalData.options.push({value: ''});
+  }
+
+  onDeleteOptionClick(i, n) {
+    const set = this.columnSets[i];
+    set.additionalData.options = set.additionalData.options.filter((x, index) => index !== n);
+  }
+
+  dismissModal(doSave = true) {
+    if ( doSave ) {
+      this.columnSets = this.columnSets.map(x => {
+        if ( !x.field ) {
+          x.field = uuid_v4();
+        }
+        return x;
+      });
+
+      this.modals.dismiss(this.columnSets);
+    } else {
+      this.modals.dismiss();
+    }
+  }
+
+  onDeleteClick(i) {
+    this.alerts.create({
+      header: 'Delete column?',
+      message: 'Are you sure you want to delete this column? Its data will be lost.',
+      buttons: [
+        { text: 'Keep It', role: 'cancel' },
+        {
+          text: 'Delete It',
+          handler: () => {
+            this.columnSets = this.columnSets.filter((x, index) => {
+              return index !== i;
+            });
+          },
+        }
+      ],
+    }).then(alert => alert.present());
+  }
+
+  onUpArrow(i) {
+    if ( this.columnSets[i - 1] ) {
+      const temp = this.columnSets[i];
+      this.columnSets[i] = this.columnSets[i - 1];
+      this.columnSets[i - 1] = temp;
+    }
+  }
+
+  onDownArrow(i) {
+    if ( this.columnSets[i + 1] ) {
+      const temp = this.columnSets[i];
+      this.columnSets[i] = this.columnSets[i + 1];
+      this.columnSets[i + 1] = temp;
+    }
+  }
+
+  iteratePin(i) {
+    if ( !this.columnSets[i].additionalData.pinned ) {
+      this.columnSets[i].additionalData.pinned = 'left';
+    } else if ( this.columnSets[i].additionalData.pinned === 'left' ) {
+      this.columnSets[i].additionalData.pinned = 'right';
+    } else {
+      delete this.columnSets[i].additionalData.pinned;
+    }
+  }
+}

src/app/components/editor/database/database-page.component.ts

@@ -0,0 +1,41 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {EditorService} from '../../../service/editor.service';
+
+@Component({
+    selector: 'noded-database-page',
+    template: `
+        <div class="container" *ngIf="ready">
+            <editor-database [nodeId]="nodeId" [editorUUID]="this.editorService.instanceUUID" [fullPage]="true"></editor-database>
+        </div>
+    `,
+    styles: [
+        `
+            .container {
+                height: 100%;
+            }
+
+            editor-database {
+                height: 100%;
+                display: flex;
+            }
+        `,
+    ],
+})
+export class DatabasePageComponent implements OnInit {
+    @Input() nodeId: string;
+    @Input() pageId: string;
+
+    public ready = false;
+
+    constructor(
+        public editorService: EditorService,
+    ) {
+        this.editorService = editorService.getEditor();
+    }
+
+    ngOnInit() {
+        this.editorService.startEditing(this.pageId).then(() => {
+            this.ready = true;
+        });
+    }
+}

src/app/components/editor/database/database.component.html

@@ -0,0 +1,61 @@
+<div [ngClass]="fullPage ? 'database-wrapper full-page' : 'database-wrapper'" *ngIf="!notAvailableOffline" (resized)="onResized()">
+  <ion-toolbar>
+    <div style="display: flex; flex-direction: row">
+      <ion-input
+              [readonly]="readonly"
+              [(ngModel)]="dbName"
+              (ionChange)="onCellValueChanged()"
+              style="flex: 1; font-size: 15pt;"
+      ></ion-input>
+      <button
+        class="clear-btn"
+        style="padding: 0 20px;"
+        *ngIf="fullPage && (editorService.isSaving || editorService.willSave)"
+        title="Saving..."
+      >
+        <i class="fa fa-spin fa-circle-notch"></i>
+      </button>
+      <button
+        class="clear-btn"
+        style="padding: 0 20px;"
+        *ngIf="fullPage && !(editorService.isSaving || editorService.willSave)"
+        title="Changes saved."
+        (click)="editorService.triggerSave()"
+      >
+        <i class="fa fa-check-circle"></i>
+      </button>
+      <button style="padding: 0 20px;" *ngIf="fullPage" (click)="dismiss()" class="clear-btn"><i class="fa fa-times"></i></button>
+    </div>
+    <ion-buttons *ngIf="!readonly" style="flex-wrap: wrap;">
+      <ion-button (click)="onManageColumns()"><ion-icon name="build" color="primary"></ion-icon>&nbsp;Manage Columns</ion-button>
+      <ion-button (click)="onInsertRow()"><ion-icon name="add-circle" color="success"></ion-icon>&nbsp;Insert Row</ion-button>
+      <ion-button (click)="onRemoveRow()" [disabled]="lastClickRow < 0"><ion-icon name="remove-circle" color="danger"></ion-icon>&nbsp;Delete Row</ion-button>
+      <ion-button (click)="openDatabase()" *ngIf="!fullPage"><i class="fa fa-external-link-alt" style="padding-right: 10px;"></i> Open</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+  <div class="grid-wrapper">
+    <ag-grid-angular
+      [style]="fullPage ? 'width: 100%; height: 100%;' : 'width: 100%; height: 500px;'"
+      [ngClass]="isDark() ? 'ag-theme-balham-dark' : 'ag-theme-balham'"
+      [rowData]="rowData"
+      [getRowNodeId]="getRowNodeId"
+      [columnDefs]="columnDefs"
+      [singleClickEdit]="true"
+      [enterMovesDownAfterEdit]="true"
+      [rowDragManaged]="true"
+      [suppressMoveWhenRowDragging]="true"
+      suppressMovableColumns="true"
+      (rowClicked)="onRowClicked($event)"
+      (cellValueChanged)="onCellValueChanged()"
+      (gridReady)="onGridReady($event)"
+      (columnResized)="onColumnResize($event)"
+      (rowDragMove)="onRowDragEnd($event)"
+      [frameworkComponents]="frameworkComponents"
+      #agGridElement
+    ></ag-grid-angular>
+  </div>
+</div>
+
+<div class="database-wrapper not-available" *ngIf="notAvailableOffline">
+  Sorry, this database is not available offline yet.
+</div>

src/app/components/editor/database/database.component.scss

@@ -0,0 +1,21 @@
+div.database-wrapper {
+  border: 2px solid #8c8c8c;
+  border-radius: 3px;
+
+  &.not-available {
+    height: 600px;
+    text-align: center;
+    padding-top: 100px;
+    color: #494949;
+  }
+}
+
+.full-page {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .grid-wrapper {
+    flex: 1;
+  }
+}

src/app/components/editor/database/database.component.ts

@@ -0,0 +1,539 @@
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {ApiService, ResourceNotAvailableOfflineError} from '../../../service/api.service';
+import {AlertController, LoadingController, ModalController} from '@ionic/angular';
+import {ColumnsComponent} from './columns/columns.component';
+import {AgGridAngular} from 'ag-grid-angular';
+import {NumericEditorComponent} from './editors/numeric/numeric-editor.component';
+import {ParagraphEditorComponent} from './editors/paragraph/paragraph-editor.component';
+import {BooleanEditorComponent} from './editors/boolean/boolean-editor.component';
+import {SelectEditorComponent} from './editors/select/select-editor.component';
+import {MultiSelectEditorComponent} from './editors/select/multiselect-editor.component';
+import {DatetimeEditorComponent} from './editors/datetime/datetime-editor.component';
+import {DatetimeRendererComponent} from './renderers/datetime-renderer.component';
+import {CurrencyRendererComponent} from './renderers/currency-renderer.component';
+import {BooleanRendererComponent} from './renderers/boolean-renderer.component';
+import {EditorNodeContract} from '../../nodes/EditorNode.contract';
+import {EditorService} from '../../../service/editor.service';
+import {WysiwygEditorComponent} from './editors/wysiwyg/wysiwyg-editor.component';
+import {debounce, debug, uuid_v4} from '../../../utility';
+import {DateTimeFilterComponent} from './filters/date-time.filter';
+import {DatabasePageComponent} from './database-page.component';
+import {PageLinkRendererComponent} from './renderers/page-link-renderer.component';
+import {LinkRendererComponent} from './renderers/link-renderer.component';
+import {PageLinkEditorComponent} from './editors/page-link/page-link-editor.component';
+
+@Component({
+  selector: 'editor-database',
+  templateUrl: './database.component.html',
+  styleUrls: ['./database.component.scss'],
+})
+export class DatabaseComponent extends EditorNodeContract implements OnInit {
+  @Input() nodeId: string;
+  @Input() editorUUID?: string;
+  @Input() fullPage = false;
+  @ViewChild('agGridElement') agGridElement: AgGridAngular;
+
+  frameworkComponents = {
+    agDateInput: DateTimeFilterComponent
+  };
+
+  public dbRecord: any;
+  public pendingSetup = true;
+  public dirty = false;
+  public lastClickRow = -1;
+  public dbName = '';
+  public notAvailableOffline = false;
+  public pages = [];
+  protected dbId!: string;
+  protected isInitialLoad = false;
+  protected triggerSaveDebounce = debounce(() => {
+    if ( this.agGridElement.api.getCellEditorInstances().length < 1 ) {
+      this.editorService.triggerSave();
+    } else {
+      this.triggerSaveDebounce();
+    }
+  }, 1000);
+
+  protected gridReady = false;
+  protected deferredUIActivation = false;
+
+  title = 'app';
+  columnDefs = [];
+  rowData = [];
+
+  public isDark() {
+    return document.body.classList.contains('dark');
+  }
+
+  public get readonly() {
+    return !this.node || !this.editorService.canEdit();
+  }
+
+  constructor(
+      protected api: ApiService,
+      protected modals: ModalController,
+      protected alerts: AlertController,
+      protected loader: LoadingController,
+      public editorService: EditorService,
+  ) { super(); }
+
+  public isDirty(): boolean | Promise<boolean> {
+    return this.dirty;
+  }
+
+  public needsSave(): boolean | Promise<boolean> {
+    return this.dirty;
+  }
+
+  public needsLoad(): boolean | Promise<boolean> {
+    return this.node && this.pendingSetup;
+  }
+
+  public writeChangesToNode(): void | Promise<void> {
+    this.node.Value.Mode = 'database';
+  }
+
+  async ngOnInit() {
+    this.pages = this.flattenItems(await this.api.getMenuItems(true));
+    this.editorService = this.editorService.getEditor(this.editorUUID);
+    this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
+
+    });
+  }
+
+  protected flattenItems(items: any[], level = 0) {
+    let newItems = [];
+
+    for ( const item of items ) {
+      item.level = level;
+      newItems.push(item);
+
+      if ( Array.isArray(item.children) ) {
+        newItems = [...newItems, ...this.flattenItems(item.children, level + 1)];
+      }
+    }
+
+    return newItems;
+  }
+
+  onGridReady($event) {
+    this.gridReady = true;
+    if ( this.deferredUIActivation && !this.pendingSetup ) {
+      this.performUIActivation();
+    }
+  }
+
+  onColumnResize($event) {
+    if ( $event.source === 'uiColumnDragged' && $event.finished ) {
+      debug('Column resized: ', $event);
+      const state = $event.columnApi.getColumnState().find(x => x.colId === $event.column.colId );
+      if ( state ) {
+        const colDef = this.columnDefs.find(x => x.field === $event.column.colId);
+        if ( colDef ) {
+          colDef.width = state.width;
+          this.dirty = true;
+          this.triggerSaveDebounce();
+        }
+      }
+    }
+  }
+
+  onRowDragEnd($event) {
+    if ( !this.isInitialLoad && this.editorService.canEdit() ) {
+      this.dirty = true;
+      this.triggerSaveDebounce();
+    }
+  }
+
+  onCellValueChanged() {
+    if ( !this.isInitialLoad ) {
+      this.dirty = true;
+      this.triggerSaveDebounce();
+    }
+  }
+
+  async onManageColumns() {
+    if ( this.readonly ) {
+      return;
+    }
+
+    const modal = await this.modals.create({
+      component: ColumnsComponent,
+      componentProps: {columnSets: this.columnDefs.slice(1)},
+      cssClass: 'modal-med',
+    });
+
+    modal.onDidDismiss().then(result => {
+      if ( result?.data ) {
+        this.setColumns(result.data);
+      }
+    });
+
+    const modalState = {
+      modal : true,
+      desc : 'Manage Columns'
+    };
+
+    history.pushState(modalState, null);
+
+    await modal.present();
+  }
+
+  onInsertRow() {
+    if ( this.readonly ) {
+      return;
+    }
+
+    this.rowData.push({});
+    this.agGridElement.api.setRowData(this.rowData);
+    this.dirty = true;
+    this.triggerSaveDebounce();
+  }
+
+  async onRemoveRow() {
+    if ( this.readonly ) {
+      return;
+    }
+
+    const alert = await this.alerts.create({
+      header: 'Are you sure?',
+      message: `You are about to delete row ${this.lastClickRow + 1}. This cannot be undone.`,
+      buttons: [
+        {
+          text: 'Keep It',
+          role: 'cancel',
+        },
+        {
+          text: 'Delete It',
+          handler: () => {
+            this.rowData = this.rowData.filter((x, i) => {
+              return i !== this.lastClickRow;
+            });
+            this.agGridElement.api.setRowData(this.rowData);
+            this.lastClickRow = -1;
+            this.dirty = true;
+            this.triggerSaveDebounce();
+          },
+        }
+      ],
+    });
+
+    await alert.present();
+  }
+
+
+  onRowClicked($event) {
+    this.lastClickRow = $event.rowIndex;
+  }
+
+  setColumns(data, triggerSave = true) {
+    this.columnDefs = [{
+      width: 20,
+      // rowDrag: !this.readonly,
+      // rowDragText: (params, dragItemCount) => `${dragItemCount} ${dragItemCount === 1 ? 'row' : 'rows'}`,
+    }, ...data.map(x => {
+      x.editable = !this.readonly;
+      x.minWidth = 150;
+      x.resizable = true;
+      x._parentEditorUUID = this.editorUUID;
+
+      if ( x.additionalData?.width ) {
+        x.width = x.additionalData.width;
+      }
+
+      if ( x.additionalData?.pinned ) {
+        x.pinned = x.additionalData.pinned;
+      }
+
+      // Set editors and renderers for different types
+      if ( x.Type === 'text' ) {
+        x.editor = 'agTextCellEditor';
+        x.filter = 'agTextColumnFilter';
+      } else if ( x.Type === 'number' ) {
+        x.cellEditorFramework = NumericEditorComponent;
+        x.filter = 'agNumberColumnFilter';
+      } else if ( x.Type === 'paragraph' ) {
+        x.cellEditorFramework = ParagraphEditorComponent;
+        x.filter = 'agTextColumnFilter';
+      } else if ( x.Type === 'boolean' ) {
+        x.cellRendererFramework = BooleanRendererComponent;
+        x.cellEditorFramework = BooleanEditorComponent;
+        x.suppressSizeToFit = true;
+      } else if ( x.Type === 'select' ) {
+        x.cellEditorFramework = SelectEditorComponent;
+        x.filter = 'agTextColumnFilter';
+      } else if ( x.Type === 'multiselect' ) {
+        x.cellEditorFramework = MultiSelectEditorComponent;
+        x.filter = 'agTextColumnFilter';
+      } else if ( x.Type === 'datetime' ) {
+        x.cellEditorFramework = DatetimeEditorComponent;
+        x.cellRendererFramework = DatetimeRendererComponent;
+        x.filter = 'agDateColumnFilter';
+        x.filterParams = {
+          buttons: ['apply', 'clear'],
+          displayFormat: x.additionalData.format,
+          comparator: (filterDate: Date, cellValue) => {
+            if ( !cellValue ) {
+              return 0;
+            }
+
+            const cellDate = new Date(cellValue);
+
+            if ( x.additionalData.format === 'YYYY-MM-DD' ) {
+              cellDate.setHours(0);
+              cellDate.setMinutes(0);
+              cellDate.setSeconds(0);
+              cellDate.setMilliseconds(0);
+            } else if ( x.additionalData.format === 'h:mm a' ) {
+              cellDate.setFullYear(filterDate.getFullYear());
+              cellDate.setMonth(filterDate.getMonth());
+              cellDate.setDate(filterDate.getDate());
+            }
+
+            // Now that both parameters are Date objects, we can compare
+            if (cellDate < filterDate) {
+              return -1;
+            } else if (cellDate > filterDate) {
+              return 1;
+            } else {
+              return 0;
+            }
+          },
+        };
+      } else if ( x.Type === 'currency' ) {
+        x.cellEditorFramework = NumericEditorComponent;
+        x.cellRendererFramework = CurrencyRendererComponent;
+        x.filter = 'agNumberColumnFilter';
+      } else if ( x.Type === 'index' ) {
+        x.editable = false;
+        x.suppressSizeToFit = true;
+        x.filter = 'agNumberColumnFilter';
+        if ( !x.width ) {
+          x.width = 80;
+        }
+        x.minWidth = 80;
+      } else if ( x.Type === 'wysiwyg' ) {
+        x.cellEditorFramework = WysiwygEditorComponent;
+        x.filter = 'agTextColumnFilter';
+      } else if ( x.Type === 'page_link' ) {
+        x.cellRendererFramework = PageLinkRendererComponent;
+        x.cellEditorFramework = PageLinkEditorComponent;
+        x.filter = 'agTextColumnFilter';
+
+        if ( !x.cellEditorParams ) {
+          x.cellEditorParams = {} as any;
+        }
+
+        if ( !x.cellRendererParams ) {
+          x.cellRendererParams = {} as any;
+        }
+
+        x.cellEditorParams._pagesData = this.pages;
+        x.cellRendererParams._pagesData = this.pages;
+      } else if ( x.Type === 'link' ) {
+        x.cellRendererFramework = LinkRendererComponent;
+        x.editor = 'agTextCellEditor';
+        x.filter = 'agTextColumnFilter';
+      }
+
+      return x;
+    })];
+
+    this.agGridElement.api.setColumnDefs([]);
+    this.agGridElement.api.setColumnDefs(this.columnDefs);
+    this.agGridElement.api.sizeColumnsToFit();
+    if ( triggerSave ) {
+      this.dirty = true;
+      this.triggerSaveDebounce();
+    }
+  }
+
+  public onResized() {
+    this.agGridElement.api.sizeColumnsToFit();
+  }
+
+  public async performLoad(): Promise<void> {
+    this.isInitialLoad = true;
+
+    if ( !this.node.Value ) {
+      this.node.Value = {};
+    }
+
+    // Load the database record itself
+    if ( !this.node.Value.Value && this.editorService.canEdit() ) {
+      this.dbRecord = await this.api.createDatabase(this.page.UUID, this.node.UUID);
+      this.dbName = this.dbRecord.Name;
+      this.node.Value.Mode = 'database';
+      this.node.Value.Value = this.dbRecord.UUID;
+      this.node.value = this.dbRecord.UUID;
+    } else {
+      try {
+        this.dbRecord = await this.api.getDatabase(
+            this.page.UUID, this.node.UUID, this.node.Value.Value, this.node.associatedTypeVersionNum);
+        this.dbName = this.dbRecord.Name;
+        this.notAvailableOffline = false;
+      } catch (e: unknown) {
+        if ( e instanceof ResourceNotAvailableOfflineError ) {
+          this.notAvailableOffline = true;
+        } else {
+          throw e;
+        }
+      }
+    }
+
+    // Load the columns
+    const columns = await this.api.getDatabaseColumns(
+        this.page.UUID, this.node.UUID, this.node.Value.Value, this.node.associatedTypeVersionNum);
+    this.setColumns(columns, false);
+
+    const rows = await this.api.getDatabaseEntries(this.page.UUID, this.node.UUID, this.node.Value.Value);
+    this.rowData = rows.map(x => x.RowData);
+    this.agGridElement.api.setRowData(this.rowData);
+
+    this.pendingSetup = false;
+    this.dirty = false;
+    this.isInitialLoad = false;
+
+    if ( this.deferredUIActivation && this.gridReady ) {
+      await this.performUIActivation();
+    }
+  }
+
+  public async performDelete(): Promise<void> {
+    await this.api.deleteDatabase(this.page.UUID, this.node.UUID, this.node.Value.Value);
+  }
+
+  public getSaveColumns() {
+    return this.columnDefs.slice(1).map(x => {
+      if ( !x.additionalData ) {
+        x.additionalData = {};
+      }
+
+      if ( x.width ) {
+        x.additionalData.width = x.width;
+      }
+
+      return x;
+    });
+  }
+
+  public getRowNodeId(data: any) {
+    if ( !data.UUID ) {
+      data.UUID = uuid_v4();
+    }
+
+    return data.UUID;
+  }
+
+  protected getAllRows() {
+    const rowData: any[] = [];
+
+    this.agGridElement.api.forEachNode(node => {
+      if ( !node.data.UUID ) {
+        node.data.UUID = uuid_v4();
+      }
+
+      rowData.push(node.data);
+    });
+
+    return rowData;
+  }
+
+  public async performSave(): Promise<void> {
+    // Save the columns first
+    await this.api.saveDatabaseColumns(this.page.UUID, this.node.UUID, this.node.Value.Value, this.getSaveColumns());
+
+    // Save the data
+    const allRows = this.getAllRows();
+    const rows = await this.api.saveDatabaseEntries(this.page.UUID, this.node.UUID, this.node.Value.Value, allRows);
+    // this.rowData = rows.map(x => x.RowData);
+
+    // Dynamically update the row data to avoid breaking open editors
+    const returnedUUIDs = rows.map(x => x.UUID);
+    const existingUUIDs = [];
+
+    const rowDataTransaction = {
+      add: [],
+      remove: [],
+      update: [],
+    };
+
+    this.agGridElement.api.forEachNode((rowNode, index) => {
+      const data = rowNode.data;
+      if ( !returnedUUIDs.includes(data.UUID) ) {
+        rowDataTransaction.remove.push(rowNode.id);
+      } else {
+        existingUUIDs.push(data.UUID);
+        const updatedRow = rows.find(x => x.UUID === data.UUID);
+
+        if ( updatedRow ) {
+          for ( const prop in updatedRow ) {
+            if ( !updatedRow.hasOwnProperty(prop) ) {
+              continue;
+            }
+
+            data[prop] = updatedRow[prop];
+          }
+
+          rowDataTransaction.update.push(data);
+        }
+      }
+    });
+
+    // for ( const row of rows ) {
+    //   if ( !gridUUIDs.includes(row.UUID) ) {
+    //     rowDataTransaction.add.push(row);
+    //   }
+    // }
+
+    // @ts-ignore
+    this.agGridElement.api.applyTransaction(rowDataTransaction);
+
+    // this.agGridElement.api.setRowData(this.rowData);
+
+    // Save the name
+    await this.api.saveDatabaseName(this.page.UUID, this.node.UUID, this.node.Value.Value, this.dbName);
+
+    this.dirty = false;
+  }
+
+  async openDatabase() {
+    const modal = await this.modals.create({
+      component: DatabasePageComponent,
+      componentProps: {
+        nodeId: this.nodeId,
+        pageId: this.editorService.currentPageId,
+      },
+      cssClass: 'modal-big',
+    });
+
+    modal.onDidDismiss().then(() => {
+      this.editorService.reload();
+    });
+
+    const modalState = {
+      modal : true,
+      desc : 'Open Database'
+    };
+
+    history.pushState(modalState, null);
+
+    await modal.present();
+  }
+
+  performUIActivation() {
+    if ( this.deferredUIActivation ) {
+      this.deferredUIActivation = false;
+    }
+
+    if ( this.gridReady && !this.pendingSetup ) {
+      return this.openDatabase();
+    } else {
+      this.deferredUIActivation = true;
+    }
+  }
+
+  dismiss() {
+    this.modals.dismiss();
+  }
+}

src/app/components/editor/database/editors/boolean/boolean-editor.component.ts

@@ -0,0 +1,68 @@
+import {ICellEditorAngularComp} from 'ag-grid-angular';
+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {ICellEditorParams} from 'ag-grid-community';
+import {debounce} from '../../../../../utility';
+
+@Component({
+    selector: 'cell-editor-paragraph',
+    template: `<input #input [value]="display" readonly (click)="onClick()">`,
+    styles: [
+        `input {
+            width: 100%;
+            border: 1px solid grey;
+        }`
+    ],
+})
+export class BooleanEditorComponent implements ICellEditorAngularComp, AfterViewInit {
+    private params: ICellEditorParams;
+    public value: boolean;
+
+    public get display() {
+        if ( typeof this.value === 'undefined' ) {
+            return this.emptyValue;
+        } else if ( this.value ) {
+            return this.trueValue;
+        } else {
+            return this.falseValue;
+        }
+    }
+
+    protected trueValue = 'True';
+    protected falseValue = 'False';
+    protected emptyValue = '';
+    protected autoDismissDebounce = debounce(() => {
+        this.params.stopEditing();
+    }, 2000);
+
+    @ViewChild('input') input: ElementRef;
+
+    agInit(params: ICellEditorParams): void {
+        this.params = params;
+        this.value = this.params.value;
+
+        // @ts-ignore
+        const values = params.colDef.additionalData.labelType.split('_');
+        this.trueValue = values[0].charAt(0).toUpperCase() + values[0].slice(1);
+        this.falseValue = values[1].charAt(0).toUpperCase() + values[1].slice(1);
+    }
+
+    getValue(): any {
+        return this.value;
+    }
+
+    ngAfterViewInit(): void {
+        this.onClick();
+    }
+
+    onClick() {
+        if ( this.value === true ) {
+            this.value = false;
+        } else if ( this.value === false ) {
+            this.value = undefined;
+        } else {
+            this.value = true;
+        }
+
+        this.autoDismissDebounce();
+    }
+}

src/app/components/editor/database/editors/datetime/datetime-editor.component.ts

@@ -0,0 +1,39 @@
+import {ICellEditorAngularComp} from 'ag-grid-angular';
+import {AfterViewInit, Component, ViewChild} from '@angular/core';
+import {ICellEditorParams} from 'ag-grid-community';
+import {IonDatetime} from '@ionic/angular';
+
+@Component({
+    selector: 'cell-editor-select',
+    template: `<ion-datetime
+                #picker [displayFormat]="format" [(ngModel)]="value" style="padding: 0 0 0 5px;" (ionChange)="finishEdit($event)"
+               ></ion-datetime>`,
+})
+export class DatetimeEditorComponent implements ICellEditorAngularComp, AfterViewInit {
+    public params: ICellEditorParams;
+    public value: string;
+    public format = 'YYYY-MM-DD h:mm a';
+    @ViewChild('picker') picker: IonDatetime;
+
+    agInit(params: ICellEditorParams): void {
+        this.params = params;
+        this.value = this.params.value;
+        // @ts-ignore
+        if ( this.params.colDef.additionalData.format ) {
+            // @ts-ignore
+            this.format = this.params.colDef.additionalData.format;
+        }
+    }
+
+    getValue(): any {
+        return this.value;
+    }
+
+    ngAfterViewInit(): void {
+        this.picker.open();
+    }
+
+    finishEdit($event) {
+        this.params.stopEditing();
+    }
+}

src/app/components/editor/database/editors/numeric/numeric-editor.component.ts

@@ -0,0 +1,75 @@
+import {ICellEditorAngularComp} from 'ag-grid-angular';
+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {ICellEditorParams} from 'ag-grid-community';
+
+@Component({
+    selector: 'cell-editor-numeric',
+    template: `<input #input (keydown)="onKeyDown($event)" [(ngModel)]="value">`,
+    styles: [
+        `input {
+            width: 100%;
+            border: 1px solid grey;
+        }`
+    ],
+})
+export class NumericEditorComponent implements ICellEditorAngularComp, AfterViewInit {
+    private params: ICellEditorParams;
+    public value: number;
+    private cancelBeforeStart = false;
+
+    @ViewChild('input') input: ElementRef;
+
+    agInit(params: ICellEditorParams): void {
+        this.params = params;
+        this.value = this.params.value;
+
+        // Only cancel before start if the pressed key is numeric
+        this.cancelBeforeStart = params.charPress && ('1234567890'.indexOf(params.charPress) < 0);
+    }
+
+    getValue(): any {
+        return this.value;
+    }
+
+    isCancelBeforeStart(): boolean {
+        return this.cancelBeforeStart;
+    }
+
+    onKeyDown($event: KeyboardEvent) {
+        if ( !this.isKeyPressedAllowed($event) ) {
+            if ($event.preventDefault) {
+                $event.preventDefault();
+            }
+        }
+    }
+
+    ngAfterViewInit(): void {
+        setTimeout(() => {
+            this.input.nativeElement.focus();
+        });
+    }
+
+    private getCharCodeFromEvent(event): any {
+        return (typeof event.which === 'undefined') ? event.keyCode : event.which;
+    }
+
+    private isCharNumeric(charStr): boolean {
+        return !!/\d/.test(charStr);
+    }
+
+    private isKeyPressedAllowed(event): boolean {
+        const charCode = this.getCharCodeFromEvent(event);
+        const charStr = event.key ? event.key : String.fromCharCode(charCode);
+        if (this.isCharNumeric(charStr)) {
+            return true;
+        } else if ( charStr === '.' && this.value % 1 === 0 ) {
+            return true;
+        } else if ( ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Enter'].includes(event.code) ) {
+            return true;
+        } else if ( charStr === 'a' && event.ctrlKey ) {
+            return true;
+        }
+
+        return false;
+    }
+}

src/app/components/editor/database/editors/page-link/page-link-editor.component.html

@@ -0,0 +1,14 @@
+<ionic-selectable
+    #selectable
+    [items]="pages"
+    itemTextField="name"
+    itemValueField="id"
+    [canSearch]="true"
+    [title]="'Select a page'"
+    [(ngModel)]="value"
+    (onClose)="finishEdit()"
+>
+    <ng-template ionicSelectableItemTemplate let-port="item" let-isPortSelected="itemIsSelected">
+        <div [ngStyle]="{ marginLeft: (20 * port.level) + 'px' }">{{ port.name }}</div>
+    </ng-template>
+</ionic-selectable>

src/app/components/editor/database/editors/page-link/page-link-editor.component.ts

@@ -0,0 +1,42 @@
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {ICellEditorParams} from 'ag-grid-community';
+import {ApiService} from '../../../../../service/api.service';
+import {IonicSelectableComponent} from "ionic-selectable";
+
+@Component({
+    selector: 'editor-cel-page-link',
+    templateUrl: './page-link-editor.component.html',
+    styleUrls: ['./page-link-editor.component.scss'],
+})
+export class PageLinkEditorComponent implements OnInit {
+    @ViewChild('selectable') selectable: IonicSelectableComponent;
+    public params: ICellEditorParams;
+    public value: any;
+    public pages: any[] = [];
+
+    constructor(
+        public readonly api: ApiService,
+    ) { }
+
+    agInit(params: ICellEditorParams): void {
+        this.params = params;
+        this.value = { id: this.params.value };
+
+        // @ts-ignore
+        this.pages = params._pagesData || [];
+
+        setTimeout(() => {
+            this.selectable.open();
+        });
+    }
+
+    getValue(): any {
+        return this.value.id;
+    }
+
+    async ngOnInit() {}
+
+    finishEdit() {
+        this.params.stopEditing();
+    }
+}

src/app/components/editor/database/editors/paragraph/paragraph-editor.component.ts

@@ -0,0 +1,69 @@
+import {ICellEditorAngularComp} from 'ag-grid-angular';
+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {ICellEditorParams} from 'ag-grid-community';
+import {ModalController} from '@ionic/angular';
+import {ParagraphModalComponent} from './paragraph-modal.component';
+
+@Component({
+    selector: 'cell-editor-paragraph',
+    template: `<input #input [(ngModel)]="value" readonly>`,
+    styles: [
+        `input {
+            width: 100%;
+            border: 1px solid grey;
+        }`
+    ],
+})
+export class ParagraphEditorComponent implements ICellEditorAngularComp, AfterViewInit {
+    private params: ICellEditorParams;
+    public value: string;
+
+    @ViewChild('input') input: ElementRef;
+
+    constructor(
+        protected modals: ModalController,
+    ) { }
+
+    agInit(params: ICellEditorParams): void {
+        this.params = params;
+        this.value = this.params.value;
+    }
+
+    getValue(): any {
+        return this.value;
+    }
+
+    ngAfterViewInit(): void {
+        setTimeout(() => {
+            this.modals.create({
+                component: ParagraphModalComponent,
+                componentProps: {
+                    title: this.params.colDef.headerName,
+                    value: this.value,
+                }
+            }).then(modal => {
+                modal.onDidDismiss().then(value => {
+                    if ( typeof value.data === 'undefined' ) {
+                        return;
+                    }
+
+                    this.value = String(value.data);
+                    this.finishEdit();
+                });
+
+                const modalState = {
+                    modal : true,
+                    desc : 'Paragraph editor'
+                };
+
+                history.pushState(modalState, null);
+
+                modal.present();
+            });
+        });
+    }
+
+    finishEdit() {
+        this.params.stopEditing();
+    }
+}

src/app/components/editor/database/editors/paragraph/paragraph-modal.component.html

@@ -0,0 +1,27 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{ title }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismissModal()">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-grid>
+    <ion-row>
+      <ion-col size="12">
+        <ion-item>
+          <ion-label position="floating">Content</ion-label>
+          <ion-textarea [(ngModel)]="value" rows="15"></ion-textarea>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>
+
+<ion-footer>
+  <ion-button fill="invisible" (click)="dismissModal()"><ion-icon name="save"></ion-icon>&nbsp;&nbsp;Save</ion-button>
+</ion-footer>

src/app/components/editor/database/editors/paragraph/paragraph-modal.component.ts

@@ -0,0 +1,20 @@
+import {Component, Input} from '@angular/core';
+import {ModalController} from '@ionic/angular';
+
+@Component({
+  selector: 'editor-paragraph-modal',
+  templateUrl: './paragraph-modal.component.html',
+  styleUrls: ['./paragraph-modal.component.scss'],
+})
+export class ParagraphModalComponent {
+  @Input() value = '';
+  @Input() title: string;
+
+  constructor(
+      protected modals: ModalController,
+  ) {}
+
+  dismissModal() {
+    this.modals.dismiss(this.value);
+  }
+}

src/app/components/editor/database/editors/select/multiselect-editor.component.ts

@@ -0,0 +1,40 @@
+import {ICellEditorAngularComp} from 'ag-grid-angular';
+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {ICellEditorParams} from 'ag-grid-community';
+import {IonSelect} from '@ionic/angular';
+
+@Component({
+    selector: 'cell-editor-multiselect',
+    template: `
+        <ion-select #select [(ngModel)]="value" style="padding: 0;" (ionChange)="finishEdit()"
+                    [interfaceOptions]="{header: params.colDef.headerName, cssClass: 'big-alert'}" multiple="true">
+            <ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.value }}</ion-select-option>
+        </ion-select>
+    `,
+})
+export class MultiSelectEditorComponent implements ICellEditorAngularComp, AfterViewInit {
+    public params: ICellEditorParams;
+    public value: string;
+
+    public options: Array<{value: string}> = [];
+    @ViewChild('select') select: IonSelect;
+
+    agInit(params: ICellEditorParams): void {
+        this.params = params;
+        this.value = this.params.value;
+        // @ts-ignore
+        this.options = this.params.colDef.additionalData.options;
+    }
+
+    getValue(): any {
+        return this.value;
+    }
+
+    ngAfterViewInit(): void {
+        this.select.open();
+    }
+
+    finishEdit() {
+        this.params.stopEditing();
+    }
+}

src/app/components/editor/database/editors/select/select-editor.component.ts

@@ -0,0 +1,39 @@
+import {ICellEditorAngularComp} from 'ag-grid-angular';
+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {ICellEditorParams} from 'ag-grid-community';
+import {IonSelect} from '@ionic/angular';
+
+@Component({
+    selector: 'cell-editor-select',
+    template: `
+        <ion-select #select [(ngModel)]="value" style="padding: 0;" (ionChange)="finishEdit()"
+                    [interfaceOptions]="{header: params.colDef.headerName, cssClass: 'big-alert'}">
+            <ion-select-option *ngFor="let option of options" [value]="option.value">{{ option.value }}</ion-select-option>
+        </ion-select>
+    `,
+})
+export class SelectEditorComponent implements ICellEditorAngularComp, AfterViewInit {
+    public params: ICellEditorParams;
+    public value: string;
+    public options: Array<{value: string}> = [];
+    @ViewChild('select') select: IonSelect;
+
+    agInit(params: ICellEditorParams): void {
+        this.params = params;
+        this.value = this.params.value;
+        // @ts-ignore
+        this.options = this.params.colDef.additionalData.options;
+    }
+
+    getValue(): any {
+        return this.value;
+    }
+
+    ngAfterViewInit(): void {
+        this.select.open();
+    }
+
+    finishEdit() {
+        this.params.stopEditing();
+    }
+}