Probleme affichage période en cours du planning dans SynApps

Salut,
Il faut essayé avec cette version de composite. J'ai fait une correction. Si c'est bon, je le remplacerai aussi dans la doc. Supprime le composite et remplace le par celui ci dans ton projet.
SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"hebdo","name":"Planning Hebdo","additionalDefs":{"planningPath":{"type":"wos-path","label":"Planning","helperTxt":"Chemin du planning","value":"","variableType":"resourcesOnly"},"quartWidth":{"type":"size","label":"Largeur Cellule","value":"1cm"},"quartHeight":{"type":"size","label":"Hauteur Cellule","value":"1cm"}}},"leadActor":{"type":"layout/stack","key":"root","children":[{"type":"layout/stack","key":"header","children":[{"type":"layout/stack","key":"state-container","children":[{"type":"display/html","key":"state","properties":{"marginBottom":"10px","verticalAlignment":"middle"},"additionalDefs":{"index":{"type":"text"},"manual":{"type":"text"}},"bindings":{"properties.toolTip":{"relativeTo":"hebdoSource","fieldName":"state","dataReadMode":"always","source":"redy/wos-relative-variable"},"additionals.index":{"canWrite":true,"relativeTo":"hebdoSource","relativePath":"Index","fieldName":"value","dataReadMode":"always","writeOnChange":true,"source":"redy/wos-relative-variable"},"additionals.manual":{"canWrite":true,"relativeTo":"hebdoSource","relativePath":"Index.Manual","fieldName":"value","dataReadMode":"always","writeOnChange":true,"source":"redy/wos-relative-variable"}},"events":{"onPropertyChanged":["switch (context.propertyPath) {","  case 'additionals.index':","    if(context.utils.isNone(context.newValue)) break;","    context.stage._.index = parseFloat(context.newValue);","    this.stage._.setupState();","    break;","","  case 'additionals.manual':","    if(context.utils.isNone(context.newValue)) break;","    context.stage._.manual = parseFloat(context.newValue);","    this.stage._.setupState();","    break;","}"],"onInit":["this.stage._.setupState = () => {","  if (context.getActor('tab').additionals.isDirty) return;","  context.getActor('switch-manual').properties.value = parseFloat(context.stage._.manual) !== -1;","  if (parseFloat(context.stage._.manual) !== -1) {","    context.getActor('manual-periods').properties.value = context.stage._.manual;","  }","","const option = context.getActor('manual-periods').options.find(o => o.value === parseFloat(context.stage._.index));","  context.getActor('index').properties.content = option ? option.text : '';","};",""]}},{"type":"display/html","key":"index","properties":{"verticalAlignment":"middle","marginRight":"5px"},"bindings":{"properties.visible":"actor#switch-manual@properties.value"},"events":{"properties/visible/binding/onReadTransform":["return !context.value;"]}},{"type":"input/button-list","key":"manual-periods","properties":{"value":"","backgroundColor":"rgba(255, 255, 255, 1)","mode":"secondary","marginRight":"5px"},"bindings":{"properties.visible":"actor#switch-manual@properties.value"},"events":{"onSelected":["context.getActor('tab').additionals.isDirty = true;"]}},{"type":"input/switch-button","key":"switch-manual","properties":{"textTrue":"<i class=\"icon-handdrag\"></i>","textFalse":"Auto","modeTrue":"warning"},"events":{"onSwitched":["if (this.properties.value) {","  context.getActor('manual-periods').properties.value = this.stage._.index || 0;","}","","context.getActor('tab').additionals.isDirty = true;"]}}],"properties":{"horizontalAlignment":"middle","orientation":"horizontal"}},{"type":"layout/stack","key":"actions","children":[{"type":"input/button","key":"submit-button","properties":{"content":"<i class=\"icon-ok\"></i> Valider","marginRight":"5px","mode":"success","outline":true,"enabled":false},"bindings":{"properties.enabled":"actor#tab@additionals.isDirty"},"events":{"onClick":["(async () => {","  context.getActor('d0-source').data = [...context.getActor('tab').actor.querySelectorAll('.day-0 .quart')].map(quart => quart.dataset.v).join('');","  context.getActor('d1-source').data = [...context.getActor('tab').actor.querySelectorAll('.day-1 .quart')].map(quart => quart.dataset.v).join('');","  context.getActor('d2-source').data = [...context.getActor('tab').actor.querySelectorAll('.day-2 .quart')].map(quart => quart.dataset.v).join('');","  context.getActor('d3-source').data = [...context.getActor('tab').actor.querySelectorAll('.day-3 .quart')].map(quart => quart.dataset.v).join('');","  context.getActor('d4-source').data = [...context.getActor('tab').actor.querySelectorAll('.day-4 .quart')].map(quart => quart.dataset.v).join('');","  context.getActor('d5-source').data = [...context.getActor('tab').actor.querySelectorAll('.day-5 .quart')].map(quart => quart.dataset.v).join('');","  context.getActor('d6-source').data = [...context.getActor('tab').actor.querySelectorAll('.day-6 .quart')].map(quart => quart.dataset.v).join('');","","  await context.getActor('d0-source').write();","  await context.getActor('d1-source').write();","  await context.getActor('d2-source').write();","  await context.getActor('d3-source').write();","  await context.getActor('d4-source').write();","  await context.getActor('d5-source').write();","  await context.getActor('d6-source').write();","","  context.getActor('state').additionals.manual = context.getActor('switch-manual').properties.value ? ","  context.getActor('manual-periods').properties.value : -1;","","","  context.getActor('days-source').data = null;","  context.getActor('d0-source').data = null;","  context.getActor('d1-source').data = null;","  context.getActor('d2-source').data = null;","  context.getActor('d3-source').data = null;","  context.getActor('d4-source').data = null;","  context.getActor('d5-source').data = null;","  context.getActor('d6-source').data = null;","  await context.getActor('hebdoSource').request();","  await context.getActor('days-source').request();","  context.getActor('tab').additionals.isDirty = false;","})();"]}},{"type":"input/button","key":"cancel-button","properties":{"content":"<i class=\"icon-{{icon}}\"></i> Annuler","outline":true,"backgroundColor":"rgba(112, 112, 112, 1)","enabled":false},"additionalDefs":{"icon":{"type":"icon"}},"additionals":{"icon":"circledelete"},"bindings":{"properties.enabled":"actor#tab@additionals.isDirty"},"events":{"onClick":["context.getActor('days-source').data = null;","context.getActor('d0-source').data = null;","context.getActor('d1-source').data = null;","context.getActor('d2-source').data = null;","context.getActor('d3-source').data = null;","context.getActor('d4-source').data = null;","context.getActor('d5-source').data = null;","context.getActor('d6-source').data = null;","context.getActor('days-source').request();","context.getActor('tab').additionals.isDirty = false;","","context.stage._.setupState();"]}}],"properties":{"lineHeight":"2em","orientation":"horizontal","opacity":40},"bindings":{"properties.opacity":"actor#tab@additionals.isDirty"},"events":{"properties/opacity/binding/onReadTransform":["return context.value ? 100 : 40;"]}}],"properties":{"orientation":"horizontal","marginRight":"5px","marginLeft":"5px","marginBottom":"5px"}},{"type":"layout/stack","key":"table","properties":{"overflowX":"auto"},"children":[{"type":"display/html","key":"tab","properties":{"content":"<style>\n  .hebdo .hours {\n    display: grid;\n    grid-template-columns: var(--first-column-width) repeat(24, calc(var(--quart-width) * 4));\n  }\n\n  .hebdo .day {\n    display: grid;\n    grid-template-columns: var(--first-column-width) repeat(96, var(--quart-width));\n    height: var(--quart-height);\n  }\n\n  .hebdo .hour,\n  .hebdo .quart,\n  .hebdo .day :first-child {\n    border: solid currentColor;\n    border-width: 1px 0 0 1px;\n    text-align: center;\n    line-height: 2.5em;\n    user-select: none;\n  }\n\n  .hebdo .quart {\n    height: var(--quart-height);\n  }\n\n  .hebdo .all {\n    text-align: center;\n    line-height: 2.5em;\n    user-select: none;\n  }\n  \n  .hebdo .is-painting .all i {\n    visibility: visible;\n  }\n\n  .hebdo .all i {\n    visibility: hidden;\n  }\n\n</style>\n<div class=\"hours\">\n  <div class=\"all\"><i class=\"icon-paintrollalt\"></i></div>\n  <div class=\"hour\">00</div>\n  <div class=\"hour\">01</div>\n  <div class=\"hour\">02</div>\n  <div class=\"hour\">03</div>\n  <div class=\"hour\">04</div>\n  <div class=\"hour\">05</div>\n  <div class=\"hour\">06</div>\n  <div class=\"hour\">07</div>\n  <div class=\"hour\">08</div>\n  <div class=\"hour\">09</div>\n  <div class=\"hour\">10</div>\n  <div class=\"hour\">11</div>\n  <div class=\"hour\">12</div>\n  <div class=\"hour\">13</div>\n  <div class=\"hour\">14</div>\n  <div class=\"hour\">15</div>\n  <div class=\"hour\">16</div>\n  <div class=\"hour\">17</div>\n  <div class=\"hour\">18</div>\n  <div class=\"hour\">19</div>\n  <div class=\"hour\">20</div>\n  <div class=\"hour\">21</div>\n  <div class=\"hour\">22</div>\n  <div class=\"hour\">23</div>\n</div>\n<div class=\"day day-0\">\n  <div class=\"title\" data-d=\"0\">Lundi</div>\n</div>\n<div class=\"day day-1\">\n  <div class=\"title\" data-d=\"1\">Mardi</div>\n</div>\n<div class=\"day day-2\">\n  <div class=\"title\" data-d=\"2\">Mercredi</div>\n</div>\n<div class=\"day day-3\">\n  <div class=\"title\" data-d=\"3\">Jeudi</div>\n</div>\n<div class=\"day day-4\">\n  <div class=\"title\" data-d=\"4\">Vendredi</div>\n</div>\n<div class=\"day day-5\">\n  <div class=\"title\" data-d=\"5\">Samedi</div>\n</div>\n<div class=\"day day-6\">\n  <div class=\"title\" data-d=\"6\">Dimanche</div>\n</div>","cursor":"pointer","horizontalAlignment":"middle","borderWidth":"0 1px 1px 0","borderStyle":"solid"},"additionalDefs":{"isDirty":{"type":"boolean"}},"bindings":{"properties.cursor":"actor#period-buttons@properties.value","properties.classNames":"actor#period-buttons@properties.value"},"events":{"onPostInit":["const days = this.actor.querySelectorAll('.day');","const generateQuarts = (d) => {","  let quarts = '';","  for (let h = 0; h <= 23; h++) {","    for (let q = 0; q <= 3; q++) {","      quarts += `<div class=\"quart\" data-d=\"${d}\" data-h=\"${h}\" data-q=\"${q}\"></div>`;","    }","  }","","  return quarts;","}","","days.forEach((day, d) => {","  day.insertAdjacentHTML('beforeend', generateQuarts(d));","});","","","context.stage._.setupQuart = ({ day, quart, value }) => {","  const quartCell = this.actor.querySelector(`.quart[data-d='${day}'][data-h='${parseInt(quart / 4)}'][data-q='${quart % 4}']`);","  quartCell.setAttribute('data-v', value);","  const period = (context.stage._.periods || []).at(value);","  if (period) {","    quartCell.setAttribute('title', period.name);","  }","};","","","const paint = target => {","  const periodButtons = context.getActor('period-buttons');","  if (context.utils.isNone(periodButtons.properties.value)) return;","  if (target.classList.contains('quart')) {","    this.additionals.isDirty = true;","    context.stage._.setupQuart({","      day: parseFloat(target.dataset.d),","      quart: parseFloat(target.dataset.q) + parseFloat(target.dataset.h) * 4,","      value: periodButtons.properties.value,","    });","  }","","  if (target.classList.contains('hour')) {","    this.additionals.isDirty = true;","    for (let day = 0; day <= 6; day++) {","      context.stage._.setupQuart({ day, quart: parseFloat(target.innerHTML) * 4, value: periodButtons.properties.value, });","      context.stage._.setupQuart({ day, quart: parseFloat(target.innerHTML) * 4 + 1, value: periodButtons.properties.value, });","      context.stage._.setupQuart({ day, quart: parseFloat(target.innerHTML) * 4 + 2, value: periodButtons.properties.value, });","      context.stage._.setupQuart({ day, quart: parseFloat(target.innerHTML) * 4 + 3, value: periodButtons.properties.value, });","    }","  }","","  if (target.classList.contains('all') || target.parentElement.classList.contains('all')) {","    this.additionals.isDirty = true;","    for (let day = 0; day <= 6; day++) {","      for (let quart = 0; quart < 24 * 4; quart++) {","        context.stage._.setupQuart({ day, quart, value: periodButtons.properties.value, });","      }","    }","  }","","  if (target.classList.contains('title')) {","    this.additionals.isDirty = true;","    for (let quart = 0; quart < 24 * 4; quart++) {","      context.stage._.setupQuart({ day: parseFloat(target.dataset.d), quart, value: periodButtons.properties.value, });","    }","  }","","};","","","context.stage._.paint = paint;","",""],"onClick":["","context.stage._.paint(context.mouseEvent.target);","","",""],"properties/cursor/binding/onReadTransform":["return context.utils.isNone(context.value) ? 'default' : 'pointer';"],"onDestroy":["document.removeEventListener('mouseup', context.stage._.onMouseup);",""],"onMouseDown":["const onMouseUp = (e) => {","  context.stage._.isCaptured = false;","  document.removeEventListener('mouseup', context.stage._.onMouseUp);","};","","context.stage._.onMouseUp = onMouseUp;","","","context.stage._.isCaptured = true;","document.addEventListener('mouseup', onMouseUp);","","context.stage._.paint(context.mouseEvent.target);",""],"onMouseOver":["if (!context.stage._.isCaptured) return;","context.stage._.paint(context.mouseEvent.target);"],"properties/classNames/binding/onReadTransform":["return context.utils.isEmpty(context.value) ? '' : 'is-painting';"]}},{"type":"display/html","key":"size-style","properties":{"content":"<style>\n  .{{uniqClass}} .hebdo {\n    --first-column-width: 5em;\n    --quart-width: {{quartWidth}};\n  }\n\n  .{{uniqClass}} .hebdo .day {\n    --quart-height: {{quartHeight}};\n  }\n</style>"},"additionalDefs":{"quartWidth":{"type":"size"},"quartHeight":{"type":"size"},"uniqClass":{"type":"text"}},"additionals":{"quartWidth":"1cm","quartHeight":"1cm"},"bindings":{"additionals.quartWidth":"stage@properties.quartWidth","additionals.quartHeight":"stage@properties.quartHeight","additionals.uniqClass":"stage@uniqClass"}}]},{"type":"redy/data-source/resource","key":"hebdoSource","properties":{"autoRefreshDelay":10,"path":":easy.RESS.R00059"},"bindings":{"properties.path":"stage@properties.planningPath"},"events":{"onRequestDone":["(async () => {","","  context.getActor('root').properties.visible = !context.error || context.stage.isInDesigner;","  const store = this.dataStores.redy;","  const utc = await store.loadWosVariable(':System.Clock.UTC');","  const winSum = await store.findWosVariable(':System.Clock.WinSum');","  const gmt = await store.findWosVariable(':System.Clock.GMT');","","  const isSummerTime = d => {","    const winter = moment().startOf('year');","    const summer = moment(winter).add(7, 'months');","    const summerOffset = moment.parseZone(summer).utcOffset();","    const date = moment(d).local();","    const dateOffset = moment.parseZone(date).utcOffset();","    return dateOffset === summerOffset;","  }","","  const now = moment.utc(utc.value * 1000 + moment.utc('2000-01-01T00:00:00Z').valueOf()).add(gmt.value, 'hours');","  if (winSum.value && isSummerTime(now)) {","    now.add(1, 'hours');","  }","","  const day = Math.floor(now.diff(moment(now).startOf('week')) / 24 / 60 / 60 / 1000);","  const hour = Math.floor(now.diff(moment(now).startOf('day')) / 60 / 60 / 1000);","  const quart = Math.floor(now.diff(moment(now).startOf('hour')) / 15 / 60 / 1000);","","  context.getActor('now-style').properties.content = `","<style>","  .${this.stage.uniqClass} .quart[data-d='${day}'][data-h='${hour}'][data-q='${quart}'] {","    // border-color: #444;","    box-shadow: 0 0 0.2cm #444;","    z-index: 1;","    outline: solid yellow 3px;","  }","</style>","  `;","","  // setTimeout(() => {","  //   if (!context.stage._.isScrolledYet) {","  //     const element = context.getActor('tab').actor.querySelector(`.quart[data-d='${day}'][data-h='${hour}'][data-q='${quart}']`);","  //     if (element) {","  //       element.scrollIntoView({ block: \"start\", inline: \"start\" });","  //     }","  //     context.stage._.isScrolledYet = true;","  //   }","  // }, 1000);","","})();"]}},{"type":"redy/data-source/wos-relative-variable","key":"childrenSource","properties":{"dataReadMode":"always","fieldName":"children","relativeTo":"hebdoSource","relativePath":"Index"},"additionalDefs":{"modesNb":{"type":"number"}},"events":{"onDidDataStore":["const daysSoure = context.getActor('days-source');","daysSoure.properties.autoRefresh = false;","const periodVariables = (this.data || []).filter(({ label }) => /P[0-9]/.test(label));","const store = context.dataStores.redy;","(async () => {","","","  const periods = [];","","  for (const periodVariable of periodVariables) {","    const colorVariable = await store.findWosVariable(`${periodVariable.path}.Color`);","    periods.push({","      name: periodVariable.value,","      color: colorVariable.value,","    });","  }","","  this.stage._.periods = periods;","","  const periodToText = period => `<span style=\"display: inline-block; width: 2em; height: 2em; background-color: ${period.color}; vertical-align: middle;\"></span> ${period.name}`;","","  const periodButtons = context.getActor('period-buttons');","  periodButtons.properties.value = null;","  periodButtons.properties.options = JSON.stringify([","    {value: null, text: `<i class=\"icon-remove\"></i>`},","    ...periods.map((period, value) => {","      return {","        value,","        text: `<span style=\"font-size: 1.5em; color: ${period.color}; vertical-align: middle;\"><i class=\"icon-paintrollalt\"></i></span> ${period.name}`,","      };","    })]","  );","","  const manualPeriods = context.getActor('manual-periods');","  manualPeriods.properties.options = JSON.stringify(","    periods.map((period, value) => {","      return {","        value,","        text: periodToText(period),","      };","    })","  );","","  context.stage._.setupState();","","  const quartStyle = context.getActor('quart-style');","  const styleTxt = periods.map((period, value) => `","<style>","  .${this.stage.uniqClass} .quart[data-v='${value}'] {","    background-color: ${period.color};","  }","</style>","`).join('\\n\\n');","  quartStyle.properties.content = styleTxt;","","  daysSoure.properties.autoRefresh = true;","","})();","",""]}},{"type":"redy/data-source/resource","key":"days-source","properties":{"autoRefreshDelay":10,"path":":easy.RESS.R00059","mode":"relative"},"bindings":{"properties.path":"stage@properties.planningPath"}},{"type":"layout/stack","key":"buttons","children":[{"type":"input/button-list","key":"period-buttons","properties":{"value":"","backgroundColor":"rgba(255, 255, 255, 1)","mode":"secondary","horizontalAlignment":"middle"}}],"properties":{"marginTop":"10px"}},{"type":"display/html","key":"quart-style"},{"type":"display/html","key":"now-style"},{"type":"display/html","key":"paint-style","properties":{"content":"<style>\n  .{{uniqClass}} .hebdo .is-painting .all,\n  .{{uniqClass}} .hebdo .is-painting .hour:hover,\n  .{{uniqClass}} .hebdo .is-painting .quart:hover,\n  .{{uniqClass}} .hebdo .is-painting .day :first-child:hover {\n    background-color: {{periodColor}};\n  }\n</style>"},"additionalDefs":{"periodColor":{"type":"color"},"uniqClass":{"type":"text"}},"bindings":{"additionals.periodColor":"actor#period-buttons@properties.value","additionals.uniqClass":"stage@uniqClass"},"events":{"additionals/periodColor/binding/onReadTransform":["if (context.utils.isEmpty(context.value)) return 'transparent';","const period = (context.stage._.periods || [])[context.value];","return period ? period.color : 'transparent';"]}},{"type":"redy/data-source/wos-relative-variable","key":"d0-source","properties":{"dataReadMode":"always","relativePath":"Index.Monday","fieldName":"value","relativeTo":"days-source"},"events":{"onDidDataStore":["if(context.getActor('tab').additionals.isDirty) return;","const quarts = [...(context.data || '')].map(parseFloat);","quarts.forEach((value, quart) => context.stage._.setupQuart({day: 0, quart, value}));"]}},{"type":"redy/data-source/wos-relative-variable","key":"d1-source","properties":{"dataReadMode":"always","relativePath":"Index.Tuesday","fieldName":"value","relativeTo":"days-source"},"events":{"onDidDataStore":["if(context.getActor('tab').additionals.isDirty) return;","const quarts = [...(context.data || '')].map(parseFloat);","quarts.forEach((value, quart) => context.stage._.setupQuart({day: 1, quart, value}));"]}},{"type":"redy/data-source/wos-relative-variable","key":"d2-source","properties":{"dataReadMode":"always","relativePath":"Index.Wednesday","fieldName":"value","relativeTo":"days-source"},"events":{"onDidDataStore":["if(context.getActor('tab').additionals.isDirty) return;","const quarts = [...(context.data || '')].map(parseFloat);","quarts.forEach((value, quart) => context.stage._.setupQuart({day: 2, quart, value}));"]}},{"type":"redy/data-source/wos-relative-variable","key":"d3-source","properties":{"dataReadMode":"always","relativePath":"Index.Thursday","fieldName":"value","relativeTo":"days-source"},"events":{"onDidDataStore":["if(context.getActor('tab').additionals.isDirty) return;","const quarts = [...(context.data || '')].map(parseFloat);","quarts.forEach((value, quart) => context.stage._.setupQuart({day: 3, quart, value}));"]}},{"type":"redy/data-source/wos-relative-variable","key":"d4-source","properties":{"dataReadMode":"always","relativePath":"Index.Friday","fieldName":"value","relativeTo":"days-source"},"events":{"onDidDataStore":["if(context.getActor('tab').additionals.isDirty) return;","const quarts = [...(context.data || '')].map(parseFloat);","quarts.forEach((value, quart) => context.stage._.setupQuart({day: 4, quart, value}));"]}},{"type":"redy/data-source/wos-relative-variable","key":"d5-source","properties":{"dataReadMode":"always","relativePath":"Index.Saturday","fieldName":"value","relativeTo":"days-source"},"events":{"onDidDataStore":["if(context.getActor('tab').additionals.isDirty) return;","const quarts = [...(context.data || '')].map(parseFloat);","quarts.forEach((value, quart) => context.stage._.setupQuart({day: 5, quart, value}));"]}},{"type":"redy/data-source/wos-relative-variable","key":"d6-source","properties":{"dataReadMode":"always","relativePath":"Index.Sunday","fieldName":"value","relativeTo":"days-source"},"events":{"onDidDataStore":["if(context.getActor('tab').additionals.isDirty) return;","const quarts = [...(context.data || '')].map(parseFloat);","quarts.forEach((value, quart) => context.stage._.setupQuart({day: 6, quart, value}));"]}}],"properties":{"classNames":"hebdo","overflowX":"auto","overflowY":"auto","paddingTop":"10px","paddingBottom":"10px"},"events":{"onInit":["  this.stage._ = {};",""]}}}
witsa / synapps

Probleme affichage période en cours du planning dans SynApps #759
