Skip to content

Commit

Permalink
Merge pull request #17 from SvenSommer/feature/frontend_setup
Browse files Browse the repository at this point in the history
Feature/frontend setup
  • Loading branch information
SvenSommer authored May 4, 2024
2 parents d954118 + bd46c5b commit 2328ab9
Show file tree
Hide file tree
Showing 37 changed files with 14,540 additions and 37 deletions.
65 changes: 29 additions & 36 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
@@ -1,38 +1,31 @@
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
"name": "Python 3",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye",
"features": {
"ghcr.io/devcontainers-contrib/features/black:2": {}
},
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "pip3 install --user -r requirements.txt",
// Configure tool-specific properties.
"customizations": {
"vscode": {
"extensions": [
"ms-python.black-formatter",
"ms-python.debugpy",
"ms-python.python",
"samuelcolvin.jinjahtml",
"humao.rest-client"
],
"settings": {
"rest-client.environmentVariables": {
"local": {
"host": "localhost:5000"
},
"$shared": {}
}
}
}
}
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
"name": "Python 3 & Angular Development",
"image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye",
"features": {
"ghcr.io/devcontainers-contrib/features/black:2": {},
"node": "18"
},
"forwardPorts": [4200],
"postCreateCommand": "pip3 install --user -r requirements.txt && npm install -g @angular/cli@16",
"customizations": {
"vscode": {
"extensions": [
"ms-python.black-formatter",
"ms-python.debugpy",
"ms-python.python",
"samuelcolvin.jinjahtml",
"humao.rest-client",
"angular.ng-template",
"dbaeumer.vscode-eslint"
],
"settings": {
"rest-client.environmentVariables": {
"local": {
"host": "localhost:5000"
},
"$shared": {}
}
}
}
}
}
40 changes: 39 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,42 @@ To execute a request, simply click on the Send Request link located above the re

### Frontend

TODO
The frontend for the Structure Comparer Web App is developed using Angular. It provides an interactive user interface to visualize and configure mappings between different FHIR profiles.

#### Setup and Development

Before you start, make sure you have Node.js and the Angular CLI installed. The development environment is prepared to run inside a Dev Container with all necessary dependencies.

1. Navigate to the frontend directory:
```bash
cd /workspaces/structure_comparer/frontend/structure-comparer
```

2. Install the required npm packages:
```bash
npm install
```

3. Start the development server:
```bash
ng serve
```
The Angular development server will start, and you can access the frontend by navigating to `http://localhost:4200` in your web browser.

#### Features

- **Mappings Visualization**: Visualize mappings between FHIR profiles with detailed views for each mapping, including properties, classifications, and remarks.

- **Edit and Configure Mappings**: Directly edit mappings to adjust classifications, add remarks, and configure mappings as per project requirements.

- **Responsive Design**: The frontend is designed to be responsive, providing a seamless experience across various devices and screen sizes.

#### Building for Production

To build the frontend for production, run the following command:
```bash
ng build --prod
```
This will create a `dist/` directory with optimized files ready to be deployed to a production server.

For more information on Angular development, visit [Angular's official documentation](https://angular.io/docs).
16 changes: 16 additions & 0 deletions frontend/structure-comparer/.editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single

[*.md]
max_line_length = off
trim_trailing_whitespace = false
42 changes: 42 additions & 0 deletions frontend/structure-comparer/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.

# Compiled output
/dist
/tmp
/out-tsc
/bazel-out

# Node
/node_modules
npm-debug.log
yarn-error.log

# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*

# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings

# System files
.DS_Store
Thumbs.db
4 changes: 4 additions & 0 deletions frontend/structure-comparer/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}
20 changes: 20 additions & 0 deletions frontend/structure-comparer/.vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}
42 changes: 42 additions & 0 deletions frontend/structure-comparer/.vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}
27 changes: 27 additions & 0 deletions frontend/structure-comparer/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# StructureComparer

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.12.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
100 changes: 100 additions & 0 deletions frontend/structure-comparer/angular.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"structure-comparer": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/structure-comparer",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "structure-comparer:build:production"
},
"development": {
"browserTarget": "structure-comparer:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "structure-comparer:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
}
}
}
}
}
}
Loading

0 comments on commit 2328ab9

Please sign in to comment.