1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {SemaphoreList} from '../../model/semaphore-list';
import {Semaphore} from '../../model/semaphore';
import {Format} from '../../model/format';
@Component({
selector: 'app-column-advanced-display',
templateUrl: './column-advanced-display.component.html',
styleUrls: ['./column-advanced-display.component.css']
})
export class ColumnAdvancedDisplayComponent implements OnInit {
@Input('semaphoreArr') semaphoreArr: SemaphoreList;
@Input('inputSemaphoreName') inputSemaphoreName: String;
@Input('addNew') addNew: boolean;
@Input('columnName') columnName: String;
@Input('columnList') columnList: any;
@Output() completed = new EventEmitter<any>();
semaphoreObjArr: {}[];
semaphore: Semaphore;
outPutValues: {};
newSemaphore: {};
rangeColors = [
{index: 0, value: '#00FFFF', title: 'Aqua'},
{index: 1, value: '#000000', title: 'Black'},
{index: 2, value: '#0000FF', title: 'Blue'},
{index: 3, value: '#FF00FF', title: 'Fuchsia'},
{index: 4, value: '#808080', title: 'Gray'},
{index: 5, value: '#008000', title: 'Green'},
{index: 6, value: '#00FF00', title: 'Lime'},
{index: 7, value: '#800000', title: 'Maroon'},
{index: 8, value: '#000080', title: 'Navy'},
{index: 9, value: '#808000', title: 'Olive'},
{index: 10, value: '#FF9900', title: 'Orange'},
{index: 11, value: '#800080', title: 'Purple'},
{index: 12, value: '#FF0000', title: 'Red'},
{index: 13, value: '#C0C0C0', title: 'Silver'},
{index: 14, value: '#008080', title: 'Teal'},
{index: 15, value: '#FFFFFF', title: 'White'},
{index: 16, value: '#FFFF00', title: 'Yellow'},
{index: 17, value: '', title: 'Default'}
];
fontFamily = [
{index: 0, value: 'Arial,Helvetica,sans-serif', title: 'Arial'},
{index: 1, value: 'Courier New,Courier,mono', title: 'Courier'},
{index: 2, value: 'Geneva,Arial,Helvetica,sans-serif', title: 'Geneva'},
{index: 3, value: 'Georgia,Times New Roman,Times,serif', title: 'Georgia'},
{index: 4, value: 'Times New Roman,Times,serif', title: 'Times'},
{index: 5, value: 'Verdana,Arial,Helvetica,sans-serif', title: 'Verdana'},
{index: 6, value: '', title: 'Default'}
];
constructor() {
this.semaphoreObjArr = new Array();
this.outPutValues = new Object();
this.newSemaphore = new Object();
}
ngOnInit() {
if (this.addNew) {
this.addNewDisplay();
} else {
for (let semCtr = 0; semCtr < this.semaphoreArr.semaphore.length; semCtr++) {
if (this.inputSemaphoreName === this.semaphoreArr.semaphore[semCtr]['semaphoreName']) {
this.semaphore = this.semaphoreArr.semaphore[semCtr];
}
}
}
}
saveDisplayData() {
this.outPutValues['semList'] = this.semaphoreArr;
this.outPutValues['semId'] = this.semaphore.semaphoreId;
this.outPutValues['setCloseDisplay'] = false;
this.outPutValues['semName'] = this.semaphore.semaphoreName;
this.completed.emit(this.outPutValues);
}
addNewFormat() {
let formatCnt = 0;
if ( this.semaphore.formatList.format.length > 0) {
formatCnt = this.semaphore.formatList.format.length + 1;
} else { formatCnt = 1; }
this.semaphore.formatList.format.push({
bgColor: '',
bold: false,
expression: '',
fontColor: '',
fontFace: '',
fontSize: '18',
italic: false,
lessThanValue: '',
underline: false,
formatId: this.semaphore.semaphoreId + '_fmt' + formatCnt
});
}
setStyle(format: Format) {
const style = {
'background-color': format.bgColor,
'color': format.fontColor,
'fontSize': format.fontSize + 'px',
'font-weight': format.bold ? 'bold' : 'normal',
'font-style': format.italic ? 'italic' : 'normal',
'font-family': format.fontFace
};
return style;
}
deleteFormat(format: Format) {
const index = this.semaphore.formatList.format.findIndex(d => d === format);
this.semaphore.formatList.format.splice(index, 1);
}
addNewDisplay() {
let semCount = 0;
if ( this.semaphoreArr !== null && this.semaphoreArr.semaphore.length > 0 ) {
semCount = this.semaphoreArr.semaphore.length + 1;
} else { semCount = 1 ; }
this.newSemaphore['comment'] = this.columnName;
this.newSemaphore['target'] = '';
this.newSemaphore['semaphoreType'] = 'CELL';
this.newSemaphore['semaphoreName'] = 'Display Formatting ' + semCount;
this.newSemaphore['semaphoreId'] = 'sem' + semCount;
this.newSemaphore['formatList'] = {
format: new Array({
bgColor: '',
bold: false,
expression: '',
fontColor: '',
fontFace: '',
fontSize: 18,
italic: false,
lessThanValue: '',
underline: false,
formatId: this.newSemaphore['semaphoreId'] + '_fmt1'
})
};
this.semaphoreArr.semaphore.push(<Semaphore>this.newSemaphore);
for (let semCtr = 0; semCtr < this.semaphoreArr.semaphore.length; semCtr++) {
if (this.semaphoreArr.semaphore[semCtr]['semaphoreId'] === this.newSemaphore['semaphoreId']) {
this.semaphore = this.semaphoreArr.semaphore[semCtr];
}
}
}
}
|
