Fix début/fin (de2f4df9) · Commits · open-source / oscar

front/src/ActivityGant.vue

+54 −10

Original line number	Diff line number	Diff line
		@@ -6,18 +6,37 @@

		<div class="bordered-area">
		<div class="render" style="position: relative; background: rgba(255,255,255,.7)"
		:style="{height: (50 + 80*activities.length) + 'px', width: max - min + 'px'}">
		<header style="background: white" :style="{ }" class="header-year">

		</header>
		:style="{height: (50 + 80activities.length)dayWidth + 'px', width: max - min + 'px'}">

		<div v-for="year in yearheader" :style="{left: year.left+'px'}" class="header-year-div">
		<div v-for="year in yearheader" :style="{left: (dayWidth * year.left)+'px'}" class="header-year-div">
		{{ year.label }}
		<div class="months">
		<span>Jan</span>
		<span>Fev</span>
		<span>Mar</span>
		<span>Avr</span>
		<span>Mai</span>
		<span>Jui</span>
		<span>Jul</span>
		<span>Aou</span>
		<span>Sep</span>
		<span>Oct</span>
		<span>Nov</span>
		<span>Dec</span>
		</div>
		</div>


		<div v-for="(a, i) in activities" class="activity"
		:style="{'top': 80 + (75i)+'px', width: dayWidtha.width+'px', left: a.left+'px'}">
		<div v-for="(a, i) in activities" class="activity" style=""
		:style="{
		'top': 80 + (75*i)+'px',
		width: a.width ? dayWidth*a.width+'px' : 'auto',
		right: a.right !== false ? a.right : 'auto',
		'border-left-style': a.start == '' ? 'dotted' : 'solid',
		'border-right-style': a.end == '' ? 'dotted' : 'solid',
		left: a.left+'px'
		}"
		>
		<div class="activity-label">
		<i class="icon-cube"></i>
		<strong class="acronym">
		@@ -28,7 +47,18 @@
		</em>
		<small v-if="a.type">({{ a.type }})</small>
		</div>
		<div class="milestone" v-for="m in a.milestones" :style="{left: m.left+'px', bottom: 0}">
		<div class="date-start-end">
		<small class="date-start" v-if="a.start">
		<i class="icon-angle-left"></i>
		{{ a.start \| datation }}
		</small>
		<small class="date-end" v-if="a.end">
		{{ a.end \| datation }}
		<i class="icon-angle-right"></i>
		</small>
		</div>

		<div class="milestone" v-for="m in a.milestones" :style="{left: (m.left*dayWidth)+'px', bottom: 0}">
		<i class="icon-calendar"></i>
		<strong>
		{{ m.label }}
		@@ -78,7 +108,7 @@ export default {
		let start = parseInt(this.min_date.substring(0, 4));
		let end = parseInt(this.max_date.substring(0, 4));
		let left = 0;
		for (let i = start; i < end; i++) {
		for (let i = start; i <= end; i++) {
		if (i != start) {
		let d = (new Date(i + '-01-01')).getTime() / 1000 / 60 / 60 / 24;
		left = d - this.min;
		@@ -86,6 +116,10 @@ export default {
		out.push({label: i, left: left});
		}
		return out;
		},
		todayLeft(){
		let d = (new Date().getTime() / 1000 / 60 / 60 / 24);
		return d - this.min;
		}
		},

		@@ -110,8 +144,18 @@ export default {
		let start = activity.start_time - this.min;
		let end = activity.end_time - this.min;

		activity.left = start;
		activity.left = activity.start_time ? start : 0;
		activity.width = (end - start);
		activity.right = false;

		if( !activity.end ){
		console.log("PAS DE FIN DEFINI");
		activity.right = 0;
		}
		if( !activity.start ){
		activity.left = 0;
		}


		activity.milestones.forEach(milestone => {
		milestone.left = milestone.date_time - this.min - start;

install/demo/activity.json

+2 −2

Original line number	Diff line number	Diff line
		@@ -5,8 +5,8 @@
		"projectlabel": "Théorie de la relativité",
		"description": "Description le d'activité 1",
		"label": "Exemple d'activité 1",
		"datestart": "",
		"dateend": "",
		"datestart": "2014-01-01",
		"dateend": "2023-03-31",
		"datesigned": "2017-06-01",
		"pfi": "99PFI1234",
		"status": 101,

module/Oscar/view/oscar/project-grant/gant.phtml

+43 −3

Original line number	Diff line number	Diff line
		@@ -8,13 +8,15 @@
		?>
		<style>
		.bordered-area {
		border: solid #0a3783 4px;
		border: solid #AAA 1px;
		background: white;
		padding: 1em;
		overflow: scroll;
		box-shadow: inset -.5em .5em 1em rgba(0,0,0,.1);
		}
		.activity {
		min-height: 50px;
		background: rgba(124, 181, 198, .7);
		background: rgba(124, 181, 198, .5);
		border: thin solid rgb(20, 34, 45);
		border-left-width: 4px;
		border-right-width: 4px;
		@@ -22,7 +24,34 @@
		position: absolute;
		}

		.activity:hover {
		background: rgba(124, 181, 198, .8);
		}
		.activity:hover .milestone {
		opacity: 1;
		}

		.date-start-end {
		position: relative;
		border-top: dotted rgba(255,255,255,.75) thin;
		overflow: hidden;
		height: 1.2em;
		font-size: .8em;
		}
		.date-start-end .date-end {
		position: absolute;
		right: 0;
		}
		.date-start-end .date-start {
		position: absolute;
		left: 0;
		}

		.activity-label {
		white-space: nowrap;
		}
		.milestone {
		opacity: .5;
		position: absolute;
		border-left: 2px dotted rgba(20, 34, 45, .7);
		min-height: 70px;
		@@ -43,8 +72,19 @@
		font-weight: bold;
		color: #BBB;
		}
		.months {
		display: flex;
		flex: 0 1;
		flex-flow: nowrap;
		justify-items: center;
		}
		.months span {
		border-left: dashed #777777 thin;
		font-weight: 100;
		color: #BBB;
		}
		</style>
		<div class="container">
		<div class="container-fluid">
		<div id="app"></div>
		<script>
		require(["vue", "vue-resource", "ActivityGant"], function(Vue, VueResource, ActivityGant){

public/js/oscar/dist/ActivityGant.umd.js

+2 −2

Original line number	Diff line number	Diff line
		@@ -139,7 +139,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n// This file is imported into
		/***/ (function(module, __webpack_exports__, __webpack_require__) {

		"use strict";
		eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/*\n node node_modules/.bin/vue-cli-service build --name ActivityGant --dest ../public/js/oscar/dist --no-clean --formats umd,umd-min --target lib src/ActivityGant.vue\n /\nconst months = [\n '',\n 'Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jui', 'Aou', 'Sep', 'Oct', 'Nov', 'Déc'\n]\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n props: {\n url: {\n required: true\n }\n },\n\n data() {\n return {\n activities: [],\n dayWidth: 1,\n min: 0,\n max: 0,\n min_date: '2000-01-01',\n max_date: '2022-12-31',\n }\n },\n\n computed: {\n yearheader() {\n let out = [];\n let start = parseInt(this.min_date.substring(0, 4));\n let end = parseInt(this.max_date.substring(0, 4));\n let left = 0;\n for (let i = start; i < end; i++) {\n if (i != start) {\n let d = (new Date(i + '-01-01')).getTime() / 1000 / 60 / 60 / 24;\n left = d - this.min;\n }\n out.push({label: i, left: left});\n }\n return out;\n }\n },\n\n filters: {\n datation(dateStr) {\n let year = dateStr.substring(0, 4);\n let month = months[parseInt(dateStr.substring(5, 7))];\n return month + ' ' + year;\n }\n },\n\n methods: {\n fetch() {\n this.$http.get(this.url).then(ok => {\n this.min = ok.data.activities.min_time;\n this.max = ok.data.activities.max_time;\n this.min_date = ok.data.activities.min_date_str;\n this.max_date = ok.data.activities.max_date_str;\n\n ok.data.activities.items.forEach(activity => {\n\n let start = activity.start_time - this.min;\n let end = activity.end_time - this.min;\n\n activity.left = start;\n activity.width = (end - start);\n\n activity.milestones.forEach(milestone => {\n milestone.left = milestone.date_time - this.min - start;\n })\n\n if (!start \|\| !end) {\n console.log(\"pas de debut\")\n }\n });\n\n this.activities = ok.data.activities.items;\n });\n }\n },\n\n mounted() {\n this.fetch();\n }\n});\n\n\n//# sourceURL=webpack://ActivityGant/./src/ActivityGant.vue?./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options");
		eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/*\n node node_modules/.bin/vue-cli-service build --name ActivityGant --dest ../public/js/oscar/dist --no-clean --formats umd,umd-min --target lib src/ActivityGant.vue\n /\nconst months = [\n '',\n 'Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun', 'Jui', 'Aou', 'Sep', 'Oct', 'Nov', 'Déc'\n]\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n props: {\n url: {\n required: true\n }\n },\n\n data() {\n return {\n activities: [],\n dayWidth: 1,\n min: 0,\n max: 0,\n min_date: '2000-01-01',\n max_date: '2022-12-31',\n }\n },\n\n computed: {\n yearheader() {\n let out = [];\n let start = parseInt(this.min_date.substring(0, 4));\n let end = parseInt(this.max_date.substring(0, 4));\n let left = 0;\n for (let i = start; i <= end; i++) {\n if (i != start) {\n let d = (new Date(i + '-01-01')).getTime() / 1000 / 60 / 60 / 24;\n left = d - this.min;\n }\n out.push({label: i, left: left});\n }\n return out;\n },\n todayLeft(){\n let d = (new Date().getTime() / 1000 / 60 / 60 / 24);\n return d - this.min;\n }\n },\n\n filters: {\n datation(dateStr) {\n let year = dateStr.substring(0, 4);\n let month = months[parseInt(dateStr.substring(5, 7))];\n return month + ' ' + year;\n }\n },\n\n methods: {\n fetch() {\n this.$http.get(this.url).then(ok => {\n this.min = ok.data.activities.min_time;\n this.max = ok.data.activities.max_time;\n this.min_date = ok.data.activities.min_date_str;\n this.max_date = ok.data.activities.max_date_str;\n\n ok.data.activities.items.forEach(activity => {\n\n let start = activity.start_time - this.min;\n let end = activity.end_time - this.min;\n\n activity.left = activity.start_time ? start : 0;\n activity.width = (end - start);\n activity.right = false;\n\n if( !activity.end ){\n console.log(\"PAS DE FIN DEFINI\");\n activity.right = 0;\n }\n if( !activity.start ){\n activity.left = 0;\n }\n\n\n activity.milestones.forEach(milestone => {\n milestone.left = milestone.date_time - this.min - start;\n })\n\n if (!start \|\| !end) {\n console.log(\"pas de debut\")\n }\n });\n\n this.activities = ok.data.activities.items;\n });\n }\n },\n\n mounted() {\n this.fetch();\n }\n});\n\n\n//# sourceURL=webpack://ActivityGant/./src/ActivityGant.vue?./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options");

		/***/ }),

		@@ -151,7 +151,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n/
		/***/ (function(module, __webpack_exports__, __webpack_require__) {

		"use strict";
		eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) / __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/ harmony export (binding) / __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function () {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c \|\| _h\n return _c(\"div\", { staticClass: \"activity-gant\" }, [\n _c(\"h1\", [_vm._v(\"GANT\")]),\n _vm._v(\" min : \"),\n _c(\"code\", [_vm._v(_vm._s(_vm.min))]),\n _vm._v(\" ~ \" + _vm._s(_vm.min_date)),\n _c(\"br\"),\n _vm._v(\" max : \"),\n _c(\"code\", [_vm._v(_vm._s(_vm.max))]),\n _vm._v(\" ~ \" + _vm._s(_vm.max_date)),\n _c(\"br\"),\n _c(\"div\", { staticClass: \"bordered-area\" }, [\n _c(\n \"div\",\n {\n staticClass: \"render\",\n staticStyle: {\n position: \"relative\",\n background: \"rgba(255,255,255,.7)\",\n },\n style: {\n height: 50 + 80 _vm.activities.length + \"px\",\n width: _vm.max - _vm.min + \"px\",\n },\n },\n [\n _c(\n \"header\",\n {\n staticClass: \"header-year\",\n staticStyle: { background: \"white\" },\n style: {},\n },\n [_vm._v(\" \")]\n ),\n _vm._l(_vm.yearheader, function (year) {\n return _c(\n \"div\",\n {\n staticClass: \"header-year-div\",\n style: { left: year.left + \"px\" },\n },\n [_vm._v(\" \" + _vm._s(year.label) + \" \")]\n )\n }),\n _vm._l(_vm.activities, function (a, i) {\n return _c(\n \"div\",\n {\n staticClass: \"activity\",\n style: {\n top: 80 + 75 * i + \"px\",\n width: _vm.dayWidth * a.width + \"px\",\n left: a.left + \"px\",\n },\n },\n [\n _c(\"div\", { staticClass: \"activity-label\" }, [\n _c(\"i\", { staticClass: \"icon-cube\" }),\n _c(\"strong\", { staticClass: \"acronym\" }, [\n _vm._v(\" \" + _vm._s(a.acronym) + \" \"),\n ]),\n _c(\"em\", [_vm._v(\" \" + _vm._s(a.label) + \" \")]),\n a.type\n ? _c(\"small\", [_vm._v(\"(\" + _vm._s(a.type) + \")\")])\n : _vm._e(),\n ]),\n _vm._l(a.milestones, function (m) {\n return _c(\n \"div\",\n {\n staticClass: \"milestone\",\n style: { left: m.left + \"px\", bottom: 0 },\n },\n [\n _c(\"i\", { staticClass: \"icon-calendar\" }),\n _c(\"strong\", [_vm._v(\" \" + _vm._s(m.label) + \" \")]),\n _c(\"small\", [\n _vm._v(\" \" + _vm._s(_vm._f(\"datation\")(m.date)) + \" \"),\n ]),\n ]\n )\n }),\n ],\n 2\n )\n }),\n ],\n 2\n ),\n ]),\n _c(\"hr\"),\n _c(\"code\", [_vm._v(_vm._s(_vm.url))]),\n _c(\"pre\", [_vm._v(_vm._s(_vm.activities))]),\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://ActivityGant/./src/ActivityGant.vue?./node_modules/cache-loader/dist/cjs.js?%7B%22cacheDirectory%22:%22node_modules/.cache/vue-loader%22,%22cacheIdentifier%22:%224773b33c-vue-loader-template%22%7D!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options");
		eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) / __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/ harmony export (binding) / __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function () {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c \|\| _h\n return _c(\"div\", { staticClass: \"activity-gant\" }, [\n _c(\"h1\", [_vm._v(\"GANT\")]),\n _vm._v(\" min : \"),\n _c(\"code\", [_vm._v(_vm._s(_vm.min))]),\n _vm._v(\" ~ \" + _vm._s(_vm.min_date)),\n _c(\"br\"),\n _vm._v(\" max : \"),\n _c(\"code\", [_vm._v(_vm._s(_vm.max))]),\n _vm._v(\" ~ \" + _vm._s(_vm.max_date)),\n _c(\"br\"),\n _c(\"div\", { staticClass: \"bordered-area\" }, [\n _c(\n \"div\",\n {\n staticClass: \"render\",\n staticStyle: {\n position: \"relative\",\n background: \"rgba(255,255,255,.7)\",\n },\n style: {\n height: (50 + 80 _vm.activities.length) * _vm.dayWidth + \"px\",\n width: _vm.max - _vm.min + \"px\",\n },\n },\n [\n _vm._l(_vm.yearheader, function (year) {\n return _c(\n \"div\",\n {\n staticClass: \"header-year-div\",\n style: { left: _vm.dayWidth * year.left + \"px\" },\n },\n [_vm._v(\" \" + _vm._s(year.label) + \" \"), _vm._m(0, true)]\n )\n }),\n _vm._l(_vm.activities, function (a, i) {\n return _c(\n \"div\",\n {\n staticClass: \"activity\",\n style: {\n top: 80 + 75 * i + \"px\",\n width: a.width ? _vm.dayWidth * a.width + \"px\" : \"auto\",\n right: a.right !== false ? a.right : \"auto\",\n \"border-left-style\": a.start == \"\" ? \"dotted\" : \"solid\",\n \"border-right-style\": a.end == \"\" ? \"dotted\" : \"solid\",\n left: a.left + \"px\",\n },\n },\n [\n _c(\"div\", { staticClass: \"activity-label\" }, [\n _c(\"i\", { staticClass: \"icon-cube\" }),\n _c(\"strong\", { staticClass: \"acronym\" }, [\n _vm._v(\" \" + _vm._s(a.acronym) + \" \"),\n ]),\n _c(\"em\", [_vm._v(\" \" + _vm._s(a.label) + \" \")]),\n a.type\n ? _c(\"small\", [_vm._v(\"(\" + _vm._s(a.type) + \")\")])\n : _vm._e(),\n ]),\n _c(\"div\", { staticClass: \"date-start-end\" }, [\n a.start\n ? _c(\"small\", { staticClass: \"date-start\" }, [\n _c(\"i\", { staticClass: \"icon-angle-left\" }),\n _vm._v(\" \" + _vm._s(_vm._f(\"datation\")(a.start)) + \" \"),\n ])\n : _vm._e(),\n a.end\n ? _c(\"small\", { staticClass: \"date-end\" }, [\n _vm._v(\" \" + _vm._s(_vm._f(\"datation\")(a.end)) + \" \"),\n _c(\"i\", { staticClass: \"icon-angle-right\" }),\n ])\n : _vm._e(),\n ]),\n _vm._l(a.milestones, function (m) {\n return _c(\n \"div\",\n {\n staticClass: \"milestone\",\n style: { left: m.left * _vm.dayWidth + \"px\", bottom: 0 },\n },\n [\n _c(\"i\", { staticClass: \"icon-calendar\" }),\n _c(\"strong\", [_vm._v(\" \" + _vm._s(m.label) + \" \")]),\n _c(\"small\", [\n _vm._v(\" \" + _vm._s(_vm._f(\"datation\")(m.date)) + \" \"),\n ]),\n ]\n )\n }),\n ],\n 2\n )\n }),\n ],\n 2\n ),\n ]),\n _c(\"hr\"),\n _c(\"code\", [_vm._v(_vm._s(_vm.url))]),\n _c(\"pre\", [_vm._v(_vm._s(_vm.activities))]),\n ])\n}\nvar staticRenderFns = [\n function () {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c \|\| _h\n return _c(\"div\", { staticClass: \"months\" }, [\n _c(\"span\", [_vm._v(\"Jan\")]),\n _c(\"span\", [_vm._v(\"Fev\")]),\n _c(\"span\", [_vm._v(\"Mar\")]),\n _c(\"span\", [_vm._v(\"Avr\")]),\n _c(\"span\", [_vm._v(\"Mai\")]),\n _c(\"span\", [_vm._v(\"Jui\")]),\n _c(\"span\", [_vm._v(\"Jul\")]),\n _c(\"span\", [_vm._v(\"Aou\")]),\n _c(\"span\", [_vm._v(\"Sep\")]),\n _c(\"span\", [_vm._v(\"Oct\")]),\n _c(\"span\", [_vm._v(\"Nov\")]),\n _c(\"span\", [_vm._v(\"Dec\")]),\n ])\n },\n]\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://ActivityGant/./src/ActivityGant.vue?./node_modules/cache-loader/dist/cjs.js?%7B%22cacheDirectory%22:%22node_modules/.cache/vue-loader%22,%22cacheIdentifier%22:%224773b33c-vue-loader-template%22%7D!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options");

		/***/ }),

public/js/oscar/dist/ActivityGant.umd.min.js

+2 −2

File changed.

Preview size limit exceeded, changes collapsed.