Browse Source

Merge pull request #521 from monksoftware/10.0-web_timeline

[10.0] [MIG] web_timeline
pull/662/head
Pedro M. Baeza 7 years ago
committed by GitHub
parent
commit
855928f399
  1. 6
      setup/web_timeline/.eggs/README.txt
  2. 1
      setup/web_timeline/odoo/__init__.py
  3. 1
      setup/web_timeline/odoo/addons/__init__.py
  4. 1
      setup/web_timeline/odoo/addons/web_timeline
  5. 1
      setup/web_timeline/odoo_addons/__init__.py
  6. 1
      setup/web_timeline/odoo_addons/web_timeline
  7. 6
      setup/web_timeline/setup.py
  8. 140
      web_timeline/README.rst
  9. 5
      web_timeline/__init__.py
  10. 24
      web_timeline/__manifest__.py
  11. 5
      web_timeline/models/__init__.py
  12. 14
      web_timeline/models/ir_view.py
  13. BIN
      web_timeline/static/description/icon.png
  14. BIN
      web_timeline/static/lib/vis/img/network/acceptDeleteIcon.png
  15. BIN
      web_timeline/static/lib/vis/img/network/addNodeIcon.png
  16. BIN
      web_timeline/static/lib/vis/img/network/backIcon.png
  17. BIN
      web_timeline/static/lib/vis/img/network/connectIcon.png
  18. BIN
      web_timeline/static/lib/vis/img/network/cross.png
  19. BIN
      web_timeline/static/lib/vis/img/network/cross2.png
  20. BIN
      web_timeline/static/lib/vis/img/network/deleteIcon.png
  21. BIN
      web_timeline/static/lib/vis/img/network/downArrow.png
  22. BIN
      web_timeline/static/lib/vis/img/network/editIcon.png
  23. BIN
      web_timeline/static/lib/vis/img/network/leftArrow.png
  24. BIN
      web_timeline/static/lib/vis/img/network/minus.png
  25. BIN
      web_timeline/static/lib/vis/img/network/plus.png
  26. BIN
      web_timeline/static/lib/vis/img/network/rightArrow.png
  27. BIN
      web_timeline/static/lib/vis/img/network/upArrow.png
  28. BIN
      web_timeline/static/lib/vis/img/network/zoomExtends.png
  29. BIN
      web_timeline/static/lib/vis/img/timeline/delete.png
  30. 810
      web_timeline/static/lib/vis/vis.css
  31. 35665
      web_timeline/static/lib/vis/vis.js
  32. 1
      web_timeline/static/lib/vis/vis.map
  33. 1
      web_timeline/static/lib/vis/vis.min.css
  34. 44
      web_timeline/static/lib/vis/vis.min.js
  35. 22
      web_timeline/static/src/css/web_timeline.css
  36. 485
      web_timeline/static/src/js/web_timeline.js
  37. 17
      web_timeline/static/src/xml/web_timeline.xml
  38. 14
      web_timeline/views/web_timeline.xml

6
setup/web_timeline/.eggs/README.txt

@ -0,0 +1,6 @@
This directory contains eggs that were downloaded by setuptools to build, test, and run plug-ins.
This directory caches those eggs to prevent repeated downloads.
However, it is safe to delete this directory.

1
setup/web_timeline/odoo/__init__.py

@ -0,0 +1 @@
__import__('pkg_resources').declare_namespace(__name__)

1
setup/web_timeline/odoo/addons/__init__.py

@ -0,0 +1 @@
__import__('pkg_resources').declare_namespace(__name__)

1
setup/web_timeline/odoo/addons/web_timeline

@ -0,0 +1 @@
../../../../web_timeline

1
setup/web_timeline/odoo_addons/__init__.py

@ -0,0 +1 @@
__import__('pkg_resources').declare_namespace(__name__)

1
setup/web_timeline/odoo_addons/web_timeline

@ -0,0 +1 @@
../../../web_timeline

6
setup/web_timeline/setup.py

@ -0,0 +1,6 @@
import setuptools
setuptools.setup(
setup_requires=['setuptools-odoo'],
odoo_addon=True,
)

140
web_timeline/README.rst

