Visual Console Client: added a color property to the digital clock item

Former-commit-id: 1393ecb7abcb612f21ec65848e2426f8433bb00b
This commit is contained in:
Alejandro Gallardo Escobar 2019-02-27 10:46:56 +01:00
parent cafede1599
commit b0052577a4
2 changed files with 17 additions and 8 deletions

View File

@ -25,7 +25,7 @@ if (container != null) {
width: 800, width: 800,
height: 300, height: 300,
backgroundURL: null, backgroundURL: null,
backgroundColor: "rgb(154, 154, 154)", backgroundColor: "rgb(86, 86, 86)",
isFavorite: false isFavorite: false
}; };
@ -42,8 +42,8 @@ if (container != null) {
x: 100, x: 100,
y: 50, y: 50,
// Size props. // Size props.
width: 100, width: 70,
height: 100, height: 70,
// Agent props. // Agent props.
agentId: null, agentId: null,
agentName: null, agentName: null,
@ -52,7 +52,7 @@ if (container != null) {
moduleName: null, moduleName: null,
// Custom props. // Custom props.
imageSrc: imageSrc:
"https://brutus.artica.lan:8081/uploads/-/system/project/avatar/1/1.png", "http://localhost/pandora_console/images/console/icons/bridge_ok.png",
showLastValueTooltip: "default" showLastValueTooltip: "default"
}; };
@ -85,7 +85,7 @@ if (container != null) {
const digitalClockRawProps = { const digitalClockRawProps = {
// Generic props. // Generic props.
id: 3, id: 3,
type: 19, // clock = 19 type: 19, // Clock = 19
label: null, label: null,
isLinkEnabled: false, isLinkEnabled: false,
isOnTop: false, isOnTop: false,
@ -95,14 +95,15 @@ if (container != null) {
x: 500, x: 500,
y: 100, y: 100,
// Size props. // Size props.
width: 300, width: 200,
height: 150, height: 100,
// Custom props. // Custom props.
clockType: "digital", clockType: "digital",
clockFormat: "datetime", clockFormat: "datetime",
clockTimezone: "Madrid", clockTimezone: "Madrid",
clockTimezoneOffset: 60, clockTimezoneOffset: 60,
showClockTimezone: true showClockTimezone: true,
color: "#82B92E"
}; };
try { try {

View File

@ -20,6 +20,7 @@ export type ClockProps = {
clockTimezone: string; clockTimezone: string;
clockTimezoneOffset: number; // Offset of the timezone to UTC in seconds. clockTimezoneOffset: number; // Offset of the timezone to UTC in seconds.
showClockTimezone: boolean; showClockTimezone: boolean;
color: string | null;
} & VisualConsoleItemProps & } & VisualConsoleItemProps &
LinkedVisualConsoleProps; LinkedVisualConsoleProps;
@ -81,6 +82,10 @@ export function clockPropsDecoder(data: UnknownObject): ClockProps | never {
clockTimezone: data.clockTimezone, clockTimezone: data.clockTimezone,
clockTimezoneOffset: parseIntOr(data.clockTimezoneOffset, 0), clockTimezoneOffset: parseIntOr(data.clockTimezoneOffset, 0),
showClockTimezone: parseBoolean(data.showClockTimezone), showClockTimezone: parseBoolean(data.showClockTimezone),
color:
typeof data.color === "string" && data.color.length > 0
? data.color
: null,
...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects. ...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
}; };
} }
@ -209,6 +214,7 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
dateElem.className = "date"; dateElem.className = "date";
dateElem.textContent = this.getDigitalDate(); dateElem.textContent = this.getDigitalDate();
dateElem.style.fontSize = `${dateFontSize}px`; dateElem.style.fontSize = `${dateFontSize}px`;
dateElem.style.color = this.props.color;
element.append(dateElem); element.append(dateElem);
} }
@ -217,6 +223,7 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
timeElem.className = "time"; timeElem.className = "time";
timeElem.textContent = this.getDigitalTime(); timeElem.textContent = this.getDigitalTime();
timeElem.style.fontSize = `${timeFontSize}px`; timeElem.style.fontSize = `${timeFontSize}px`;
timeElem.style.color = this.props.color;
element.append(timeElem); element.append(timeElem);
// Timezone name. // Timezone name.
@ -225,6 +232,7 @@ export default class Clock extends VisualConsoleItem<ClockProps> {
tzElem.className = "timezone"; tzElem.className = "timezone";
tzElem.textContent = this.props.clockTimezone; tzElem.textContent = this.props.clockTimezone;
tzElem.style.fontSize = `${tzFontSize}px`; tzElem.style.fontSize = `${tzFontSize}px`;
tzElem.style.color = this.props.color;
element.append(tzElem); element.append(tzElem);
} }