diff --git a/css/gc-pview-print.css b/css/gc-pview-print.css new file mode 100644 index 000000000..1fc40e31b --- /dev/null +++ b/css/gc-pview-print.css @@ -0,0 +1,17 @@ +#vitals { + border-color: transparent; +} + +#PatientHeader, #PredictedHeightHeader { + background-color: transparent; + color: #666; +} + +#PaperPredictedHeight { + overflow: inherit; +} + +#RightPaper { + transform-origin: left; + transform: scale(.8,.9); +} diff --git a/css/print.css b/css/print.css index e72f65942..9adebba05 100644 --- a/css/print.css +++ b/css/print.css @@ -66,18 +66,23 @@ h1 { margin: 0; } +#container { + display: inline-block; + text-align: left; + margin: auto; +} + .frame { border: 1px solid #666; display: inline-block; text-align: left; - width: 1000px; + margin:auto; } #header { background: transparent; padding: 0 10px 10px; text-align: left; - width: 1000px; margin: auto; } @@ -110,7 +115,7 @@ svg { #view-parental, #view-table, .timeline { - display: none; + display: block; } .view-clinical #view-clinical, diff --git a/gc-print.html b/gc-print.html new file mode 100644 index 000000000..1828d8537 --- /dev/null +++ b/gc-print.html @@ -0,0 +1,51 @@ + + + + + + Growth Chart Print Preview + + + + + + +
+ +
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/js/gc-app.js b/js/gc-app.js index 9fe01a681..e2de25eeb 100644 --- a/js/gc-app.js +++ b/js/gc-app.js @@ -475,12 +475,90 @@ NS.App.print = function() { if (PRINT_WINDOW === null || PRINT_WINDOW.closed) { - PRINT_WINDOW = window.open("print-charts.html", "printWindow", "resizable=yes,scrollbars=yes,status=yes,top=10,left=10,width=1100,height=800"); + PRINT_WINDOW = window.open("gc-print.html", "printWindow", "resizable=yes,scrollbars=yes,status=yes,top=10,left=10,width=1100,height=800"); } else { PRINT_WINDOW.focus(); PRINT_WINDOW.location.reload(); } }; + /** + * Function to be accessed by the print popup window once the popup UI has loaded. This function updates the UI on the popup + * by populating the graph, table or parent view based on what is selected on the main GC window. + * Why: To resolve the issue mentioned here : https://github.com/smart-on-fhir/growth-chart-app/issues/26 + * @param POPUP_HANDLE window handle sent in by the popup while calling this method on opener. + */ + window.printFunctionalityLoaded = function(POPUP_HANDLE) { + if (POPUP_HANDLE === PRINT_WINDOW) { + GC.Util.translateHTML(PRINT_WINDOW.document); + + $('.patient-name', PRINT_WINDOW.document).text(GC.currentPatient.name); + $('.patient-age', PRINT_WINDOW.document).text(GC.currentPatient.getCurrentAge().toString(GC.chartSettings.timeInterval)); + $('.patient-birth', PRINT_WINDOW.document).text(GC.currentPatient.DOB.toString(GC.chartSettings.dateFormat)); + $('.patient-gender', PRINT_WINDOW.document).text(GC.str("STR_SMART_GENDER_" + GC.currentPatient.gender)); + + if (GC.currentPatient.weeker) { + var weekerStr = GC.str("STR_3006"); + PRINT_WINDOW.document.getElementById("weekerID").style.visibility = "visible"; + PRINT_WINDOW.document.getElementById("weekerValue").innerHTML = GC.currentPatient.weeker + " " + weekerStr; + } else { + PRINT_WINDOW.document.getElementById("weekerID").style.visibility = "hidden"; + } + + var currentAge = GC.currentPatient.getCurrentAge(); + var correctedAge = GC.currentPatient.getCorrectedAge(); + if (correctedAge > currentAge || correctedAge < currentAge) { + PRINT_WINDOW.document.getElementById("correctedAgeID").style.visibility = "visibile"; + PRINT_WINDOW.document.getElementById("corrected-age").innerHTML = correctedAge.toString(GC.chartSettings.timeInterval); + } else { + PRINT_WINDOW.document.getElementById("correctedAgeID").style.visibility = "hidden"; + } + + $("#today", PRINT_WINDOW.document).text(new XDate().toString("ddMMMyyyy HH:MM TT")); + + var chartType = GC.App.getViewType(); + + $("html", PRINT_WINDOW) + .toggleClass("view-clinical", chartType == "graphs" || chartType == "table") + .toggleClass("view-parental", chartType == "parent") + .toggleClass("view-charts", chartType == "graphs") + .toggleClass("view-table", chartType == "table"); + + PRINT_WINDOW.document.title = GC.currentPatient.name + ( + chartType == "graphs" ? " - Charts" : + chartType == "table" ? " - Data" : + chartType == "parent" ? " - Parental View" : + "" + ) + " " + (new XDate().toString("ddMMMyyyy HH-MMTT")); + + if (chartType === 'graphs') { + var mw_TimeLineTop = document.getElementById('timeline-top'); + var mw_TimeLineBottom = document.getElementById('timeline-bottom'); + + var pw_TimeLineTop = PRINT_WINDOW.document.getElementById('timeline-top'); + var pw_TimeLineBottom = PRINT_WINDOW.document.getElementById('timeline-bottom'); + + pw_TimeLineTop.outerHTML = mw_TimeLineTop.outerHTML; + pw_TimeLineBottom.outerHTML = mw_TimeLineBottom.outerHTML; + } + + if (chartType === 'graphs' || chartType === 'parent') { + var mw_Stage = document.getElementById('stage'); + var pw_Stage = PRINT_WINDOW.document.getElementById('stage'); + pw_Stage.outerHTML = mw_Stage.outerHTML; + } + if (chartType === 'parent') { + $('#PatientHeadertexts', PRINT_WINDOW).addClass('heading'); + $('#PatientHeadertexts', PRINT_WINDOW).html(GC.str('STR_177')); + } + + if (chartType === 'table') { + PRINT_WINDOW.document.getElementById('view-table').outerHTML = GC.TableViewForPrint().join(""); + } + } + else { + console.log("Print window instance didnt match."); + } + }; NS.App.getLastDataAge = function() { var out = 0; diff --git a/js/gc-grid-view.js b/js/gc-grid-view.js index e25957a72..7d95afa79 100644 --- a/js/gc-grid-view.js +++ b/js/gc-grid-view.js @@ -480,7 +480,9 @@ } function renderTableViewForPrint(container) { - $(container).empty(); + if (container) { + $(container).empty(); + } var printScheme = [ { @@ -665,7 +667,11 @@ html[j++] = ''; - $(container).html(html.join("")); + if (container){ + $(container).html(html.join("")); + } else { + return html; + } } function getVelocityUnits(baseUnits) { @@ -886,6 +892,10 @@ selectByAge : PRINT_MODE ? $.noop : selectByAge }; + NS.TableViewForPrint = function () { + return renderTableViewForPrint(); + }; + $(function() { if (!PRINT_MODE) { $("#stage").bind("scroll resize", updateDataTableLayout);