@ -0,0 +1,140 @@
.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
:target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
:alt: License: AGPL-3
=============
Timeline view
=============
Define a new view displaying events in an interactive visualization chart.
The widget is based on the external library
http://visjs.org/timeline_examples.html
Configuration
=============
You need to define a view with the tag <timeline> as base element. These are
the possible attributes for the tag:
* date_start (required): it defines the name of the field of type date that
contains the start of the event.
* date_end (optional): it defines the name of the field of type date that
contains the end of the event.
* date_delay (optional): it defines the name of the field of type date that
contains the end of the event.
* default_group_by (required): it defines the name of the field that will be
taken as default group by when accessing the view or when no other group by
is selected.
* event_open_popup (optional): when set to true, it allows to edit the events
in a popup. If not (default value), the record is edited changing to form
view.
* colors (optional): it allows to set certain specific colors if the expressed
condition (JS syntax) is met.
You also need to declare the view in an action window of the involved model.
Example:
.. code-block:: xml
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<record id="view_task_timeline" model="ir.ui.view">
<field name="model">project.task</field>
<field name="type">timeline</field>
<field name="arch" type="xml">
<timeline date_start="date_start"
date_stop="date_end"
string="Tasks"
default_group_by="user_id"
event_open_popup="true"
colors="#ec7063:user_id == false;#2ecb71:kanban_state=='done';">
</timeline>
</field>
</record>
<record id="project.action_view_task" model="ir.actions.act_window">
<field name="view_mode">kanban,tree,form,calendar,gantt,timeline,graph</field>
</record>
</odoo>
Usage
=====
For accessing the timeline view, you have to click on the button with the clock
icon in the view switcher. The first time you access to it, the timeline window
is zoomed to fit all the current elements, the same as when you perform a
search, filter or group by operation.
You can use the mouse scroll to zoom in or out in the timeline, and click on
any free area and drag for panning the view in that direction.
The records of your model will be shown as rectangles whose widths are the
duration of the event according our definition. You can select them clicking
on this rectangle. You can also use Ctrl or Shift keys for adding discrete
or range selections. Selected records are hightlighted with a different color
(but the difference will be more noticeable depending on the background color).
Once selected, you can drag and move the selected records across the timeline.
When a record is selected, a red cross button appears on the upper left corner
that allows to remove that record. This doesn't work for multiple records
although they were selected.
Records are grouped in different blocks depending on the group by criteria
selected (if none is specified, then the default group by is applied).
Dragging a record from one block to another change the corresponding field to
the value that represents the block. You can also click on the group name to
edit the involved record directly.
Double-click on the record to edit it. Double-click in open area to create a
new record with the group and start date linked to the area you clicked in.
.. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
:alt: Try me on Runbot
:target: https://runbot.odoo-community.org/runbot/162/8.0
Known issues / Roadmap
======================
* Implement support for vis.js timeline range item addition (with Ctrl key
pressed).
* Implement a more efficient way of refreshing timeline after a record update.
Bug Tracker
===========
Bugs are tracked on `GitHub Issues
<https://github.com/OCA/web/issues>`_. In case of trouble, please
check there if your issue has already been reported. If you spotted it first,
help us smashing it by providing a detailed and welcomed feedback.
Credits
=======
Images
------
* Odoo Community Association: `Icon <https://github.com/OCA/maintainer-tools/blob/master/template/module/static/description/icon.svg>`_.
Contributors
------------
* Laurent Mignon <laurent.mignon@acsone.eu>
* Adrien Peiffer <adrien.peiffer@acsone.eu>
* Pedro M. Baeza <pedro.baeza@tecnativa.com>
* Leonardo Donelli <donelli@webmonks.it>
Maintainer
----------
.. image:: https://odoo-community.org/logo.png
:alt: Odoo Community Association
:target: https://odoo-community.org
This module is maintained by the OCA.
OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.
To contribute to this module, please visit https://odoo-community.org.

5
web_timeline/__init__.py

@ -0,0 +1,5 @@
# -*- coding: utf-8 -*-
# Copyright 2016 ACSONE SA/NV (<http://acsone.eu>)
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
from . import models

24
web_timeline/__manifest__.py

@ -0,0 +1,24 @@
# -*- coding: utf-8 -*-
# Copyright 2016 ACSONE SA/NV (<http://acsone.eu>)
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
{
'name': "Web timeline",
'summary': "Interactive visualization chart to show events in time",
"version": "10.0.1.0.0",
'author': 'ACSONE SA/NV, '
'Tecnativa, '
'Monk Software, '
'Odoo Community Association (OCA)',
"category": "web",
"website": "http://acsone.eu",
'depends': [
'web',
],
'qweb': [
'static/src/xml/web_timeline.xml',
],
'data': [
'views/web_timeline.xml',
],
}

5
web_timeline/models/__init__.py

@ -0,0 +1,5 @@
# -*- coding: utf-8 -*-
# © 2016 ACSONE SA/NV (<http://acsone.eu>)
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
from . import ir_view

14
web_timeline/models/ir_view.py

@ -0,0 +1,14 @@
# -*- coding: utf-8 -*-
# Copyright 2016 ACSONE SA/NV (<http://acsone.eu>)
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
from openerp import fields, models
TIMELINE_VIEW = ('timeline', 'Timeline')
class IrUIView(models.Model):
_inherit = 'ir.ui.view'
type = fields.Selection(selection_add=[TIMELINE_VIEW])

