Colorised spreadsheet (#1643)

* feat: colorise spreadSheet with rundown color

* feat: add colorisation in spreadsheet for block

* feat: border color

* fix: cleanup accessible color

* fix: review before merge (https://github.com/cpvalente/ontime/pull/1608)

* fix: usgae of map instead foreach (https://github.com/cpvalente/ontime/pull/1608)

* Update apps/server/src/services/sheet-service/SheetService.ts

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

* fix: comment condition

* fix: Remove Color plugin (but don't can get color like 'red' or 'black')

* fix: isLight for more clean code

* fix: remove map on isLight function

* fix: remove debug logger

* refactor colour

* lint

---------

Co-authored-by: Gwenitora <gwenitora.gardu74@gmail.com>
Co-authored-by: Gwenitora <61121870+Gwenitora@users.noreply.github.com>
Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

apps/server/src/services/sheet-service/SheetService.ts

@@ -211,16 +211,18 @@ async function verifySheet(
       spreadsheetId: sheetId,
       includeGridData: false,
     });
-    const worksheets = spreadsheets.data.sheets?.forEach((sheet) => {
+
+    const worksheets: string[] = [];
+    spreadsheets.data.sheets?.forEach((sheet) => {
       if (sheet.properties?.title) {
-        return sheet.properties.title;
+        worksheets.push(sheet.properties.title);
       }
     });
 
-    if (!worksheets) {
+    if (worksheets.length === 0) {
       throw new Error('No worksheets found');
     }
-    return worksheets;
+    return { worksheetOptions: worksheets };
   } catch (error) {
     // attempt to catch errors caused by importing xlsx
     catchCommonImportXlsxError(error);
@@ -293,7 +295,17 @@ async function verifyWorksheet(sheetId: string, worksheet: string): Promise<{ wo
   if (!selectedWorksheet) {
     throw new Error('Could not find worksheet');
   }
-  if (!selectedWorksheet.properties || !selectedWorksheet.properties.sheetId) {
+  /*
+    The first spreadsheet provided by google sheet has an id = 0,
+    so !0 returns true, the only other number that returns true in this setup is NaN,
+    so if x !== 0 && x !== NaN, then !x returns false, we indeed want !NaN to return true,
+    but we would like !0 to return false, reason why is also checked that the id is not 0,
+    because if it is 0, then I should not enter the condition.
+  */
+  if (
+    !selectedWorksheet.properties ||
+    (!selectedWorksheet.properties.sheetId && selectedWorksheet.properties.sheetId !== 0)
+  ) {
     throw new Error('Got invalid data from worksheet');
   }
 

apps/server/src/services/sheet-service/__tests__/sheetUtils.test.ts

@@ -274,6 +274,6 @@ describe('cellRequestFromEvent()', () => {
     const result2 = cellRequestFromEvent(event, 10, 1234, metadata);
     expect(result2.updateCells?.start?.rowIndex).toStrictEqual(21);
     expect(result2.updateCells?.start?.columnIndex).toStrictEqual(5);
-    expect(result2.updateCells?.fields).toStrictEqual('userEnteredValue');
+    expect(result2.updateCells?.fields).toStrictEqual('userEnteredValue,userEnteredFormat');
   });
 });

apps/server/src/services/sheet-service/sheetUtils.ts

@@ -1,5 +1,5 @@
-import { isOntimeBlock, isOntimeEvent, OntimeEvent, OntimeEntry } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
+import { isOntimeBlock, isOntimeEvent, OntimeEvent, OntimeEntry, RGBColour } from 'ontime-types';
+import { cssOrHexToColour, isLightColour, millisToString, mixColours } from 'ontime-utils';
 
 import type { sheets_v4 } from '@googleapis/sheets';
 import { is } from '../../utils/is.js';
@@ -100,8 +100,26 @@ export function cellRequestFromEvent(
     }
   }
 
+  const colors = isOntimeEvent(event) || isOntimeBlock(event) ? getAccessibleColour(event.colour) : undefined;
+  const cellColor: sheets_v4.Schema$CellData = !colors
+    ? {}
+    : {
+        userEnteredFormat: {
+          backgroundColor: toSheetColourLevel(colors.background),
+          textFormat: {
+            foregroundColor: toSheetColourLevel(colors.text),
+          },
+          borders: {
+            bottom: {
+              style: 'SOLID',
+              color: toSheetColourLevel(colors.border),
+            },
+          },
+        },
+      };
+
   const returnRows: sheets_v4.Schema$CellData[] = rowData.map(([key, _]) => {
-    return getCellData(key, event);
+    return { ...getCellData(key, event), ...cellColor };
   });
 
   return {
@@ -111,7 +129,7 @@ export function cellRequestFromEvent(
         rowIndex: index + rowData[0][1]['row'] + 1,
         columnIndex: titleCol,
       },
-      fields: 'userEnteredValue',
+      fields: 'userEnteredValue,userEnteredFormat',
       rows: [
         {
           values: returnRows,
@@ -156,3 +174,29 @@ function getCellData(key: keyof OntimeEvent | 'blank', event: OntimeEntry) {
 
   return {};
 }
+
+type googleSheetCellColour = {
+  background: RGBColour;
+  text: RGBColour;
+  border: RGBColour;
+};
+
+function getAccessibleColour(bgColour?: string): googleSheetCellColour | undefined {
+  if (!bgColour) return undefined;
+
+  const background = cssOrHexToColour(bgColour);
+  if (!background) return undefined;
+
+  const text = isLightColour(background) ? BLACK : WHITE;
+  const border = mixColours(background, text, 0.2);
+
+  return { background, text, border };
+}
+
+const BLACK: RGBColour = { red: 0, green: 0, blue: 0, alpha: 1 };
+const WHITE: RGBColour = { red: 255, green: 255, blue: 255, alpha: 0.98 };
+
+// sheets use color values from 0 to 1
+function toSheetColourLevel(colour: RGBColour): RGBColour {
+  return { red: colour.red / 255, green: colour.green / 255, blue: colour.blue / 255, alpha: colour.alpha };
+}

apps/server/src/utils/coerceType.ts

@@ -1,4 +1,4 @@
-import { isColourHex } from 'ontime-utils';
+import { CssColours, isColourHex } from 'ontime-utils';
 
 /**
  * @description Converts a value to an item in the provided enume.
@@ -95,160 +95,8 @@ export function coerceColour(value: unknown): string {
   if (lowerCaseValue === '') {
     return lowerCaseValue; // None colour the same as the UI 'Ø' button
   }
-  if (!(lowerCaseValue in cssColours)) {
+  if (!(lowerCaseValue in CssColours)) {
     throw new Error('Invalid colour name received');
   }
   return lowerCaseValue;
 }
-
-//https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
-const cssColours = {
-  aliceblue: '#f0f8ff',
-  antiquewhite: '#faebd7',
-  aqua: '#00ffff',
-  aquamarine: '#7fffd4',
-  azure: '#f0ffff',
-  beige: '#f5f5dc',
-  bisque: '#ffe4c4',
-  black: '#000000',
-  blanchedalmond: '#ffebcd',
-  blue: '#0000ff',
-  blueviolet: '#8a2be2',
-  brown: '#a52a2a',
-  burlywood: '#deb887',
-  cadetblue: '#5f9ea0',
-  chartreuse: '#7fff00',
-  chocolate: '#d2691e',
-  coral: '#ff7f50',
-  cornflowerblue: '#6495ed',
-  cornsilk: '#fff8dc',
-  crimson: '#dc143c',
-  cyan: '#00ffff',
-  darkblue: '#00008b',
-  darkcyan: '#008b8b',
-  darkgoldenrod: '#b8860b',
-  darkgray: '#a9a9a9',
-  darkgreen: '#006400',
-  darkgrey: '#a9a9a9',
-  darkkhaki: '#bdb76b',
-  darkmagenta: '#8b008b',
-  darkolivegreen: '#556b2f',
-  darkorange: '#ff8c00',
-  darkorchid: '#9932cc',
-  darkred: '#8b0000',
-  darksalmon: '#e9967a',
-  darkseagreen: '#8fbc8f',
-  darkslateblue: '#483d8b',
-  darkslategray: '#2f4f4f',
-  darkslategrey: '#2f4f4f',
-  darkturquoise: '#00ced1',
-  darkviolet: '#9400d3',
-  deeppink: '#ff1493',
-  deepskyblue: '#00bfff',
-  dimgray: '#696969',
-  dimgrey: '#696969',
-  dodgerblue: '#1e90ff',
-  firebrick: '#b22222',
-  floralwhite: '#fffaf0',
-  forestgreen: '#228b22',
-  fuchsia: '#ff00ff',
-  gainsboro: '#dcdcdc',
-  ghostwhite: '#f8f8ff',
-  goldenrod: '#daa520',
-  gold: '#ffd700',
-  gray: '#808080',
-  green: '#008000',
-  greenyellow: '#adff2f',
-  grey: '#808080',
-  honeydew: '#f0fff0',
-  hotpink: '#ff69b4',
-  indianred: '#cd5c5c',
-  indigo: '#4b0082',
-  ivory: '#fffff0',
-  khaki: '#f0e68c',
-  lavenderblush: '#fff0f5',
-  lavender: '#e6e6fa',
-  lawngreen: '#7cfc00',
-  lemonchiffon: '#fffacd',
-  lightblue: '#add8e6',
-  lightcoral: '#f08080',
-  lightcyan: '#e0ffff',
-  lightgoldenrodyellow: '#fafad2',
-  lightgray: '#d3d3d3',
-  lightgreen: '#90ee90',
-  lightgrey: '#d3d3d3',
-  lightpink: '#ffb6c1',
-  lightsalmon: '#ffa07a',
-  lightseagreen: '#20b2aa',
-  lightskyblue: '#87cefa',
-  lightslategray: '#778899',
-  lightslategrey: '#778899',
-  lightsteelblue: '#b0c4de',
-  lightyellow: '#ffffe0',
-  lime: '#00ff00',
-  limegreen: '#32cd32',
-  linen: '#faf0e6',
-  magenta: '#ff00ff',
-  maroon: '#800000',
-  mediumaquamarine: '#66cdaa',
-  mediumblue: '#0000cd',
-  mediumorchid: '#ba55d3',
-  mediumpurple: '#9370db',
-  mediumseagreen: '#3cb371',
-  mediumslateblue: '#7b68ee',
-  mediumspringgreen: '#00fa9a',
-  mediumturquoise: '#48d1cc',
-  mediumvioletred: '#c71585',
-  midnightblue: '#191970',
-  mintcream: '#f5fffa',
-  mistyrose: '#ffe4e1',
-  moccasin: '#ffe4b5',
-  navajowhite: '#ffdead',
-  navy: '#000080',
-  oldlace: '#fdf5e6',
-  olive: '#808000',
-  olivedrab: '#6b8e23',
-  orange: '#ffa500',
-  orangered: '#ff4500',
-  orchid: '#da70d6',
-  palegoldenrod: '#eee8aa',
-  palegreen: '#98fb98',
-  paleturquoise: '#afeeee',
-  palevioletred: '#db7093',
-  papayawhip: '#ffefd5',
-  peachpuff: '#ffdab9',
-  peru: '#cd853f',
-  pink: '#ffc0cb',
-  plum: '#dda0dd',
-  powderblue: '#b0e0e6',
-  purple: '#800080',
-  rebeccapurple: '#663399',
-  red: '#ff0000',
-  rosybrown: '#bc8f8f',
-  royalblue: '#4169e1',
-  saddlebrown: '#8b4513',
-  salmon: '#fa8072',
-  sandybrown: '#f4a460',
-  seagreen: '#2e8b57',
-  seashell: '#fff5ee',
-  sienna: '#a0522d',
-  silver: '#c0c0c0',
-  skyblue: '#87ceeb',
-  slateblue: '#6a5acd',
-  slategray: '#708090',
-  slategrey: '#708090',
-  snow: '#fffafa',
-  springgreen: '#00ff7f',
-  steelblue: '#4682b4',
-  tan: '#d2b48c',
-  teal: '#008080',
-  thistle: '#d8bfd8',
-  tomato: '#ff6347',
-  turquoise: '#40e0d0',
-  violet: '#ee82ee',
-  wheat: '#f5deb3',
-  white: '#ffffff',
-  whitesmoke: '#f5f5f5',
-  yellow: '#ffff00',
-  yellowgreen: '#9acd3',
-} as const;