Nurse UI/mm

README.md

@@ -1,5 +1,10 @@
 # Clinguin
 
+> **Warning**
+> This is a version of clinguin with a setup for Potassco Solutions.
+> For the original repository, please visit:
+> [https://github.com/potassco/clinguin](https://github.com/potassco/clinguin)
+
 Clinguin enables ASP developers to **create interactive User Interface** (UI) prototypes **using only ASP**.
 UIs are defined as sets of facts,  which are then rendered to provide continuous interaction with the ASP solver *clingo* based on user-triggered events.
 

angular_frontend/package.json

@@ -29,7 +29,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.2.1",
-    "@angular/cli": "~16.1.4",
+    "@angular/cli": "^16.2.16",
     "@angular/compiler-cli": "^16.1.0",
     "@angular/localize": "^16.1.0",
     "@types/jasmine": "~4.3.0",

angular_frontend/src/app/app.component.html

@@ -1,4 +1,4 @@
 <app-menu-bar *ngIf="menuBar != null" [element]="menuBar"></app-menu-bar>
 <div #contentWrapper class="content-wrapper">
 	<app-new-main></app-new-main>
-</div>
+</div>

angular_frontend/src/app/attribute-helper.service.ts

@@ -1,5 +1,6 @@
 import { Attribute, Injectable } from '@angular/core';
 import { AttributeDto, ElementDto } from './types/json-response.dto';
+// import { log } from 'console'; // Removed, use global console.log instead
 
 @Injectable({
     providedIn: 'root'
@@ -104,38 +105,42 @@ export class AttributeHelperService {
 
     }
 
-	setCustomTooltip(html: HTMLElement, attributes: AttributeDto[]) {
-		const tooltipAttribute = this.findAttribute("tooltip", attributes);
-		if (tooltipAttribute) {
-			// Create a tooltip element
-			const tooltip = document.createElement("div");
-			tooltip.innerText = tooltipAttribute.value;
-			tooltip.style.position = "fixed";
-			tooltip.style.backgroundColor = "black";
-			tooltip.style.color = "white";
-			tooltip.style.padding = "5px";
-			tooltip.style.borderRadius = "3px";
-			tooltip.style.fontSize = "12px";
-			tooltip.style.visibility = "hidden";
-
-			// Append the tooltip to the parent element
-			html.appendChild(tooltip);
-
-			// Show and position the tooltip on hover
-			html.onmouseenter = (event) => {
-				tooltip.style.visibility = "visible";
-				tooltip.style.top = `${event.clientY + 10}px`;
-				tooltip.style.left = `${event.clientX + 10}px`;
-			};
-			html.onmousemove = (event) => {
-				tooltip.style.top = `${event.clientY + 10}px`;
-				tooltip.style.left = `${event.clientX + 10}px`;
-			};
-			html.onmouseleave = () => {
-				tooltip.style.visibility = "hidden";
-			};
-		}
-	}
+    setCustomTooltip(html: HTMLElement, attributes: AttributeDto[]) {
+        const tooltipAttribute = this.findAttribute("tooltip", attributes);
+        const tooltipErrorAttribute = this.findAttribute("tooltip_error", attributes);
+
+        const value = tooltipAttribute ? tooltipAttribute.value : (tooltipErrorAttribute ? tooltipErrorAttribute.value : null);
+        if (tooltipAttribute || tooltipErrorAttribute) {
+            // Create a tooltip element
+            const tooltip = document.createElement("div");
+            tooltip.innerText = value!;
+            tooltip.style.position = "fixed";
+            tooltip.style.backgroundColor = tooltipErrorAttribute ? "#FF5630" : "#000848";
+            tooltip.style.color = "white";
+            tooltip.style.padding = "7px";
+            tooltip.style.borderRadius = "3px";
+            tooltip.style.fontSize = "12px";
+            tooltip.style.visibility = "hidden";
+            tooltip.style.zIndex = "1000";
+
+            // Append the tooltip to the parent element
+            html.appendChild(tooltip);
+
+            // Show and position the tooltip on hover
+            html.onmouseenter = (event) => {
+                tooltip.style.visibility = "visible";
+                tooltip.style.top = `${event.clientY + 10}px`;
+                tooltip.style.left = `${event.clientX + 10}px`;
+            };
+            html.onmousemove = (event) => {
+                tooltip.style.top = `${event.clientY + 10}px`;
+                tooltip.style.left = `${event.clientX + 10}px`;
+            };
+            html.onmouseleave = () => {
+                tooltip.style.visibility = "hidden";
+            };
+        }
+    }
 
     addAttributes(html: HTMLElement, attributes: AttributeDto[]) {
 
@@ -153,7 +158,7 @@ export class AttributeHelperService {
         })
 
         this.setHover(html, attributes)
-		this.setCustomTooltip(html, attributes)
+        this.setCustomTooltip(html, attributes)
     }
 
     addGeneralAttributes(html: HTMLElement, attributes: AttributeDto[]) {
@@ -334,34 +339,41 @@ export class AttributeHelperService {
     setChildLayout(html: HTMLElement, attributes: AttributeDto[]) {
         let attribute = this.findAttribute("child_layout", attributes)
         let flex_direction = this.findAttribute("flex_direction", attributes)
+        let display_overwrite = this.findAttribute("display", attributes)
+        console.log(display_overwrite);
 
-        if (attribute != null) {
-            let value = attribute?.value
-
-            if (value == "grid") {
-                html.style.display = "grid"
-            } else if (value == "flex") {
+        if (display_overwrite != null && display_overwrite.value == "none") {
+            console.log(display_overwrite.value);
+            html.style.display = display_overwrite.value
+        }
+        else {
+            if (attribute != null) {
+                let value = attribute?.value
+                if (value == "grid") {
+                    html.style.display = "grid"
+                } else if (value == "flex") {
+                    html.style.display = "flex"
+
+                    if (flex_direction != null) {
+                        html.style.flexDirection = flex_direction.value
+                    } else {
+                        html.style.flexDirection = "column"
+                    }
+                } else if (value == "absstatic") {
+                    html.style.position = "relative"
+                    html.style.display = "flex"
+                } else if (value == "relstatic") {
+                    html.style.position = "relative"
+                    html.style.display = "flex"
+                }
+            } else {
                 html.style.display = "flex"
-
                 if (flex_direction != null) {
                     html.style.flexDirection = flex_direction.value
+
                 } else {
                     html.style.flexDirection = "column"
                 }
-            } else if (value == "absstatic") {
-                html.style.position = "relative"
-                html.style.display = "flex"
-            } else if (value == "relstatic") {
-                html.style.position = "relative"
-                html.style.display = "flex"
-            }
-        } else {
-            html.style.display = "flex"
-            if (flex_direction != null) {
-                html.style.flexDirection = flex_direction.value
-
-            } else {
-                html.style.flexDirection = "column"
             }
         }
     }

angular_frontend/src/app/checkbox/checkbox.component.html

@@ -1,5 +1,14 @@
-<div class="form-check " #checkboxForm>
+<!-- <div class="form-check d-flex align-items-center" #checkboxForm style="gap: 0.5rem;">
     <input [attr.disabled]="disabledAttribute? true : null" #checkbox class="form-check-input" type="{{type}}" value=""
         id="checkbox-{{checkboxID}}" [attr.checked]="checked? true : null">
-    <label class="form-check-label" for="checkbox-{{checkboxID}}">{{ checkboxLabel }}</label>
-</div>
+    <label class="form-check-label" for="checkbox-{{checkboxID}}" style="margin-bottom:0;">{{ checkboxLabel }}</label>
+</div> -->
+
+<div class="form-check d-flex align-items-center" #checkboxForm style="gap: 0.5rem;">
+    <input [attr.disabled]="disabledAttribute? true : null" #checkbox class="form-check-input" type="{{type}}"
+        id="checkbox-{{checkboxID}}" [attr.disabled]="disabledAttribute ? true : null"
+        [attr.checked]="checked ? true : null">
+    <label class="form-check-label d-flex align-items-center" for="checkbox-{{checkboxID}}">
+        {{ checkboxLabel }}
+    </label>
+</div>

angular_frontend/src/app/label/label.component.ts

@@ -10,16 +10,16 @@ import { ElementLookupService } from '../element-lookup.service';
   styleUrls: ['./label.component.scss']
 })
 export class LabelComponent {
-  @ViewChild('label',{static:true}) label! : ElementRef
-  @ViewChild('middleDiv', {static:true}) middleDiv!: ElementRef
-  @ViewChild('outerDiv',{static:true}) outerDiv! : ElementRef
+  @ViewChild('label', { static: true }) label!: ElementRef
+  @ViewChild('middleDiv', { static: true }) middleDiv!: ElementRef
+  @ViewChild('outerDiv', { static: true }) outerDiv!: ElementRef
 
   @Input() element: ElementDto | null = null
   @Input() parentLayout: string = ""
 
   elementLabel: string = ""
 
-  constructor (private  cd: ChangeDetectorRef, private callbackService: CallBackHelperService, private attributeService: AttributeHelperService, private elementLookupService: ElementLookupService) {}
+  constructor(private cd: ChangeDetectorRef, private callbackService: CallBackHelperService, private attributeService: AttributeHelperService, private elementLookupService: ElementLookupService) { }
 
 
   ngAfterViewInit(): void {
@@ -32,48 +32,48 @@ export class LabelComponent {
       this.callbackService.setCallbacks(htmlDdbut, this.element.when)
 
       this.setAttributes(this.element.attributes)
-      
-      this.cd.detectChanges()   
+
+      this.cd.detectChanges()
     }
   }
 
   setAttributes(attributes: AttributeDto[]) {
-      let label = this.attributeService.findAttribute("label", attributes)
-      if (label != null) {
-        this.elementLabel = label.value
-      }
+    let label = this.attributeService.findAttribute("label", attributes)
+    if (label != null) {
+      this.elementLabel = label.value
+    }
 
-      let htmlDdbut = this.label.nativeElement
-      let htmlMiddle = this.middleDiv.nativeElement
-      let htmlOuterDiv = this.outerDiv.nativeElement
+    let htmlDdbut = this.label.nativeElement
+    let htmlMiddle = this.middleDiv.nativeElement
+    let htmlOuterDiv = this.outerDiv.nativeElement
 
-      this.attributeService.addAttributes(htmlDdbut, attributes)
-      this.attributeService.textAttributes(htmlDdbut, attributes)
-      this.attributeService.setAttributesDirectly(htmlDdbut, attributes)
-      this.attributeService.addClasses(htmlDdbut, attributes, [],[])
+    this.attributeService.addAttributes(htmlDdbut, attributes)
+    this.attributeService.textAttributes(htmlDdbut, attributes)
+    this.attributeService.setAttributesDirectly(htmlDdbut, attributes)
+    this.attributeService.addClasses(htmlDdbut, attributes, [], [])
 
 
-      this.setOuterDivStyles(htmlOuterDiv)
-      this.setMiddleDivStyle(htmlMiddle)
-      this.setParagraphStyle(htmlDdbut)
+    this.setOuterDivStyles(htmlOuterDiv)
+    this.setMiddleDivStyle(htmlMiddle)
+    this.setParagraphStyle(htmlDdbut)
 
-      this.cd.detectChanges()   
+    this.cd.detectChanges()
   }
 
-  setOuterDivStyles(outerDiv:HTMLElement) {
+  setOuterDivStyles(outerDiv: HTMLElement) {
     outerDiv.style.display = "table"
     outerDiv.style.minHeight = "100%"
     outerDiv.style.minWidth = "100%"
-    outerDiv.style.overflow = "hidden"
+    // outerDiv.style.overflow = "hidden"
   }
 
-  setMiddleDivStyle(middleDiv:HTMLElement) {
+  setMiddleDivStyle(middleDiv: HTMLElement) {
     middleDiv.style.minWidth = "100%"
     middleDiv.style.display = "table-row"
     //style="display:table-row; min-width: 100%;"
   }
 
-  setParagraphStyle(paragraph:HTMLElement) {
+  setParagraphStyle(paragraph: HTMLElement) {
 
     paragraph.style.display = "table-cell"
     paragraph.style.verticalAlign = "middle"

angular_frontend/src/app/menu-bar/menu-bar.component.html

@@ -1,8 +1,10 @@
-<nav #navbarElement class="navbar navbar-expand navbar-light justify-content-between bg-light fixed-top">
+<nav #navbarElement class="navbar navbar-expand navbar-light justify-content-between bg-tertiary-300 fixed-top">
   <div class="container-fluid">
+
     <a class="navbar-brand text-dark d-flex align-items-center">
-      <i #titleIcon class="me-2 mt-1"></i>
-      <span class="brand-text">{{title}}</span>
+      <img src="assets/potassco_rgb 2colors_digital.svg" alt="Potassco Logo" style="height:32px; margin-right:8px;" />
+      <span style="border-left: 1px solid #bbb; height: 28px; margin: 0 12px;"></span>
+      <span class="brand-text text-secondary-500">{{ title }}</span>
     </a>
     <button class="navbar-toggler d-lg-none" type="button" [attr.aria-expanded]="!isCollapsed"
       (click)="isCollapsed = !isCollapsed">

angular_frontend/src/app/message/message.component.html

@@ -1,3 +1,3 @@
 <ngb-alert *ngIf="visibility == 'shown'" [type]="attrType" [dismissible]="true" (closed)="messageClosed()">
     <strong>{{attrTitle}}</strong> {{attrMessage}}
-</ngb-alert>
+</ngb-alert>

angular_frontend/src/app/message/message.component.ts

@@ -37,6 +37,7 @@ export class MessageComponent {
     let attrTitle = this.attributeService.findGetAttributeValue("title", attributes, "")
     let attrMessage = this.attributeService.findGetAttributeValue("message", attributes, "")
 
+
     this.visibility = this.attributeService.findGetAttributeValue("visibility", attributes, "shown")
 
     if (attrType == "error") {

angular_frontend/src/app/window/window.component.html

@@ -4,7 +4,7 @@
 
 </div>
 <div id=loader class="myspinner clearfix p-3">
-    <div class="spinner-border text-black float-end" role="status">
+    <div class="spinner-border text-primary float-end" role="status">
     </div>
 </div>
 <div id=error class="myspinner text-danger clearfix text-lg p-3 fs-1 float-end">