BIN
web_timeline/static/description/icon.png

After

Width: 128  |  Height: 128  |  Size: 12 KiB

BIN
web_timeline/static/lib/vis/img/network/acceptDeleteIcon.png

After

Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
web_timeline/static/lib/vis/img/network/addNodeIcon.png

After

Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
web_timeline/static/lib/vis/img/network/backIcon.png

After

Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
web_timeline/static/lib/vis/img/network/connectIcon.png

After

Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
web_timeline/static/lib/vis/img/network/cross.png

After

Width: 7  |  Height: 7  |  Size: 18 KiB

BIN
web_timeline/static/lib/vis/img/network/cross2.png

After

Width: 5  |  Height: 5  |  Size: 17 KiB

BIN
web_timeline/static/lib/vis/img/network/deleteIcon.png

After

Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
web_timeline/static/lib/vis/img/network/downArrow.png

After

Width: 30  |  Height: 30  |  Size: 4.4 KiB

BIN
web_timeline/static/lib/vis/img/network/editIcon.png

After

Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
web_timeline/static/lib/vis/img/network/leftArrow.png

After

Width: 30  |  Height: 30  |  Size: 4.4 KiB

BIN
web_timeline/static/lib/vis/img/network/minus.png

After

Width: 30  |  Height: 30  |  Size: 4.0 KiB

BIN
web_timeline/static/lib/vis/img/network/plus.png

After

Width: 30  |  Height: 30  |  Size: 4.2 KiB

BIN
web_timeline/static/lib/vis/img/network/rightArrow.png

After

Width: 30  |  Height: 30  |  Size: 4.4 KiB

BIN
web_timeline/static/lib/vis/img/network/upArrow.png

After

Width: 30  |  Height: 30  |  Size: 4.4 KiB

BIN
web_timeline/static/lib/vis/img/network/zoomExtends.png

After

Width: 30  |  Height: 30  |  Size: 4.4 KiB

BIN
web_timeline/static/lib/vis/img/timeline/delete.png

After

Width: 16  |  Height: 16  |  Size: 665 B

810
web_timeline/static/lib/vis/vis.css

