openmct/platform/commonUI/general/res/templates/controls/time-controller.html

<!--

NOTES

Ticks:
The thinking is to divide whatever the current time span is by 5,
and assign values accordingly to 5 statically-positioned ticks. So the tick x-position is a static percentage
of the total width available, and the labels change dynamically. This is consistent
with our current approach to the time axis of plots.
I'm keeping the number of ticks low so that when the view portal gets narrow,
the tick labels won't collide with each other. For extra credit, add/remove ticks as the user resizes the view area.
Note: this eval needs to be based on the whatever is containing the
time-controller component, not the whole browser window.

Range indicator and slider knobs:
The left and right properties used in .slider .range-holder and  the .knobs are
CSS offsets from the left and right of their respective containers. You
may want or need to calculate those positions as pure offsets from the start datetime
(or left, as it were) and set them as left properties. No problem if so, but
we'll need to tweak the CSS tiny bit to get the center of the knobs to line up
properly on the range left and right bounds.

-->

<div class="l-time-controller" ng-controller="TimeConductorController">
    <div class="l-time-range-inputs-holder">
        Start: <input type="textfield"
                      placeholder="YYYY-MM-DD HH:mm:ss"
                      ng-model="startOuterDate"/>
        End: <input type="textfield"
                      placeholder="YYYY-MM-DD HH:mm:ss"
                      ng-model="endOuterDate"/>
    </div>

    <div class="l-time-range-slider-holder">
        <div class="l-time-range-slider">
            <div class="slider"
                 mct-resize="spanWidth = bounds.width">
                <div class="slot range-holder">
                    <div class="range"
                         mct-drag-down="startMiddleDrag()"
                         mct-drag="middleDrag(delta[0])"
                         ng-style="{ left: startInnerPct, right: endInnerPct}">
                    </div>
                </div>
                <div class="knob knob-l"
                     mct-drag-down="startLeftDrag()"
                     mct-drag="leftDrag(delta[0])"
                     ng-style="{ left: startInnerPct }">
                    <div class="range-value">{{startInnerText}}</div>
                </div>
                <div class="knob knob-r"
                     mct-drag-down="startRightDrag()"
                     mct-drag="rightDrag(delta[0])"
                     ng-style="{ right: endInnerPct }">
                    <div class="range-value">{{endInnerText}}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="l-time-range-ticks-holder">
        <div class="l-time-range-ticks">
            <div
                ng-repeat="tick in ticks"
                ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
                class="tick tick-x"
                >
                <span class="l-time-range-tick-label">{{tick}}</span>
            </div>
        </div>
    </div>
</div>