diff --git a/client/SEAWebClient.html b/client/SEAWebClient.html index a893a81..ffe0fee 100644 --- a/client/SEAWebClient.html +++ b/client/SEAWebClient.html @@ -12,6 +12,7 @@ SEAWebClient + diff --git a/client/components/dates_popup/dates_popup.css b/client/components/dates_popup/dates_popup.css new file mode 100644 index 0000000..cd68d37 --- /dev/null +++ b/client/components/dates_popup/dates_popup.css @@ -0,0 +1,62 @@ +#dates-popup{ + width: 100%; + z-index: 52; + position: absolute; + top: 0; + left : 0; + box-sizing: border-box; +} + +#dates-popup-container{ + width: 250px; + height: fit-content; + border: 2px solid black; + margin: auto; + background-color: white; +} + +#dates-popup-header{ + height: 40px; + display: flex; + border-bottom: 2px solid black; + box-sizing: border-box; +} + +#dates-popup-header span{ + margin-top: auto; + margin-bottom: auto; + margin-left: 10px; +} + +#dates-popup-header img{ + width: 15px; + height: 15px; + margin-left: auto; + margin-right: 10px; + margin-top: auto; + margin-bottom: auto; + cursor: pointer; +} + +#dates-popup-content{ + padding-left: 10px; + padding-right: 10px; + margin-bottom: 10px; +} + +.jump-container{ + padding: 10px; + border-radius: 10px; + border: 2px solid gray; + box-sizing: border-box; + row-gap: 5px; + margin-top: 10px; +} + +.jump-container div:not(:first-child){ + margin-top: 10px; +} + +.jump-button-all, .jump-button-end{ + width: 200px; +} \ No newline at end of file diff --git a/client/components/dates_popup/dates_popup.js b/client/components/dates_popup/dates_popup.js new file mode 100644 index 0000000..6d34c2f --- /dev/null +++ b/client/components/dates_popup/dates_popup.js @@ -0,0 +1,108 @@ +class DatesPopup extends HTMLElement{ + + static END = 0; + static ALL = 1; + static DAY = new Date(24*60*60*1000); + + constructor(goToNowCallback, jumpCallback){ + super(); + this.goToNowCallback = goToNowCallback; + this.jumpCallback = jumpCallback; + } + + getDateTimeInput(){ + let dateInputValue = this.getElementsByClassName("input-date")[0].valueAsDate; + dateInputValue.setHours(0,0,0,0); + let formattedHour = this.getElementsByClassName("input-time")[0].value; + let timeMs = this.convertTimeStringToTimestamp(formattedHour); + return [dateInputValue.getTime(), timeMs]; + } + + doJumpAllCallback(){ + let dateTimeInput = this.getDateTimeInput(); + this.hide(); + this.jumpCallback(dateTimeInput[0], dateTimeInput[1], DatesPopup.ALL); + } + + doJumpEndCallback(){ + let dateTimeInput = this.getDateTimeInput(); + this.hide(); + this.jumpCallback(dateTimeInput[0], dateTimeInput[1], DatesPopup.END); + } + + convertTimeStringToTimestamp(formattedTime){ + let pieces = formattedTime.split(":"); + return Number(pieces[0])*60*60*1000 + Number(pieces[1])*60*1000; + } + + doGoToNowCallback(){ + this.hide(); + console.log(this); + this.goToNowCallback(); + } + + hide(){ + this.style.visibility = "hidden"; + } + + show(){ + this.style.visibility = "visible"; + } + + setInitialDate(){ + let currentDate = new Date(); + let dateInput = this.getElementsByClassName("input-date")[0]; + let dateDayBefore = new Date(currentDate - DatesPopup.DAY); + dateInput.valueAsDate = dateDayBefore; + } + + connectedCallback(){ + this.render(); + this.setInitialDate(); + this.hide(); + this.getElementsByTagName("img")[0].onclick = () => {this.hide();}; + this.getElementsByClassName("go-to-now-button")[0].onclick = () => {this.doGoToNowCallback();}; + this.getElementsByClassName("jump-button-end")[0].onclick = () => {this.doJumpEndCallback();}; + this.getElementsByClassName("jump-button-all")[0].onclick = () => {this.doJumpAllCallback();}; + } + + render(){ + this.innerHTML = ` + +
+
+ +
+ Select the date to jump to + +
+ +
+
+ +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+
+ `; + } +} + +customElements.define("sea-dates-popup", DatesPopup); \ No newline at end of file diff --git a/client/components/menu_popup/menu_popup.css b/client/components/menu_popup/menu_popup.css index f4b8596..c39a243 100644 --- a/client/components/menu_popup/menu_popup.css +++ b/client/components/menu_popup/menu_popup.css @@ -3,7 +3,7 @@ height: fit-content; background-color: white; position: absolute; - z-index: 1; + z-index: 51; border: 2px solid black; } diff --git a/client/components/states_indicator/dates/dates.css b/client/components/states_indicator/dates/dates.css index c5ba240..c32dffe 100644 --- a/client/components/states_indicator/dates/dates.css +++ b/client/components/states_indicator/dates/dates.css @@ -1,4 +1,4 @@ -.dates{ +.date-indicator{ height: 30px; /* For text alignement */ @@ -6,7 +6,7 @@ vertical-align: middle; line-height: 30px; - cursor: default; + cursor: pointer; color: white; } \ No newline at end of file diff --git a/client/components/states_indicator/dates/dates.js b/client/components/states_indicator/dates/dates.js index 7b30ab9..4b08874 100644 --- a/client/components/states_indicator/dates/dates.js +++ b/client/components/states_indicator/dates/dates.js @@ -1,7 +1,8 @@ -class DatesIndicator extends HTMLElement{ - constructor(timestamp){ +class DateIndicator extends HTMLElement{ + constructor(timestamp, goToNowCallback, jumpCallback){ super(); this.formattedDate = this.timestampToString(timestamp); + this.datePopup = new DatesPopup(goToNowCallback, jumpCallback); } dayNumberToName(dayNumber){ @@ -35,21 +36,28 @@ class DatesIndicator extends HTMLElement{ update(timestamp){ this.formattedDate = this.timestampToString(timestamp); - this.render() + this.getElementsByClassName("date-indicator")[0].textContent = this.formattedDate; + } + + showPopup(){ + console.log("clicked"); + this.datePopup.show(); } connectedCallback(){ this.render(); + this.getElementsByClassName("date-indicator")[0].onclick = () => {this.showPopup();}; } render(){ this.innerHTML = ` -
+
${this.formattedDate}
- ` + ` + this.appendChild(this.datePopup); } } -customElements.define("sea-dates-indicator", DatesIndicator) \ No newline at end of file +customElements.define("sea-date-indicator", DateIndicator) \ No newline at end of file diff --git a/client/jsFiles/SEAWebClientGraphics.js b/client/jsFiles/SEAWebClientGraphics.js index 8a245e6..a92b90d 100644 --- a/client/jsFiles/SEAWebClientGraphics.js +++ b/client/jsFiles/SEAWebClientGraphics.js @@ -197,9 +197,16 @@ let dummyCallback = function(){ console.log("Dummy callback called"); } -// Defining keys for global controls +function dummyJumpCallback(dateTimestampMs, timeValueMs, mode){ + console.log("Date is : "); + console.log(dateTimestampMs); + console.log("Time is : "); + console.log(timeValueMs); + console.log("Mode is :"); + console.log(mode); +} -let goToNowKey = "go-to-now-control"; +// Defining keys for global controls let xyKey = "xy-control"; @@ -211,16 +218,10 @@ let globalControls = (function (){ controlBar.id = "control_bar"; panel.appendChild(controlBar); - let goToNowControl = new Control("res/go_to_now_white.png", "res/go_to_now_blocked.png", "Go to now", graphs.gotoNow); - let xyControl = new Control("res/x_zoom_white.png", "res/y_zoom_white.png", "Time<->Y zoom (one graph)", graphs.toggleZoomMode, graphs.toggleZoomMode); - controlBar.appendChild(goToNowControl) - goToNowControl.changeToAlt(); - controlBar.appendChild(new VerticalDivider()); controlBar.appendChild(xyControl); - controlsMap[goToNowKey] = goToNowControl; controlsMap[xyKey] = xyControl; } @@ -242,7 +243,7 @@ let globalIndicators = (function (){ function loadIndicators(panel){ let leftDate = Date.now() - 30*60*1000; - let datesIndicator = new DatesIndicator(leftDate); + let datesIndicator = new DateIndicator(leftDate, () => {graphs.gotoNow();}, dummyJumpCallback); panel.appendChild(datesIndicator); datesIndicator.style.marginLeft = "auto"; @@ -265,7 +266,7 @@ let globalIndicators = (function (){ function loadGraphicsMenu(panel){ let menuGraphicsPopup = new MenuPopup(); - let removeCursorHelpEntry = new HelpEntry("How to remove the cursor", "You cam double click/tap on any graph."); + let removeCursorHelpEntry = new HelpEntry("How to remove the cursor", "You can double click/tap on any graph."); menuGraphicsPopup.addEntry(removeCursorHelpEntry); let graphicsMenuControl = new Control("res/menu_white.png", "res/menu_white.png", "Menu", () => {menuGraphicsPopup.show()}); @@ -402,10 +403,12 @@ let graphs = (function (){ } if (liveMode && cursorLinePos === null) // gotoNowElm.innerHTML = ''; - globalControls.getControlsMap()[goToNowKey].changeToAlt(); + // globalControls.getControlsMap()[goToNowKey].changeToAlt(); + console.log("Need to change to nothing"); else // gotoNowElm.innerHTML = 'go to now'; - globalControls.getControlsMap()[goToNowKey].changeToMain(); + // globalControls.getControlsMap()[goToNowKey].changeToMain(); + console.log("Need to change to seen"); } /** diff --git a/seaweb.py b/seaweb.py index 42d7b21..ce40f82 100755 --- a/seaweb.py +++ b/seaweb.py @@ -149,6 +149,7 @@ def subdir_test_file(file): resp = flask.send_file("client/test/"+file, mimetype=guess_mimetype(file)) return resp +@app.route('/components/dates_popup/') @app.route('/components/menu_popup/') @app.route('/components/help_popup/') @app.route('/components/help_entry/')