Skip to content

Commit

Permalink
Fixed angular issues in update
Browse files Browse the repository at this point in the history
  • Loading branch information
@susuhahnml
susuhahnml committed Jun 17, 2024
1 parent c26cbcf commit 31edf1d
Show file tree
Hide file tree
Showing 11 changed files with 111 additions and 100 deletions.
111 changes: 56 additions & 55 deletions angular_frontend/src/app/attribute-helper.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,69 +2,69 @@ import { Attribute, Injectable } from '@angular/core';
import { AttributeDto, ElementDto } from './types/json-response.dto';

@Injectable({
providedIn: 'root'
providedIn: 'root'
})
export class AttributeHelperService {

constructor() { }
constructor() { }

attrBackgroundColor(html:HTMLElement, attribute: AttributeDto) {
attrBackgroundColor(html: HTMLElement, attribute: AttributeDto) {
let value = attribute.value

html.style.backgroundColor = value
}

attrHeight(html:HTMLElement, attribute: AttributeDto) {
attrHeight(html: HTMLElement, attribute: AttributeDto) {
let value = attribute.value + "px"
html.style.height = value
}

attrWidth(html:HTMLElement, attribute: AttributeDto) {
attrWidth(html: HTMLElement, attribute: AttributeDto) {
let value = attribute.value + "px"
html.style.width = value
}


setBorderHelper(html:HTMLElement, attributes: AttributeDto[]) {
setBorderHelper(html: HTMLElement, attributes: AttributeDto[]) {

let borderWidth = Number(this.findGetAttributeValue("border_width", attributes, "0"))
let borderColor = this.findGetAttributeValue("border_color",attributes, "black")
let borderColor = this.findGetAttributeValue("border_color", attributes, "black")
let borderStyle = "solid"

this.setBorder(html, borderWidth, borderColor, borderStyle)
}

setBorder(html:HTMLElement, borderWidth: number, borderColor: string, borderStyle: string) {
setBorder(html: HTMLElement, borderWidth: number, borderColor: string, borderStyle: string) {
if (borderWidth > 0) {
html.style.border = String(borderWidth) + "px " + borderStyle + " " + borderColor
}

}

addAttributes(html:HTMLElement, attributes : AttributeDto[]) {
addAttributes(html: HTMLElement, attributes: AttributeDto[]) {

let attr_dict = [
{key:"background_color",value:this.attrBackgroundColor},
{key:"height", value:this.attrHeight},
{key:"width", value:this.attrWidth},
{ key: "background_color", value: this.attrBackgroundColor },
{ key: "height", value: this.attrHeight },
{ key: "width", value: this.attrWidth },
]

attributes.forEach(attribute => {
let index = attr_dict.findIndex(item => item.key == attribute.key)
if (index >= 0) {
attr_dict[index].value(html,attribute)
attr_dict[index].value(html, attribute)
}
})

this.setHover(html, attributes)
}

addGeneralAttributes(html:HTMLElement, attributes: AttributeDto[]) {
this.setGrid(html,attributes)
addGeneralAttributes(html: HTMLElement, attributes: AttributeDto[]) {
this.setGrid(html, attributes)
this.setBorderHelper(html, attributes)
}

setGrid(html: HTMLElement, attributes:AttributeDto[]) {
setGrid(html: HTMLElement, attributes: AttributeDto[]) {

let gridRowStart = this.findAttribute("grid_row", attributes)
let gridRowSpan = this.findAttribute("grid_row_span", attributes)
Expand All @@ -86,24 +86,24 @@ export class AttributeHelperService {

html.style.gridRow = String(gridRowStartN) + "/" + "span " + String(gridRowSpanN)
}

if (gridColumnStart != null) {
let gridColumnStartN = Number(gridColumnStart.value) + 1

html.style.gridColumn = String(gridColumnStartN) + "/" + "span " + String(gridColumnSpanN)
}
}

setHover(html: HTMLElement, attributes:AttributeDto[]) {
setHover(html: HTMLElement, attributes: AttributeDto[]) {

let onHover = this.findGetAttributeValue("on_hover", attributes,"false")
let onHoverBackgroundColor = this.findGetAttributeValue("on_hover_background_color", attributes,"white")
let onHoverForegroundColor = this.findGetAttributeValue("on_hover_foreground_color", attributes,"black")
let onHoverBorderColor = this.findGetAttributeValue("on_hover_border_color", attributes,"white")
let backgroundColor = this.findGetAttributeValue("background_color", attributes,"white")
let foregroundColor = this.findGetAttributeValue("foreground_color", attributes,"black")
let onHover = this.findGetAttributeValue("on_hover", attributes, "false")
let onHoverBackgroundColor = this.findGetAttributeValue("on_hover_background_color", attributes, "white")
let onHoverForegroundColor = this.findGetAttributeValue("on_hover_foreground_color", attributes, "black")
let onHoverBorderColor = this.findGetAttributeValue("on_hover_border_color", attributes, "white")
let backgroundColor = this.findGetAttributeValue("background_color", attributes, "white")
let foregroundColor = this.findGetAttributeValue("foreground_color", attributes, "black")
let borderWidth = Number(this.findGetAttributeValue("border_width", attributes, "0"))
let borderColor = this.findGetAttributeValue("border_color",attributes, "black")
let borderColor = this.findGetAttributeValue("border_color", attributes, "black")
let borderStyle = "solid"

if (onHover == "true") {
Expand All @@ -124,7 +124,7 @@ export class AttributeHelperService {

}

textAttributes(html: HTMLElement, attributes : AttributeDto[]) {
textAttributes(html: HTMLElement, attributes: AttributeDto[]) {
// NOw IS SUPPOSED TO BE SET WITH THE CLASSES


Expand All @@ -133,66 +133,67 @@ export class AttributeHelperService {
// let index = attributes.findIndex(item => item.key == "foreground_color")
// if (index >= 0) {
// color = String(attributes[index].value)
// }
// html.style.color = color
// }
// html.style.color = color

// let fontSize = String(12) + "px"
// let index = attributes.findIndex(item => item.key == "font_size")
// if (index >= 0) {
// fontSize = String(attributes[index].value)
// }
// }
// html.style.fontSize = fontSize

}

addClasses(html: Element, attributes : AttributeDto[], base_classes:string[], default_classes:string[], attrName: string ='class' ) {
addClasses(html: Element, attributes: AttributeDto[], base_classes: string[], default_classes: string[], attrName: string = 'class') {

base_classes.forEach(function (c){
html.className = ""
base_classes.forEach(function (c) {
html.classList.add(c)
})
let added = false
attributes.forEach(function (item){
if (item.key==attrName){
attributes.forEach(function (item) {
if (item.key == attrName) {
added = true
let c = String(item.value)
html.classList.add(c)
}
})

if (!added){
default_classes.forEach(function (c){
if (!added) {
default_classes.forEach(function (c) {
html.classList.add(c)
})
}


}

setAttributesDirectly(html: HTMLElement, attributes: AttributeDto[]) {
attributes.forEach((attr : AttributeDto) => {
attributes.forEach((attr: AttributeDto) => {
(<any>html.style)[attr.key] = attr.value
})
}

findAttribute(key:string, attributes: AttributeDto[]) : AttributeDto | null {
let value = null
let index = attributes.findIndex(attr => attr.key == key)
if (index >= 0) {
value = attributes[index]
}
return value
findAttribute(key: string, attributes: AttributeDto[]): AttributeDto | null {
let value = null
let index = attributes.findIndex(attr => attr.key == key)
if (index >= 0) {
value = attributes[index]
}
return value
}

findGetAttributeValue(key: string, attributes: AttributeDto[], defaultValue: string) {
let value = defaultValue
let index = attributes.findIndex(attr => attr.key == key)
if (index >= 0) {
value = attributes[index].value
}
return value
let value = defaultValue
let index = attributes.findIndex(attr => attr.key == key)
if (index >= 0) {
value = attributes[index].value
}
return value
}

setAbsoulteRelativePositions(parentChildLayout:string, html:HTMLElement, child:ElementDto) {
setAbsoulteRelativePositions(parentChildLayout: string, html: HTMLElement, child: ElementDto) {

let posX = Number(this.findGetAttributeValue("pos_x", child.attributes, "-1"))
let posY = Number(this.findGetAttributeValue("pos_y", child.attributes, "-1"))
Expand Down Expand Up @@ -225,7 +226,7 @@ export class AttributeHelperService {

}

setChildLayout(html:HTMLElement, attributes: AttributeDto[]) {
setChildLayout(html: HTMLElement, attributes: AttributeDto[]) {
let attribute = this.findAttribute("child_layout", attributes)
let flex_direction = this.findAttribute("flex_direction", attributes)

Expand All @@ -251,16 +252,16 @@ export class AttributeHelperService {
}
} else {
html.style.display = "flex"
if (flex_direction != null){
if (flex_direction != null) {
html.style.flexDirection = flex_direction.value

}else {
} else {
html.style.flexDirection = "column"
}
}
}

setVisibility(html:HTMLElement, attributes:AttributeDto[]) {
setVisibility(html: HTMLElement, attributes: AttributeDto[]) {
let visibilityAttribute = this.findAttribute("visibility", attributes)
if (visibilityAttribute != null) {
if (visibilityAttribute.value == "hidden" || visibilityAttribute.value == "collapse") {
Expand Down
62 changes: 31 additions & 31 deletions angular_frontend/src/app/button/button.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { ElementLookupService } from '../element-lookup.service';
styleUrls: ['./button.component.scss']
})
export class ButtonComponent {
@ViewChild("theButton",{static:false}) theButton! : ElementRef
@ViewChild("theButton", { static: false }) theButton!: ElementRef

@Input() element: ElementDto | null = null
@Input() parentLayout: string = ""
Expand All @@ -19,7 +19,7 @@ export class ButtonComponent {
disabledAttribute: boolean = false
// class: 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 {

Expand All @@ -34,37 +34,37 @@ export class ButtonComponent {
}
}

setAttributes(attributes : AttributeDto[]) {
this.buttonLabel = this.attributeService.findGetAttributeValue("label",attributes,"")
// this.class = this.attributeService.findGetAttributeValue("class", attributes, "")
setAttributes(attributes: AttributeDto[]) {
this.buttonLabel = this.attributeService.findGetAttributeValue("label", attributes, "")
// this.class = this.attributeService.findGetAttributeValue("class", attributes, "")

let htmlDdbut = this.theButton.nativeElement
let htmlDdbut = this.theButton.nativeElement

this.attributeService.setAttributesDirectly(htmlDdbut, attributes)
this.attributeService.addAttributes(htmlDdbut, attributes)
this.attributeService.textAttributes(htmlDdbut, attributes)
this.attributeService.addClasses(htmlDdbut, attributes, ["btn"], ["btn-info"])
this.attributeService.addGeneralAttributes(htmlDdbut, attributes)

if (this.element != null) {
this.attributeService.setAbsoulteRelativePositions(this.parentLayout, htmlDdbut, this.element)
}

let icon = htmlDdbut.children.item(0)

this.attributeService.addClasses(icon, attributes, ["fa"], [], 'icon')

let stringDisabled = this.attributeService.findGetAttributeValue("disabled", attributes, "false")
if (stringDisabled == "false") {
this.disabledAttribute = false
} else if (stringDisabled == "true") {
this.disabledAttribute = true
} else {
console.log("NOT SUPPORTED VALUE FOR DISABLED (assuming not disabled): ")
console.log(stringDisabled)
this.disabledAttribute = false
}
this.attributeService.setAttributesDirectly(htmlDdbut, attributes)
this.attributeService.addAttributes(htmlDdbut, attributes)
this.attributeService.textAttributes(htmlDdbut, attributes)
this.attributeService.addClasses(htmlDdbut, attributes, ["btn"], ["btn-info"])
this.attributeService.addGeneralAttributes(htmlDdbut, attributes)

this.cd.detectChanges()
if (this.element != null) {
this.attributeService.setAbsoulteRelativePositions(this.parentLayout, htmlDdbut, this.element)
}

let icon = htmlDdbut.children.item(0)

this.attributeService.addClasses(icon, attributes, ["fa"], [], 'icon')

let stringDisabled = this.attributeService.findGetAttributeValue("disabled", attributes, "false")
if (stringDisabled == "false") {
this.disabledAttribute = false
} else if (stringDisabled == "true") {
this.disabledAttribute = true
} else {
console.log("NOT SUPPORTED VALUE FOR DISABLED (assuming not disabled): ")
console.log(stringDisabled)
this.disabledAttribute = false
}

this.cd.detectChanges()
}
}
Loading

0 comments on commit 31edf1d

Please sign in to comment.