[Plugins] Bring over timeline, clock plugins
WTD-1239
This commit is contained in:
Victor Woeltjen
18
platform/features/timeline/res/templates/activity-gantt.html
Normal file
18
platform/features/timeline/res/templates/activity-gantt.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<div class="t-timeline-gantt l-timeline-gantt s-timeline-gantt"
|
||||
title="{{model.name}}"
|
||||
ng-controller="TimelineGanttController as gantt"
|
||||
ng-style="{
|
||||
left: gantt.left(timespan, parameters.scroll, parameters.toPixels) + 'px',
|
||||
width: gantt.width(timespan, parameters.scroll, parameters.toPixels) + 'px'
|
||||
}">
|
||||
|
||||
<div class="bar">
|
||||
<span class="s-activity-type ui-symbol">
|
||||
{{type.getGlyph()}}
|
||||
</span>
|
||||
<span class="s-title">
|
||||
{{model.name}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,62 @@
|
||||
<div class='form-control complex datetime'>
|
||||
|
||||
<div class='field-hints'>
|
||||
<span class='hint time sm'>Days</span>
|
||||
<span class='hint time sm'>Hours</span>
|
||||
<span class='hint time sm'>Minutes</span>
|
||||
<span class='hint time sm'>Seconds</span>
|
||||
<span class='hint' ng-if="structure.options.length > 0">Time System</span>
|
||||
</div>
|
||||
|
||||
<ng-form name="mctControl">
|
||||
<div class='fields' ng-controller="WARPDateTimeController">
|
||||
<span class='field control time sm'>
|
||||
<input type='text'
|
||||
name='days'
|
||||
min='0'
|
||||
max='9999'
|
||||
integer
|
||||
ng-pattern="/\d+/"
|
||||
ng-model='datetime.days'/>
|
||||
</span>
|
||||
<span class='field control time sm'>
|
||||
<input type='text'
|
||||
name='hour'
|
||||
maxlength='2'
|
||||
min='0'
|
||||
max='23'
|
||||
integer
|
||||
ng-pattern='/\d+/'
|
||||
ng-model="datetime.hours"/>
|
||||
</span>
|
||||
<span class='field control time sm'>
|
||||
<input type='text'
|
||||
name='min'
|
||||
maxlength='2'
|
||||
min='0'
|
||||
max='59'
|
||||
integer
|
||||
ng-pattern='/\d+/'
|
||||
ng-model="datetime.minutes"
|
||||
ng-required='true'/>
|
||||
</span>
|
||||
<span class='field control time sm'>
|
||||
<input type='text'
|
||||
name='sec'
|
||||
maxlength='2'
|
||||
min='0'
|
||||
max='59'
|
||||
integer
|
||||
ng-pattern='/\d+/'
|
||||
ng-model="datetime.seconds"
|
||||
ng-required='true'/>
|
||||
</span>
|
||||
<span ng-if="structure.options.length > 0"
|
||||
class='field control'>
|
||||
SET
|
||||
</span>
|
||||
</div>
|
||||
</ng-form>
|
||||
|
||||
|
||||
</div>
|
||||
13
platform/features/timeline/res/templates/legend-item.html
Normal file
13
platform/features/timeline/res/templates/legend-item.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!-- TO-DO: make legend item color-swatch dynamic -->
|
||||
<span
|
||||
class="legend-item s-legend-item"
|
||||
title="{{ngModel.path}}{{ngModel.domainObject.getModel().name}}"
|
||||
>
|
||||
<span class="color-swatch"
|
||||
ng-style="{ 'background-color': ngModel.color() }">
|
||||
</span>
|
||||
<span class="title-label">
|
||||
<span class="l-parent-path">{{ngModel.path}}</span>
|
||||
<span class="l-leaf-title">{{ngModel.domainObject.getModel().name}}</span>
|
||||
</span>
|
||||
</span>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="l-title s-title">
|
||||
{{parameters.title}}
|
||||
</div>
|
||||
<div class="l-graph-area">
|
||||
<div class="l-labels-holder">
|
||||
<div class="tick-label tick-label-y tick-label-1" style="top: 0;">
|
||||
{{parameters.high}}
|
||||
</div>
|
||||
<div class="tick-label tick-label-y" style="top: 50%; margin-top: -0.5em; height: 1em;">
|
||||
{{parameters.middle}}
|
||||
</div>
|
||||
<div class="tick-label tick-label-y" style="top: auto; bottom: 4px; height: 1em;">
|
||||
{{parameters.low}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<span ng-controller="TimelineGraphController as graphController">
|
||||
<div class="t-graph l-graph" ng-repeat="graph in parameters.graphs">
|
||||
<div class="l-graph-area l-canvas-holder">
|
||||
<mct-chart draw="graph.drawingObject"></mct-chart>
|
||||
</div>
|
||||
<div class="t-graph-labels l-graph-labels">
|
||||
<mct-include key="'timeline-resource-graph-labels'"
|
||||
parameters="graphController.label(graph)"
|
||||
ng-model="graph">
|
||||
</mct-include>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="t-swimlane s-swimlane l-swimlane {{ngModel.activitystate}} {{ngModel.swimlanestate}}"
|
||||
ng-class="{
|
||||
exceeded: ngModel.exceeded(),
|
||||
selected: ngModel.selected(swimlane),
|
||||
'drop-into': ngModel.highlight(),
|
||||
'drop-after': ngModel.highlightBottom()
|
||||
}">
|
||||
<div
|
||||
class="l-cols"
|
||||
ng-controller="TimelineTableController as tabularVal">
|
||||
<span class="align-right l-col l-start">{{tabularVal.niceTime(ngModel.timespan().getStart())}}</span>
|
||||
<span class="align-right l-col l-end">{{tabularVal.niceTime(ngModel.timespan().getEnd())}}</span>
|
||||
<span class="align-right l-col l-duration">{{tabularVal.niceTime(ngModel.timespan().getDuration())}}</span>
|
||||
<span class="l-col l-activity-modes"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,36 @@
|
||||
<div class="t-swimlane s-swimlane l-swimlane {{ngModel.activitystate}} {{ngModel.swimlanestate}}"
|
||||
warp-swimlane-drop="ngModel"
|
||||
ng-class="{
|
||||
exceeded: ngModel.exceeded(),
|
||||
selected: ngModel.selected(swimlane),
|
||||
'drop-into': ngModel.highlight(),
|
||||
'drop-after': ngModel.highlightBottom()
|
||||
}">
|
||||
<div class="l-cols">
|
||||
<span class="l-col l-col-icon l-plot-resource"
|
||||
ng-click="ngModel.toggleGraph()">
|
||||
<span class="ui-symbol"
|
||||
ng-show="ngModel.graph()">
|
||||
é
|
||||
</span>
|
||||
</span>
|
||||
<span class="l-col l-col-icon l-link">
|
||||
<a class="ui-symbol"
|
||||
target="_blank"
|
||||
ng-href="{{ngModel.link()}}"
|
||||
ng-if="ngModel.link().length > 0"
|
||||
title="{{ngModel.link()}}"
|
||||
>
|
||||
è
|
||||
</a>
|
||||
</span>
|
||||
<span class="l-col l-title"
|
||||
ng-click="ngModel.select()"
|
||||
ng-style="{ 'margin-left': 15 * ngModel.depth + 'px' }">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="ngModel.domainObject"
|
||||
warp-swimlane-drag="ngModel">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
18
platform/features/timeline/res/templates/ticks.html
Normal file
18
platform/features/timeline/res/templates/ticks.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<div class="t-header l-header s-header"
|
||||
ng-controller="TimelineTickController as tick"
|
||||
ng-style="{ width: parameters.fullWidth + 'px' }">
|
||||
|
||||
<div class="l-header-elem t-labels l-labels">
|
||||
<div class="t-label l-label s-label"
|
||||
ng-repeat="label in tick.labels(parameters.start, parameters.width, parameters.step, parameters.toMillis)"
|
||||
ng-style="{ left: label.left + 'px' }">
|
||||
{{label.text}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="t-ticks l-ticks s-ticks"
|
||||
ng-style="{ 'background-size': parameters.step + 'px 100%' }">
|
||||
</div>
|
||||
<div class="t-ticks s-ticks l-subticks"
|
||||
ng-style="{ 'background-size': (parameters.step / 40) + 'px 100%' }">
|
||||
</div>
|
||||
</div>
|
||||
197
platform/features/timeline/res/templates/timeline.html
Normal file
197
platform/features/timeline/res/templates/timeline.html
Normal file
@@ -0,0 +1,197 @@
|
||||
<div class="s-timeline l-timeline-holder split-layout vertical"
|
||||
ng-controller="TimelineController as timelineController">
|
||||
|
||||
<mct-split-pane anchor="left" class="abs" position="pane.x">
|
||||
<!-- LEFT PANE: TABULAR AND RESOURCE LEGEND AREAS -->
|
||||
<mct-split-pane anchor="bottom"
|
||||
position="pane.y"
|
||||
class="abs horizontal split-pane-component l-timeline-pane l-pane-l t-pane-v"
|
||||
>
|
||||
<!-- TOP PANE TABULAR AREA. ADD CLASS "hidden" FOR INTERIM NO-TABULAR DELIVERY -->
|
||||
<div class="split-pane-component s-timeline-tabular l-timeline-pane t-pane-h l-pane-top">
|
||||
<!-- TABULAR LEFT FIXED AREA -->
|
||||
<div
|
||||
class="t-pane-v l-pane-l l-tabular-l"
|
||||
ng-if="true"
|
||||
>
|
||||
|
||||
<div class="t-header l-header s-header">
|
||||
<div class="l-cols">
|
||||
<span class="l-col l-col-icon l-plot-resource ui-symbol">é</span>
|
||||
<span class="l-col l-col-icon l-col-link ui-symbol">è</span>
|
||||
<span class="l-col l-title">Title</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="t-swimlanes-holder l-swimlanes-holder"
|
||||
mct-scroll-y="scroll.y">
|
||||
<mct-include key="'timeline-tabular-swimlane-cols-tree'"
|
||||
ng-repeat="swimlane in timelineController.swimlanes()"
|
||||
ng-model="swimlane">
|
||||
</mct-include>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TABULAR RIGHT HORZ SCROLLING AREA -->
|
||||
<div
|
||||
class="t-pane-v l-pane-r l-tabular-r"
|
||||
>
|
||||
<div class="l-width">
|
||||
<div class="t-header l-header s-header">
|
||||
<div class="l-cols">
|
||||
<span class="l-col l-start">Start</span>
|
||||
<span class="l-col l-end">End</span>
|
||||
<span class="l-col l-duration">Duration</span>
|
||||
<span class="l-col l-activity-modes">Activity Modes</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="t-swimlanes-holder l-swimlanes-holder"
|
||||
mct-scroll-y="scroll.y">
|
||||
<mct-include key="'timeline-tabular-swimlane-cols-data'"
|
||||
ng-repeat="swimlane in timelineController.swimlanes()"
|
||||
ng-model="swimlane">
|
||||
</mct-include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HORZ SPLITTER -->
|
||||
<mct-splitter></mct-splitter>
|
||||
|
||||
<!-- BOTTOM PANE RESOURCE LEGEND -->
|
||||
<div class="split-pane-component abs l-timeline-pane t-pane-h l-pane-btm s-timeline-resource-legend l-timeline-resource-legend">
|
||||
<div class="l-title s-title">{{ngModel.title}}Resource Graph Legend</div>
|
||||
<div class="l-legend-items legend">
|
||||
<mct-include key="'timeline-legend-item'"
|
||||
ng-repeat="swimlane in timelineController.swimlanes()"
|
||||
ng-model="swimlane"
|
||||
ng-show="swimlane.graph()">
|
||||
</mct-include>
|
||||
</div>
|
||||
</div>
|
||||
</mct-split-pane>
|
||||
|
||||
|
||||
<!-- MAIN VERTICAL SPLITTER -->
|
||||
<mct-splitter></mct-splitter>
|
||||
|
||||
|
||||
<!-- RIGHT PANE: GANTT AND RESOURCE PLOTS -->
|
||||
<span ng-controller="TimelineZoomController as zoomController" class="abs">
|
||||
<mct-split-pane anchor="bottom"
|
||||
position="pane.y"
|
||||
class="abs split-pane-component l-timeline-pane l-pane-r t-pane-v"
|
||||
>
|
||||
|
||||
<!-- TOP PANE GANTT BARS -->
|
||||
<div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt"
|
||||
>
|
||||
<div class="l-hover-btns-holder s-hover-btns-holder t-btns-zoom">
|
||||
<a class="t-btn l-btn s-btn s-icon-btn"
|
||||
ng-click="zoomController.zoom(-1)"
|
||||
ng-show="true"
|
||||
title="Zoom in">
|
||||
<span class="ui-symbol icon zoom-in">X</span>
|
||||
</a>
|
||||
|
||||
<a class="t-btn l-btn s-btn s-icon-btn"
|
||||
ng-click="zoomController.zoom(1)"
|
||||
ng-show="true"
|
||||
title="Zoom out">
|
||||
<span class="ui-symbol icon zoom-out">Y</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div style="overflow: hidden; position: absolute; left: 0; top: 0; right: 0; height: 30px;"
|
||||
mct-scroll-x="scroll.x">
|
||||
<mct-include key="'timeline-ticks'"
|
||||
parameters="{
|
||||
fullWidth: zoomController.toPixels(zoomController.duration()),
|
||||
start: scroll.x,
|
||||
width: scroll.width,
|
||||
step: zoomController.toPixels(zoomController.zoom()),
|
||||
toMillis: zoomController.toMillis
|
||||
}">
|
||||
</mct-include>
|
||||
</div>
|
||||
|
||||
<!-- TO-DO:
|
||||
Make this control y-scroll of both .t-swimlanes-holder elements in TOP PANE TABULAR AREA
|
||||
-->
|
||||
<div class="t-swimlanes-holder l-swimlanes-holder"
|
||||
mct-scroll-x="scroll.x"
|
||||
mct-scroll-y="scroll.y">
|
||||
<div class="l-width-control"
|
||||
ng-style="{ width: timelineController.width(zoomController) + 'px' }">
|
||||
<div class="t-swimlane s-swimlane l-swimlane"
|
||||
ng-repeat="swimlane in timelineController.swimlanes()"
|
||||
ng-class="{
|
||||
exceeded: swimlane.exceeded(),
|
||||
selected: selection.selected(swimlane),
|
||||
'drop-into': swimlane.highlight(),
|
||||
'drop-after': swimlane.highlightBottom()
|
||||
}"
|
||||
ng-click="selection.select(swimlane)"
|
||||
warp-swimlane-drop="swimlane">
|
||||
|
||||
<mct-representation key="'warp.gantt'"
|
||||
mct-object="swimlane.domainObject"
|
||||
parameters="{
|
||||
scroll: scroll,
|
||||
toPixels: zoomController.toPixels
|
||||
}">
|
||||
</mct-representation>
|
||||
|
||||
<span ng-if="selection.selected(swimlane)">
|
||||
<span ng-repeat="handle in timelineController.handles()"
|
||||
ng-style="handle.style(zoomController)"
|
||||
style="position: absolute; top: 0px; bottom: 0px;"
|
||||
class="handle"
|
||||
ng-class="{ start: $index === 0, mid: $index === 1, end: $index > 1 }"
|
||||
mct-drag-down="handle.begin()"
|
||||
mct-drag="handle.drag(delta[0], zoomController); timelineController.refresh()"
|
||||
mct-drag-up="handle.finish()">
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- HORZ SPLITTER -->
|
||||
<mct-splitter></mct-splitter>
|
||||
|
||||
<!-- BOTTOM PANE RESOURCE GRAPHS AND RIGHT PANE HORIZONTAL SCROLL CONTROL -->
|
||||
<div class="split-pane-component l-timeline-resource-graph l-timeline-pane t-pane-h l-pane-btm">
|
||||
|
||||
<div class="l-graphs-holder"
|
||||
mct-resize="scroll.width = bounds.width">
|
||||
|
||||
<!-- TO-DO: Make this control y-scroll of .t-graph-labels-holder -->
|
||||
<div class="t-graphs l-graphs">
|
||||
<mct-include key="'timeline-resource-graphs'"
|
||||
parameters="{
|
||||
origin: zoomController.toMillis(scroll.x),
|
||||
duration: zoomController.toMillis(scroll.width),
|
||||
graphs: timelineController.graphs()
|
||||
}">
|
||||
</mct-include>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- TO-DO: Make this control x-scroll of .t-timeline-gantt -->
|
||||
<div mct-scroll-x="scroll.x"
|
||||
class="t-pane-r-scroll-h-control l-scroll-control s-scroll-control">
|
||||
<div class="l-width-control"
|
||||
ng-style="{ width: timelineController.width(zoomController) + 'px' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mct-split-pane>
|
||||
</span>
|
||||
</mct-split-pane>
|
||||
</div>
|
||||
6
platform/features/timeline/res/templates/values.html
Normal file
6
platform/features/timeline/res/templates/values.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<ul ng-controller="ActivityModeValuesController as controller" class="cols cols-2-ff properties">
|
||||
<li ng-repeat="(key, value) in cost" class="l-row s-row">
|
||||
<span class="col col-100px s-title">{{controller.metadata(key).name}}</span>
|
||||
<span class="col s-value">{{value}} {{controller.metadata(key).units}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
Reference in New Issue
Block a user