Vue Gantt (beta) avant merge

<template>

  <div class="activity-gant">

    <h1>GANT</h1>

    min : <code>{{ min }}</code> ~ {{ min_date }}<br>

    max : <code>{{ max }}</code> ~ {{ max_date }}<br>

    <h1>VUE GANTT (beta)</h1>

    <div class="bordered-area">

      <div class="render" style="position: relative; background: rgba(255,255,255,.7)"

        <div v-for="year in yearheader" :style="{left: (dayWidth * year.left)+'px'}" class="header-year-div">

          {{ year.label }}

          <div class="months">

            <span>Jan</span>

          <div class="months">&nbsp;

<!--            <span>Jan</span>

            <span>Fev</span>

            <span>Mar</span>

            <span>Avr</span>

            <span>Sep</span>

            <span>Oct</span>

            <span>Nov</span>

            <span>Dec</span>

            <span>Dec</span>-->

          </div>

        </div>

        <div v-for="(a, i) in activities" class="activity" style=""

             :style="{

                'top': 80 + (75*i)+'px',

                <input type="hidden" name="ids" value="<?= $exportIds ?>">

                <button type="submit" href="#" class="btn btn-primary btn-xs">

                    <i class="icon-cube"></i>

                    Vue GANT

                    Vue GANTT (beta)

                </button>

            </form>

            <hr />

/***/ (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//\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");

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 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");

/***/ }),

/***/ (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) * _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");

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(\"VUE GANTT (beta)\")]),\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              [\n                _vm._v(\" \" + _vm._s(year.label) + \" \"),\n                _c(\"div\", { staticClass: \"months\" }, [_vm._v(\"  \")]),\n              ]\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  ])\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");

/***/ }),