@ -0,0 +1,810 @@
.vis .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Must be displayed above for example selected Timeline items */
z-index: 10;
}
.vis-active {
box-shadow: 0 0 10px #86d5f8;
}
/* override some bootstrap styles screwing up the timelines css */
.vis [class*="span"] {
min-height: 0;
width: auto;
}
.vis.timeline {
}
.vis.timeline.root {
position: relative;
border: 1px solid #bfbfbf;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .vispanel {
position: absolute;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border: 1px #bfbfbf;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right {
border-top-style: solid;
border-bottom-style: solid;
overflow: hidden;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border-left-style: solid;
border-right-style: solid;
}
.vis.timeline .background {
overflow: hidden;
}
.vis.timeline .vispanel > .content {
position: relative;
}
.vis.timeline .vispanel .shadow {
position: absolute;
width: 100%;
height: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
/* TODO: find a nice way to ensure shadows are drawn on top of items
z-index: 1;
*/
}
.vis.timeline .vispanel .shadow.top {
top: -1px;
left: 0;
}
.vis.timeline .vispanel .shadow.bottom {
bottom: -1px;
left: 0;
}
.vis.timeline .labelset {
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.vis.timeline .labelset .vlabel {
position: relative;
left: 0;
top: 0;
width: 100%;
color: #4d4d4d;
box-sizing: border-box;
}
.vis.timeline .labelset .vlabel {
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labelset .vlabel:last-child {
border-bottom: none;
}
.vis.timeline .labelset .vlabel .inner {
display: inline-block;
padding: 5px;
}
.vis.timeline .labelset .vlabel .inner.hidden {
padding: 0;
}
.vis.timeline .itemset {
position: relative;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .itemset .background,
.vis.timeline .itemset .foreground {
position: absolute;
width: 100%;
height: 100%;
overflow: visible;
}
.vis.timeline .axis {
position: absolute;
width: 100%;
height: 0;
left: 0;
z-index: 1;
}
.vis.timeline .foreground .group {
position: relative;
box-sizing: border-box;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .foreground .group:last-child {
border-bottom: none;
}
.vis.timeline .item {
position: absolute;
color: #1A1A1A;
border-color: #97B0F8;
border-width: 1px;
background-color: #D5DDF6;
display: inline-block;
padding: 5px;
}
.vis.timeline .item.selected {
border-color: #FFC200;
background-color: #FFF785;
/* z-index must be higher than the z-index of custom time bar and current time bar */
z-index: 2;
}
.vis.timeline .editable .item.selected {
cursor: move;
}
.vis.timeline .item.point.selected {
background-color: #FFF785;
}
.vis.timeline .item.box {
text-align: center;
border-style: solid;
border-radius: 2px;
}
.vis.timeline .item.point {
background: none;
}
.vis.timeline .item.dot {
position: absolute;
padding: 0;
border-width: 4px;
border-style: solid;
border-radius: 4px;
}
.vis.timeline .item.range {
border-style: solid;
border-radius: 2px;
box-sizing: border-box;
}
.vis.timeline .item.background {
overflow: hidden;
border: none;
background-color: rgba(213, 221, 246, 0.4);
box-sizing: border-box;
padding: 0;
margin: 0;
}
.vis.timeline .item.range .content {
position: relative;
display: inline-block;
max-width: 100%;
overflow: hidden;
}
.vis.timeline .item.background .content {
position: absolute;
display: inline-block;
overflow: hidden;
max-width: 100%;
margin: 5px;
}
.vis.timeline .item.line {
padding: 0;
position: absolute;
width: 0;
border-left-width: 1px;
border-left-style: solid;
}
.vis.timeline .item .content {
white-space: nowrap;
overflow: hidden;
}
.vis.timeline .item .delete {
background: url('img/timeline/delete.png') no-repeat top center;
position: absolute;
width: 24px;
height: 24px;
top: 0;
right: -24px;
cursor: pointer;
}
.vis.timeline .item.range .drag-left {
position: absolute;
width: 24px;
max-width: 20%;
height: 100%;
top: 0;
left: -4px;
cursor: w-resize;
}
.vis.timeline .item.range .drag-right {
position: absolute;
width: 24px;
max-width: 20%;
height: 100%;
top: 0;
right: -4px;
cursor: e-resize;
}
.vis.timeline .timeaxis {
position: relative;
overflow: hidden;
}
.vis.timeline .timeaxis.foreground {
top: 0;
left: 0;
width: 100%;
}
.vis.timeline .timeaxis.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vis.timeline .timeaxis .text {
position: absolute;
color: #4d4d4d;
padding: 3px;
white-space: nowrap;
}
.vis.timeline .timeaxis .text.measure {
position: absolute;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
visibility: hidden;
}
.vis.timeline .timeaxis .grid.vertical {
position: absolute;
border-left: 1px solid;
}
.vis.timeline .timeaxis .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .timeaxis .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .currenttime {
background-color: #FF7F6E;
width: 2px;
z-index: 1;
}
.vis.timeline .customtime {
background-color: #6E94FF;
width: 2px;
cursor: move;
z-index: 1;
}
.vis.timeline.root {
/*
-webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out;
*/
}
.vis.timeline .vispanel {
/*
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
*/
}
.vis.timeline .axis {
/*
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
*/
}
/* TODO: get animation working nicely
.vis.timeline .item {
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
}
.vis.timeline .item.line {
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
}
/**/
.vis.timeline .vispanel.background.horizontal .grid.horizontal {
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .vispanel.background.horizontal .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .vispanel.background.horizontal .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .dataaxis .yAxis.major {
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.major.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.minor{
position: absolute;
width: 100%;
color: #bebebe;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.minor.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.title{
position: absolute;
color: #4d4d4d;
white-space: nowrap;
bottom: 20px;
text-align: center;
}
.vis.timeline .dataaxis .yAxis.title.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.title.left {
bottom: 0px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.vis.timeline .dataaxis .yAxis.title.right {
bottom: 0px;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65);
padding: 5px;
border-color: #b3b3b3;
border-style:solid;
border-width: 1px;
box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
}
.vis.timeline .legendText {
/*font-size: 10px;*/
white-space: nowrap;
display: inline-block
}
.vis.timeline .graphGroup0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.vis.timeline .graphGroup1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.vis.timeline .graphGroup2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.vis.timeline .graphGroup3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.vis.timeline .graphGroup4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.vis.timeline .graphGroup5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.vis.timeline .graphGroup6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.vis.timeline .graphGroup7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.vis.timeline .graphGroup8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.vis.timeline .graphGroup9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.vis.timeline .fill {
fill-opacity:0.1;
stroke: none;
}
.vis.timeline .bar {
fill-opacity:0.5;
stroke-width:1px;
}
.vis.timeline .point {
stroke-width:2px;
fill-opacity:1.0;
}
.vis.timeline .legendBackground {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis.timeline .outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis.timeline .iconFill {
fill-opacity:0.3;
stroke: none;
}
div.network-manipulationDiv {
border-width: 0;
border-bottom: 1px;
border-style:solid;
border-color: #d6d9d8;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 30px;
}
div.network-manipulation-editMode {
position:absolute;
left: 0;
top: 15px;
height: 30px;
}
div.network-manipulation-closeDiv {
position:absolute;
right: 0;
top: 0;
width: 30px;
height: 30px;
background-position: 20px 3px;
background-repeat: no-repeat;
background-image: url("img/network/cross.png");
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.network-manipulation-closeDiv:hover {
opacity: 0.6;
}
div.network-manipulationUI {
position:relative;
top:-7px;
font-family: verdana;
font-size: 12px;
-moz-border-radius: 15px;
border-radius: 15px;
display:inline-block;
background-position: 0px 0px;
background-repeat:no-repeat;
height:24px;
margin: 0px 0px 0px 10px;
vertical-align:middle;
cursor: pointer;
padding: 0px 8px 0px 8px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.network-manipulationUI:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
}
div.network-manipulationUI:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
}
div.network-manipulationUI.back {
background-image: url("img/network/backIcon.png");
}
div.network-manipulationUI.none:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default;
}
div.network-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
}
div.network-manipulationUI.none {
padding: 0;
}
div.network-manipulationUI.notification{
margin: 2px;
font-weight: bold;
}
div.network-manipulationUI.add {
background-image: url("img/network/addNodeIcon.png");
}
div.network-manipulationUI.edit {
background-image: url("img/network/editIcon.png");
}
div.network-manipulationUI.edit.editmode {
background-color: #fcfcfc;
border-style:solid;
border-width:1px;
border-color: #cccccc;
}
div.network-manipulationUI.connect {
background-image: url("img/network/connectIcon.png");
}
div.network-manipulationUI.delete {
background-image: url("img/network/deleteIcon.png");
}
/* top right bottom left */
div.network-manipulationLabel {
margin: 0px 0px 0px 23px;
line-height: 25px;
}
div.network-seperatorLine {
display:inline-block;
width:1px;
height:20px;
background-color: #bdbdbd;
margin: 5px 7px 0px 15px;
}
div.network-navigation_wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
div.network-navigation {
width:34px;
height:34px;
-moz-border-radius: 17px;
border-radius: 17px;
position:absolute;
display:inline-block;
background-position: 2px 2px;
background-repeat:no-repeat;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.network-navigation:hover {
box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
}
div.network-navigation:active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
}
div.network-navigation.up {
background-image: url("img/network/upArrow.png");
bottom:50px;
left:55px;
}
div.network-navigation.down {
background-image: url("img/network/downArrow.png");
bottom:10px;
left:55px;
}
div.network-navigation.left {
background-image: url("img/network/leftArrow.png");
bottom:10px;
left:15px;
}
div.network-navigation.right {
background-image: url("img/network/rightArrow.png");
bottom:10px;
left:95px;
}
div.network-navigation.zoomIn {
background-image: url("img/network/plus.png");
bottom:10px;
right:15px;
}
div.network-navigation.zoomOut {
background-image: url("img/network/minus.png");
bottom:10px;
right:55px;
}
div.network-navigation.zoomExtends {
background-image: url("img/network/zoomExtends.png");
bottom:50px;
right:15px;
}
div.network-tooltip {
position: absolute;
visibility: hidden;
padding: 5px;
white-space: nowrap;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid;
box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5);
}

35665
web_timeline/static/lib/vis/vis.js
File diff suppressed because it is too large
View File

1
web_timeline/static/lib/vis/vis.map
File diff suppressed because it is too large
View File

1
web_timeline/static/lib/vis/vis.min.css
File diff suppressed because it is too large
View File

44
web_timeline/static/lib/vis/vis.min.js
File diff suppressed because it is too large
View File

22
web_timeline/static/src/css/web_timeline.css

@ -0,0 +1,22 @@
/* Button style */
.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_timeline:after {
content: "N";
}
/* very light gray background in weekends */
.vis.timeline .timeaxis .grid.saturday,
.vis.timeline .timeaxis .grid.sunday {
background: #DCDCDC;
}
.vis.timeline .item.range .content {
overflow: visible;
}
.oe_chatter_toggle {
padding: 15px;
}
.oe_timeline_view .vlabel .inner:hover{
cursor: pointer;
}

485
web_timeline/static/src/js/web_timeline.js

@ -0,0 +1,485 @@
/* Odoo web_timeline
* Copyright 2015 ACSONE SA/NV
* Copyright 2016 Pedro M. Baeza <pedro.baeza@tecnativa.com>
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
_.str.toBoolElse = function (str, elseValues, trueValues, falseValues) {
var ret = _.str.toBool(str, trueValues, falseValues);
if (_.isUndefined(ret)) {
return elseValues;
}
return ret;
};
odoo.define('web_timeline.TimelineView', function (require) {
"use strict";
var core = require('web.core');
var form_common = require('web.form_common');
var Model = require('web.DataModel');
var time = require('web.time');
var View = require('web.View');
var widgets = require('web_calendar.widgets');
var _t = core._t;
var _lt = core._lt;
function isNullOrUndef(value) {
return _.isUndefined(value) || _.isNull(value);
}
var TimelineView = View.extend({
template: "TimelineView",
display_name: _lt('Timeline'),
icon: 'fa-clock-o',
quick_create_instance: widgets.QuickCreate,
init: function (parent, dataset, view_id, options) {
this.permissions = {};
return this._super.apply(this, arguments);
},
get_perm: function(name){
var self = this;
var promise = self.permissions[name];
if (self.permissions[name]) {
return $.when(self.permissions[name]);
} else {
return new Model(this.dataset.model)
.call("check_access_rights", [name, false])
.then(function (value) {
self.permissions[name] = value;
return value;
});
}
},
// set_default_options: function(options) {
// this._super(options);
// _.defaults(this.options, {
// confirm_on_delete: true
// });
// },
parse_colors: function(){
if(this.fields_view.arch.attrs.colors) {
this.colors = _(this.fields_view.arch.attrs.colors.split(';')).chain().compact().map(function(color_pair) {
var pair = color_pair.split(':'), color = pair[0], expr = pair[1];
var temp = py.parse(py.tokenize(expr));
return {'color': color, 'field': temp.expressions[0].value, 'opt': temp.operators[0], 'value': temp.expressions[1].value};
}).value();
}
},
start: function () {
var self = this;
var attrs = this.fields_view.arch.attrs;
var fv = this.fields_view;
this.parse_colors();
this.$timeline = this.$el.find(".oe_timeline_widget");
this.$(".oe_timeline_button_today").click(
this.proxy(this.on_today_clicked));
this.$(".oe_timeline_button_scale_day").click(
this.proxy(this.on_scale_day_clicked));
this.$(".oe_timeline_button_scale_week").click(
this.proxy(this.on_scale_week_clicked));
this.$(".oe_timeline_button_scale_month").click(
this.proxy(this.on_scale_month_clicked));
this.$(".oe_timeline_button_scale_year").click(
this.proxy(this.on_scale_year_clicked));
this.current_window = {
start: new moment(),
end : new moment().add(24, 'hours')
};
this.$el.addClass(attrs['class']);
this.info_fields = [];
this.mode = attrs.mode;
if (!attrs.date_start) {
throw new Error(_t("Timeline view has not defined 'date_start' attribute."));
}
this.date_start = attrs.date_start;
this.date_stop = attrs.date_stop;
if (!isNullOrUndef(attrs.quick_create_instance)) {
self.quick_create_instance = 'instance.' + attrs.quick_create_instance;
}
// If this field is set ot true, we don't open the event in form
// view, but in a popup with the view_id passed by this parameter
if (isNullOrUndef(attrs.event_open_popup) || !_.str.toBoolElse(attrs.event_open_popup, true)) {
this.open_popup_action = false;
} else {
this.open_popup_action = attrs.event_open_popup;
}
this.fields = fv.fields;
for (var fld = 0; fld < fv.arch.children.length; fld++) {
this.info_fields.push(fv.arch.children[fld].attrs.name);
}
var fields_get = new Model(this.dataset.model)
.call('fields_get')
.then(function (fields) {
self.fields = fields;
});
this._super.apply(this, self);
return $.when(
self.fields_get,
self.get_perm('unlink'),
self.get_perm('write'),
self.get_perm('create')
).then(function() {
self.init_timeline();
$(window).trigger('resize');
self.trigger('timeline_view_loaded', fv);
});
},
init_timeline: function() {
var self = this;
var options = {
groupOrder: self.group_order,
editable: {
// add new items by double tapping
add: self.permissions['create'],
// drag items horizontally
updateTime: self.permissions['write'],
// drag items from one group to another
updateGroup: self.permissions['write'],
// delete an item by tapping the delete button top right
remove: self.permissions['unlink']
},
orientation: 'both',
selectable: true,
showCurrentTime: true,
onAdd: self.on_add,
onMove: self.on_move,
onUpdate: self.on_update,
onRemove: self.on_remove,
};
self.timeline = new vis.Timeline(self.$timeline.empty().get(0));
self.timeline.setOptions(options);
if (self.mode && self['on_scale_' + self.mode + '_clicked']) {
self['on_scale_' + self.mode + '_clicked']();
}
self.timeline.on('click', self.on_click);
},
group_order: function(grp1, grp2) {
// display non grouped elements first
if (grp1.id === -1){
return -1;
}
if (grp2.id === -1){
return +1;
}
return grp1.content - grp2.content;
},
/* Transform Odoo event object to timeline event object */
event_data_transform: function(evt) {
var self = this;
var date_start = new moment();
var date_stop = new moment();
var date_delay = evt[this.date_delay] || 1.0,
all_day = this.all_day ? evt[this.all_day] : false,
res_computed_text = '',
the_title = '',
attendees = [];
if (!all_day) {
date_start = time.auto_str_to_date(evt[this.date_start]);
date_stop = this.date_stop ? time.auto_str_to_date(evt[this.date_stop]) : null;
}
else {
date_start = time.auto_str_to_date(evt[this.date_start].split(' ')[0],'start');
date_stop = this.date_stop ? time.auto_str_to_date(evt[this.date_stop].split(' ')[0],'stop') : null;
}
if (!date_start){
date_start = new moment();
}
if(!date_stop) {
date_stop = moment(date_start).add(date_delay, 'hours').toDate();
}
var group = evt[self.last_group_bys[0]];
if (group){
group = _.first(group);
} else {
group = -1;
}
_.each(self.colors, function(color){
if(eval("'" + evt[color.field] + "' " + color.opt + " '" + color.value + "'"))
self.color = color.color;
});
var r = {
'start': date_start,
'end': date_stop,
'content': evt.__name != undefined ? evt.__name : evt.display_name,
'id': evt.id,
'group': group,
'evt': evt,
'style': 'background-color: ' + self.color + ';'
};
self.color = undefined;
return r;
},
do_search: function (domains, contexts, group_bys) {
var self = this;
self.last_domains = domains;
self.last_contexts = contexts;
// select the group by
var n_group_bys = [];
if (this.fields_view.arch.attrs.default_group_by) {
n_group_bys = this.fields_view.arch.attrs.default_group_by.split(',');
}
if (group_bys.length) {
n_group_bys = group_bys;
}
self.last_group_bys = n_group_bys;
// gather the fields to get
var fields = _.compact(_.map(["date_start", "date_delay", "date_stop", "progress"], function(key) {
return self.fields_view.arch.attrs[key] || '';
}));
fields = _.uniq(fields.concat(_.pluck(this.colors, "field").concat(n_group_bys)));
return $.when(this.has_been_loaded).then(function() {
return self.dataset.read_slice(fields, {
domain: domains,
context: contexts
}).then(function(data) {
return self.on_data_loaded(data, n_group_bys);
});
});
},
reload: function() {
var self = this;
if (this.last_domains !== undefined){
self.current_window = self.timeline.getWindow();
return this.do_search(this.last_domains, this.last_contexts, this.last_group_bys);
}
},
on_data_loaded: function(events, group_bys) {
var self = this;
var ids = _.pluck(events, "id");
return this.dataset.name_get(ids).then(function(names) {
var nevents = _.map(events, function(event) {
return _.extend({__name: _.detect(names, function(name) { return name[0] == event.id; })[1]}, event);
});
return self.on_data_loaded_2(nevents, group_bys);
});
},
on_data_loaded_2: function(events, group_bys) {
var self = this;
var data = [];
var groups = [];
_.each(events, function(event) {
if (event[self.date_start]){
data.push(self.event_data_transform(event));
}
});
// get the groups
var split_groups = function(events, group_bys) {
if (group_bys.length === 0)
return events;
var groups = [];
groups.push({id:-1, content: _t('-')})
_.each(events, function(event) {
var group_name = event[_.first(group_bys)];
if (group_name) {
var group = _.find(groups, function(group) { return _.isEqual(group.id, group_name[0]); });
if (group === undefined) {
group = {id: group_name[0], content: group_name[1]};
groups.push(group);
}
}
});
return groups;
}
var groups = split_groups(events, group_bys);
this.timeline.setGroups(groups);
this.timeline.setItems(data);
this.timeline.fit();
},
do_show: function() {
this.do_push_state({});
return this._super();
},
is_action_enabled: function(action) {
if (action === 'create' && !this.options.creatable) {
return false;
}
return this._super(action);
},
create_completed: function(id) {
var self = this;
this.dataset.ids = this.dataset.ids.concat([id]);
this.dataset.trigger("dataset_changed", id);
this.dataset.read_ids([id], this.fields).done(function(records) {
var new_event = self.event_data_transform(records[0]);
var items = self.timeline.itemsData;
items.add(new_event);
self.timeline.setItems(items);
});
},
on_add: function(item, callback) {
var self = this;
var context = this.dataset.get_context();
// Initialize default values for creation
var default_context = {};
default_context['default_'.concat(this.date_start)] = item.start;
default_context['default_'.concat(this.date_stop)] = moment(item.start).add(1, 'hours').toDate();
if (item.group > 0) {
default_context['default_'.concat(this.last_group_bys[0])] = item.group;
}
context.add(default_context);
// Show popup
var dialog = new form_common.FormViewDialog(this, {
res_model: this.dataset.model,
res_id: null,
context: context,
view_id: +this.open_popup_action
}).open();
dialog.on('create_completed', this, this.create_completed);
return false;
},
write_completed: function(id) {
this.dataset.trigger("dataset_changed", id);
this.current_window = this.timeline.getWindow();
this.reload();
this.timeline.setWindow(this.current_window);
},
on_update: function(item, callback) {
var self = this;
var id = item.evt.id;
var title = item.evt.__name;
if (! this.open_popup_action) {
var index = this.dataset.get_id_index(id);
this.dataset.index = index;
if (this.write_right) {
this.do_switch_view('form', null, { mode: "edit" });
} else {
this.do_switch_view('form', null, { mode: "view" });
}
}
else {
var dialog = new form_common.FormViewDialog(this, {
res_model: this.dataset.model,
res_id: parseInt(id).toString() == id ? parseInt(id) : id,
context: this.dataset.get_context(),
title: title,
view_id: +this.open_popup_action
}).open();
dialog.on('write_completed', this, this.write_completed);
}
return false;
},
on_move: function(item, callback) {
var self = this;
var start = item.start;
var end = item.end;
var group = false;
if (item.group != -1) {
group = item.group;
}
var data = {};
data[self.fields_view.arch.attrs.date_start] =
time.auto_date_to_str(start, self.fields[self.fields_view.arch.attrs.date_start].type);
data[self.fields_view.arch.attrs.date_stop] =
time.auto_date_to_str(end, self.fields[self.fields_view.arch.attrs.date_stop].type);
data[self.fields_view.arch.attrs.default_group_by] = group;
var id = item.evt.id;
this.dataset.write(id, data);
},
on_remove: function(item, callback) {
var self = this;
function do_it() {
return $.when(self.dataset.unlink([item.evt.id])).then(function() {
callback(item);
});
}
if (this.options.confirm_on_delete) {
if (confirm(_t("Are you sure you want to delete this record ?"))) {
return do_it();
}
} else
return do_it();
},
on_click: function(e) {
// handle a click on a group header
if (e.what == 'group-label') {
return this.on_group_click(e);
}
},
on_group_click: function(e) {
if (e.group == -1) {
return;
}
return this.do_action({
type: 'ir.actions.act_window',
res_model: this.fields[this.last_group_bys[0]].relation,
res_id: e.group,
target: 'new',
views: [[false, 'form']]
});
},
scale_current_window: function(factor){
if (this.timeline){
this.current_window = this.timeline.getWindow();
this.current_window.end = moment(this.current_window.start).add(factor, 'hours');
this.timeline.setWindow(this.current_window);
}
},
on_today_clicked: function(){
this.current_window = {
start: new moment(),
end : new moment().add(24, 'hours')
};
if (this.timeline) {
this.timeline.setWindow(this.current_window);
}
},
on_scale_day_clicked: function() {
this.scale_current_window(24);
},
on_scale_week_clicked: function() {
this.scale_current_window(24 * 7);
},
on_scale_month_clicked: function() {
this.scale_current_window(24 * 30);
},
on_scale_year_clicked: function() {
this.scale_current_window(24 * 365);
}
});
core.view_registry.add('timeline', TimelineView);
return TimelineView;
});

17
web_timeline/static/src/xml/web_timeline.xml

@ -0,0 +1,17 @@
<template>
<t t-name="TimelineView">
<div class="oe_timeline_view">
<div class="oe_timeline_buttons">
<button class="btn btn-default btn-sm oe_timeline_button_today">Today</button>
<div class="btn-group btn-sm">
<button class="btn btn-default oe_timeline_button_scale_day">Day</button>
<button class="btn btn-default oe_timeline_button_scale_week">Week</button>
<button class="btn btn-default oe_timeline_button_scale_month">Month</button>
<button class="btn btn-default oe_timeline_button_scale_year">Year</button>
</div>
</div>
<div class="oe_timeline_widget" />
</div>
</t>
</template>

14
web_timeline/views/web_timeline.xml

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets_backend" name="web_timeline assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/web_timeline/static/lib/vis/vis.css"/>
<link rel="stylesheet" href="/web_timeline/static/src/css/web_timeline.css"/>
<script type="text/javascript" src="/web_timeline/static/lib/vis/vis.js"/>
<script type="text/javascript" src="/web_timeline/static/src/js/web_timeline.js"/>
</xpath>
</template>
</odoo>
Loading…
Cancel
Save