Closed Synfactory closed 2 days ago
Bonjour, le décalage d'une journée est apparu avec le temps ? Un rafraichissement de la synapp le fait disparaitre ?
Salut Manu ! A priori, le problème est apparu dès que l'on a passé minuit. C'est revenu dans l'ordre vers 2h du matin. Au niveau de l'heure ca suit bien mais pas le jour. Pas de problème de rafraîchissement, j'ai relancé la SynApps plusieurs fois et c'était pareil à chaque fois. Je vais essayer de voir ce soir si le problème se répète.
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._ = {};",""]}}}
Merci, je vais faire les modifs. Je te tiens au courant ;)
Salut, est ce que ça a fonctionné avec la nouvelle version ?
hello, désolé pour le délai de retour. J'ai fait les modifs et a priori RAS. :) Merci :)
Super! je vais l'utiliser pour remplacer le composite remarquable. ++
Bonjour, sur la ressource planning dans SynApps, il y a un décalage d'un jour en arriere : Dans SynApps :
Dans la ressource du REDY :
![image](https://github.com/user-attachments/assets/149e4ea1-463c-4406-9b63-555ca016d217)