Last active
August 29, 2015 14:06
-
-
Save MrTiggr/7f3a59bbb4ad29b59add to your computer and use it in GitHub Desktop.
designer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="import" href="../core-icon-button/core-icon-button.html"> | |
| <link rel="import" href="../core-toolbar/core-toolbar.html"> | |
| <link rel="import" href="../core-header-panel/core-header-panel.html"> | |
| <link rel="import" href="../esri-html5/esri-map.html"> | |
| <link rel="import" href="../core-icons/core-icons.html"> | |
| <link rel="import" href="../core-icons/maps-icons.html"> | |
| <link rel="import" href="../core-icons/av-icons.html"> | |
| <link rel="import" href="../core-icon/core-icon.html"> | |
| <link rel="import" href="../core-input/core-input.html"> | |
| <link rel="import" href="../esri-html5/esri-layer.html"> | |
| <link rel="import" href="../esri-html5/esri-infotemplate.html"> | |
| <link rel="import" href="../esri-html5/esri-clusterlayer.html"> | |
| <link rel="import" href="../esri-html5/esri-scalebar.html"> | |
| <link rel="import" href="../esri-html5/esri-symbols.html"> | |
| <link rel="import" href="../esri-html5/esri-renderers.html"> | |
| <link rel="import" href="../paper-button/paper-button.html"> | |
| <link rel="import" href="../paper-switch/paper-switch.html"> | |
| <link rel="import" href="../paper-checkbox/paper-checkbox.html"> | |
| <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,200italic,300italic" rel="stylesheet" type="text/css"> | |
| <polymer-element name="my-element"> | |
| <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,200italic,300italic" rel="stylesheet" type="text/css"> | |
| <template> | |
| <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,200italic,300italic" rel="stylesheet" type="text/css"> | |
| <style> | |
| :host { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| box-sizing: border-box; | |
| } | |
| #mainContainer{ | |
| overflow-x:hidden; | |
| overflow-y:hidden; | |
| } | |
| #core_header_panel { | |
| width: 100%; | |
| height: 100%; | |
| left: 0px; | |
| top: 0px; | |
| position: absolute; | |
| overflow: hidden; | |
| } | |
| #core_toolbar { | |
| color: rgb(255, 255, 255); | |
| background-color: rgb(14, 26, 38); | |
| } | |
| #core_card { | |
| width: 84px; | |
| height: 100%; | |
| box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; | |
| position: absolute; | |
| z-index: 999; | |
| padding-top: 14px; | |
| opacity: 0.8; | |
| background-color: rgb(8, 38, 65); | |
| overflow:hidden; | |
| } | |
| #section { | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 0px; | |
| left: 0px; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| #img { | |
| height: 55px; | |
| margin: 5px 15px 5px 5px; | |
| } | |
| #div { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #div2, #div3 { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-weight: 300; | |
| color: white; | |
| font-size: 1.25em; | |
| margin-top: 20px; | |
| padding-right: 15px; | |
| padding-left: 15px; | |
| } | |
| #div3 { | |
| color: rgb(0, 141, 176); | |
| } | |
| #esri-geocoder #design_host div#simpleGeocoder { | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| border-bottom-right-radius: 0px; | |
| border-bottom-left-radius: 0px; | |
| } | |
| #esri-geocoder #design_host #search { | |
| left: 105px; | |
| } | |
| #div1 { | |
| width: 0px; | |
| height: 100%; | |
| border-left-width: 1px; | |
| border-left-style: solid; | |
| border-right-color: rgb(72, 72, 72); | |
| border-right-width: 1px; | |
| border-right-style: solid; | |
| border-left-color: black; | |
| opacity: 0.5; | |
| margin-left: 2px; | |
| margin-right: 2px; | |
| background-color: rgb(14, 26, 38); | |
| } | |
| #info_icon, | |
| #locate_icon, | |
| #photo_icon, | |
| #plan_icon{ | |
| width: 55px; | |
| height: 60px; | |
| margin-top: 20px; | |
| margin-bottom: 20px; | |
| cursor: pointer; | |
| } | |
| #pin { | |
| color: rgb(0, 141, 176); | |
| margin-left: 5px; | |
| margin-right: 10px; | |
| } | |
| #search_card { | |
| position: absolute; | |
| top: 15px; | |
| left: 94px; | |
| z-index: 9999; | |
| width: 20em; | |
| height: 35px; | |
| padding-top: 10px; | |
| padding-left: 10px; | |
| margin-bottom: 10px; | |
| background: white; | |
| } | |
| #search_input { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-weight: 200; | |
| color: white; | |
| font-size: 20px; | |
| } | |
| #location_card { | |
| width: 17.2em; | |
| top: 0px; | |
| right: 0px; | |
| box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; | |
| position: absolute; | |
| z-index: 999; | |
| padding-bottom: 16px; | |
| padding-top: 16px; | |
| opacity: 0.8; | |
| color: white; | |
| font-size: 1.5em; | |
| background-color: rgb(72, 72, 72); | |
| } | |
| #place_name { | |
| font-size: 1em; | |
| color: white; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-weight: 300; | |
| display:inline-flex; | |
| } | |
| #side_panel, | |
| #plan_panel, | |
| #user_panel, | |
| #inspectors_panel{ | |
| opacity: 0.98; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| color: white; | |
| width: 26em; | |
| height: 100%; | |
| position: absolute; | |
| z-index: 9999; | |
| right: 0px; | |
| top: 0px; | |
| background: rgb(28, 31, 40); | |
| } | |
| #operation_panel{ | |
| opacity: 0.75; | |
| margin-left:84px; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| color: rgb(0, 141, 176); | |
| height: 16em; | |
| width: 100%; | |
| left:0px; | |
| position: absolute; | |
| z-index: 998; | |
| top: 0px; | |
| background: black; | |
| } | |
| #parkheader,#planheader { | |
| margin: 10px; | |
| } | |
| #placename, #type_label { | |
| font-weight: 200; | |
| margin-left: 5px; | |
| font-size: 1.5em; | |
| } | |
| #type_label { | |
| color: rgb(169, 169, 169); | |
| font-size: 1em; | |
| font-weight: 100; | |
| margin-left: 10px; | |
| } | |
| #last_inspection, #last_inspector, #next_inspection { | |
| width: 100%; | |
| margin-left: 10px; | |
| margin-top: 20px; | |
| margin-bottom: 10px; | |
| } | |
| #last_inspection, #next_inspection { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-size: 1.5em; | |
| font-weight: 300; | |
| color: white; | |
| } | |
| #inspectorname { | |
| margin: 10px; | |
| color: rgb(0, 141, 176); | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-size: 1em; | |
| font-weight: 300; | |
| } | |
| .recent_inspection { | |
| margin-top: 15px; | |
| width:100%; | |
| } | |
| .i_type, .i_date, .i_inspector { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-size: 1em; | |
| color: white; | |
| margin-left: 10px; | |
| font-weight: 300; | |
| } | |
| .i_name { | |
| color: rgb(0, 141, 176); | |
| } | |
| #type_list { | |
| margin-top: 15px; | |
| color: rgb(255, 255, 255); | |
| width: 100%; | |
| opacity: 0.8; | |
| height: 50px; | |
| background-color: black; | |
| } | |
| .type_tab { | |
| text-align: center; | |
| padding-top: 15px; | |
| font-size: 1em; | |
| font-weight: 100; | |
| cursor: pointer; | |
| } | |
| .type_tab:hover { | |
| background-color: rgb(14, 26, 38); | |
| } | |
| .selected_tab { | |
| border: 2px solid rgb(0, 141, 176); | |
| color: rgb(0, 141, 176); | |
| } | |
| #inspection_list, #recent_list, #work_list { | |
| width: 100%; | |
| margin: 15px; | |
| } | |
| .inspection { | |
| margin-top: 10px; | |
| margin-bottom: 10px; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-size: 1.1em; | |
| font-weight: 100; | |
| color: white; | |
| } | |
| .work { | |
| margin-bottom: 5px; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-size: 0.8em; | |
| font-weight: 100; | |
| color: white; | |
| } | |
| .overdue{ | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-size: 0.8; | |
| font-weight: 300; | |
| color: red; | |
| } | |
| .due { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-size: 0.8; | |
| font-weight: 300; | |
| color: orange; | |
| } | |
| .future { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| font-size: 0.8; | |
| font-weight: 300; | |
| color: rgb(0, 141, 176); | |
| } | |
| .inspect_details { | |
| margin-right:60px; | |
| width:18em; | |
| } | |
| #buttons, #act_buttons { | |
| width: 100%; | |
| } | |
| #save_button, #inspect_button, #work_button,#operation_button { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| display: inline-block; | |
| color: white; | |
| width: 8em; | |
| margin-right: 15px; | |
| background-color: rgb(0, 141, 176); | |
| } | |
| #operation_button { | |
| width: 26em; | |
| margin-left: 15px; | |
| } | |
| .avatar-frame{border: 2px solid rgb(0, 141, 176);} | |
| .avatar-frame,.avatar-frame img{ | |
| width: 28px; | |
| height: 28px; | |
| -webkit-border-radius: 20px; /* Saf3+, Chrome */ | |
| border-radius: 20px; /* Opera 10.5, IE 9 */ | |
| /*-moz-border-radius: 20px; Disabled for FF1+ */ | |
| } | |
| .blur { | |
| -webkit-filter: blur(8px) contrast(0.4) brightness(1.4); | |
| -moz-filter: blur(8px) contrast(0.4) brightness(1.4); | |
| -o-filter: blur(8px) contrast(0.4) brightness(1.4); | |
| -ms-filter: blur(8px) contrast(0.4) brightness(1.4); | |
| transition: all 0.5s ease-in-out; | |
| -webkit-transform: translate3d(0,0,0); | |
| } | |
| #search_card { | |
| display: none; | |
| } | |
| #location_card { | |
| display: none; | |
| } | |
| #side_panel{ | |
| display:none; | |
| } | |
| #plan_panel{ | |
| display:none; | |
| } | |
| #inspect_panel { | |
| display:none; | |
| } | |
| #info_panel { | |
| display:none; | |
| } | |
| #user_panel { | |
| display:none; | |
| } | |
| #inspectors_panel { | |
| display:none; | |
| } | |
| #operation_panel { | |
| display:none; | |
| } | |
| #locate_icon,#photo_icon, #info_icon { | |
| display:none; | |
| } | |
| </style> | |
| <core-header-panel mode="standard" id="core_header_panel"> | |
| <core-toolbar id="core_toolbar"> | |
| <div id="div" eleven flex horizontal layout> | |
| <img id="img" src="/pacs/ui/login-logo.png"> | |
| <div id="div1"></div> | |
| <div id="div2">PLANNING</div> | |
| <div id="div1"></div> | |
| <div id="div3">PLAYGROUNDS</div> | |
| </div> | |
| <div id="div1"></div> | |
| <core-icon-button src="/pacs/ui/gps2.png" id="core_icon_button" end end-justified></core-icon-button> | |
| <core-icon-button src="/pacs/ui/online-icon.png" id="core_icon_button" end end-justified></core-icon-button> | |
| <div id="div1"></div> | |
| <core-icon-button src="/pacs/ui/icon-profile.png" id="profile_icon" on-tap="{{ show_profile }}" end end-justified></core-icon-button> | |
| </core-toolbar> | |
| <section id="section"> | |
| <esri-map basemap="none" autoresize zoom="9" id="map" slider="false"> | |
| <core-card id="search_card"> | |
| <div layout horizontal> | |
| <core-icon icon="search" id="search_icon"></core-icon> | |
| <core-input placeholder="Search" id="search_input" flex></core-input> | |
| </div> | |
| </core-card> | |
| <esri-imageservicelayer url="http://actmapi.act.gov.au/actmapi/rest/services/mga/dopm2014mga/ImageServer" id="modisLayer"></esri-imageservicelayer> | |
| <esri-featurelayer url="http://services.arcgis.com/uH2bZ8EU7r86PYdN/arcgis/rest/services/Playground_L1_ACTPG/FeatureServer/3" id="playgrounds"> | |
| <esri-infotemplate title="Playground" id="infoTemplate">${*}</esri-infotemplate> | |
| </esri-featurelayer> | |
| <esri-dynamicmapservicelayer url="http://actmapi.act.gov.au/actmapi/rest/services/mga/road_labels/MapServer" id="labels"></esri-dynamicmapservicelayer> | |
| <esri-clusterlayer url="http://services.arcgis.com/uH2bZ8EU7r86PYdN/arcgis/rest/services/Playground_L1_ACTPG/FeatureServer/3" singlesymbol="{{ $.esriPMS.symbol }}" id="playgroundLocations"> | |
| <esri-infotemplate title="Playground" id="infoTemplate">${*}</esri-infotemplate> | |
| </esri-clusterlayer> | |
| <esri-scalebar id="esri_scalebar"></esri-scalebar> | |
| <esri-picture-marker-symbol url="/pacs/ui/marker-park.png" width="24" height="32" id="esriPMS"> | |
| </esri-picture-marker-symbol> | |
| <esri-simple-line-symbol line_width="5" line_style="STYLE_SOLID" id="esriSLS" color="[255,0,0,0.5]"> | |
| </esri-simple-line-symbol> | |
| <esri-simple-fill-symbol outline="{{ $.esriSLS.symbol }}" id="esriSFS" color="[255,0,0,0.5]"> | |
| </esri-simple-fill-symbol> | |
| <esri-simple-marker-symbol marker_style="STYLE_CIRCLE" id="esriSMS" fill_color="[255,0,0,0.75]"> | |
| </esri-simple-marker-symbol> | |
| <esri-simple-line-symbol line_width="5" line_style="STYLE_SOLID" id="esriSLS_g" color="[0,148,0,0.5]"> | |
| </esri-simple-line-symbol> | |
| <esri-simple-fill-symbol outline="{{ $.esriSLS_g.symbol }}" id="esriSFS_g" color="[0,148,0,0.5]"> | |
| </esri-simple-fill-symbol> | |
| <esri-simple-marker-symbol marker_style="STYLE_CIRCLE" id="esriSMS_g" fill_color="[0,148,0,0.75]"> | |
| </esri-simple-marker-symbol> | |
| <esri-simple-line-symbol line_width="5" line_style="STYLE_SOLID" id="esriSLS_y" color="[255,191,0,0.5]"> | |
| </esri-simple-line-symbol> | |
| <esri-simple-fill-symbol outline="{{ $.esriSLS_y.symbol }}" id="esriSFS_y" color="[255,191,0,0.5]"> | |
| </esri-simple-fill-symbol> | |
| <esri-simple-marker-symbol marker_style="STYLE_CIRCLE" id="esriSMS_y" fill_color="[255,191,0,0.75]"> | |
| </esri-simple-marker-symbol> | |
| <esri-class-break-renderer default_symbol="{{ $.esriPMS.symbol }}" break_field="days_until_inspection" layer="{{ $.playgrounds.layer }}" id="classBreaks"> | |
| <esri-class-break minvalue="-7" maxvalue="-2" label="Class Break 1" symbol="{{ $.esriSFS.symbol }}" id="esri_class_break"></esri-class-break> | |
| <esri-class-break minvalue="-1" maxvalue="1" label="Class Break 2" symbol="{{ $.esriSFS_y.symbol }}" id="esri_class_break2"></esri-class-break> | |
| <esri-class-break minvalue="2" maxvalue="7" label="Class Break 2" symbol="{{ $.esriSFS_g.symbol }}" id="esri_class_break3"></esri-class-break> | |
| </esri-class-break-renderer> | |
| <core-card id="core_card" layout vertical center> | |
| <core-icon src="/pacs/ui/icon-info.png" id="info_icon" on-tap="{{ show_inspection }}"></core-icon> | |
| <core-icon src="/pacs/ui/icon-locate.png" id="locate_icon" on-tap="{{ show_locate }}"></core-icon> | |
| <core-icon src="/pacs/ui/icon-photo.png" id="photo_icon"></core-icon> | |
| <core-icon src="/pacs/ui/icon-warning.png" id="plan_icon" on-tap="{{ show_planner }}"></core-icon> | |
| <div id="div2x" layout vertical center end-justified nine flex> | |
| </div> | |
| </core-card> | |
| <core-card id="location_card" layout horizontal start> | |
| <core-icon icon="maps:place" id="pin"></core-icon> | |
| <div id="place_name">JOHN KNIGHT MEMORIAL PARK</div> | |
| </core-card> | |
| <core-card id="side_panel" layout vertical start> | |
| <div id="parkheader" layout horizontal> | |
| <img src="/pacs/ui/icon-park.png" height="32" width="32"> | |
| <div id="placename" flex>JOHN KNIGHT MEMORIAL PARK</div> | |
| </div> | |
| <div id="info_panel"> | |
| <div id="type_label"> | |
| LAST INSPECTION | |
| </div> | |
| <div id="last_inspection"> | |
| MONDAY JANUARY 1ST 2014 | |
| </div> | |
| <div id="last_inspector" layout horizontal> | |
| <img src="/pacs/ui/icon-profile.png" height="32" width="32"> | |
| <div id="inspectorname" flex>Wayne Lee-Archer</div> | |
| </div> | |
| <div id="type_label"> | |
| NEXT INSPECTION | |
| </div> | |
| <div id="next_inspection"> | |
| <span>MONDAY JANUARY 8TH 2014</span> | |
| <core-icon-button icon="chevron-right" id="core_icon_button" theme="core-dark-theme" on-tap="{{ showInspectionForm }}"></core-icon-button> | |
| </div> | |
| <div id="type_label"> | |
| RECENT ACTIVITIES | |
| </div> | |
| <div id="recent_list" layout vertical> | |
| <div class="recent_inspection" layout horizontal> | |
| <img src="/pacs/ui/icon-clock.png" height="32" width="32"> | |
| <div class="inspect_details" flex layout vertical> | |
| <div class="i_type">SCHEDULED INSPECTION</div> | |
| <div class="i_date">08-01-2014</div> | |
| <div class="i_inspector"> | |
| <span class="i_name">Wayne Lee-Archer</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="recent_inspection" layout horizontal> | |
| <img src="/pacs/ui/icon-clock.png" height="32" width="32"> | |
| <div class="inspect_details" flex layout vertical> | |
| <div class="i_type">SCHEDULED INSPECTION</div> | |
| <div class="i_date">12-12-2013</div> | |
| <div class="i_inspector"> | |
| <span class="i_name">Wayne Lee-Archer</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="recent_inspection" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="32" width="32"> | |
| <div class="inspect_details" flex layout vertical> | |
| <div class="i_type">URGENT INSPECTION</div> | |
| <div class="i_date">19-12-2013</div> | |
| <div class="i_inspector"> | |
| <span class="i_name">Wayne Lee-Archer</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="act_buttons" layout horizontal reverse> | |
| <paper-button label="inspect" raisedbutton icon="add" id="inspect_button" on-tap="{{ showInspectionForm }}"></paper-button> | |
| </div> | |
| </div> | |
| <div id="inspect_panel"> | |
| <div id="type_label"> | |
| NEW INSPECTION TYPE | |
| </div> | |
| <div id="type_list" layout horizontal> | |
| <div class="type_tab selected_tab" flex three>SCHEDULED</div> | |
| <div id="div1"></div> | |
| <div class="type_tab" flex three>AD-HOC</div> | |
| <div id="div1"></div> | |
| <div class="type_tab" flex three>MAINTENANCE</div> | |
| </div> | |
| <div id="inspection_list" layout vertical> | |
| <div class="inspection" layout horizontal> | |
| <div flex ten>Border secure and in good condition?</div> | |
| <paper-switch flex three end></paper-switch> | |
| </div> | |
| <div class="inspection" layout horizontal> | |
| <div flex ten>Softfall raked and free of trip hazards?</div> | |
| <paper-switch flex three end></paper-switch> | |
| </div> | |
| <div class="inspection" layout horizontal> | |
| <div flex ten>Footings covered with softfall?</div> | |
| <paper-switch flex three end></paper-switch> | |
| </div> | |
| <div class="inspection" layout horizontal> | |
| <div flex ten>Softfall free of litter, glass or sharps?</div> | |
| <paper-switch flex three end></paper-switch> | |
| </div> | |
| <div class="inspection" layout horizontal> | |
| <div flex ten>Play area appears free of drainage problems?</div> | |
| <paper-switch flex three end></paper-switch> | |
| </div> | |
| <div class="inspection" layout horizontal> | |
| <div flex ten>Equipment appears safe and in satisfactory condition?</div> | |
| <paper-switch flex three end></paper-switch> | |
| </div> | |
| </div> | |
| <div id="buttons" layout horizontal reverse> | |
| <paper-button label="save" raisedbutton icon="save" id="save_button" end></paper-button> | |
| </div> | |
| </div> | |
| </core-card> | |
| <core-card id="plan_panel" layout vertical start> | |
| <div id="planheader" layout horizontal> | |
| <img src="/pacs/ui/icon-maintence.png" height="32" width="32"> | |
| <div id="placename" flex>OPERATIONS PLAN</div> | |
| </div> | |
| <div id="type_label"> | |
| PLAN OPERATIONS FOR: | |
| </div> | |
| <div id="type_list" layout horizontal> | |
| <div class="type_tab selected_tab" flex three>INSPECTIONS</div> | |
| <div id="div1"></div> | |
| <div class="type_tab" flex three>DEFECTS</div> | |
| </div> | |
| <div id="type_label"> | |
| OVERDUE INSPECTIONS: | |
| </div> | |
| <div id="work_list" layout vertical> | |
| <div class="work overdue" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">JOHN KNIGHT MEMORIAL PARK</div> | |
| <div class="i_date overdue"><strong>5 days overdue</strong></div> | |
| </div> | |
| <paper-checkbox id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| <div class="work overdue" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">MORGAN PLACE - CURTIN</div> | |
| <div class="i_date overdue"><strong>3 days overdue</strong></div> | |
| </div> | |
| <paper-checkbox id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| <div class="work overdue" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">LAWLEY STREET - DEAKIN</div> | |
| <div class="i_date overdue"><strong>3 days overdue</strong></div> | |
| </div> | |
| <paper-checkbox id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| <div class="work overdue" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">WESTERN FORESHORE DISTRICT PARK</div> | |
| <div class="i_date overdue"><strong>2 days overdue</strong></div> | |
| </div> | |
| <paper-checkbox id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| <div class="work overdue" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">GINNINDERRA PENINSULA DISTRICT PARK</div> | |
| <div class="i_date overdue"><strong>2 days overdue</strong></div> | |
| </div> | |
| <paper-checkbox id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| <div class="work overdue" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">LAWLEY STREET 2 - DEAKIN</div> | |
| <div class="i_date overdue"><strong>1 days overdue</strong></div> | |
| </div> | |
| <paper-checkbox id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| </div> | |
| <div id="type_label"> | |
| CURRENT OR SOON: | |
| </div> | |
| <div id="work_list" layout vertical> | |
| <div class="work due" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">JOHN KNIGHT MEMORIAL PARK</div> | |
| <div class="i_date due"><strong>Due Today</strong></div> | |
| </div> | |
| <paper-checkbox id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| <div class="work due" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">MORGAN PLACE - CURTIN</div> | |
| <div class="i_date due"><strong>Due Tomorrow</strong></div> | |
| </div> | |
| <paper-checkbox id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| <div class="work due" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">BLACK MOUNTAIN PENINSULA DISTRICT PARK</div> | |
| <div class="i_date due"><strong>Due Today</strong></div> | |
| </div> | |
| <paper-checkbox id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| <div class="work due" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">LAWLEY STREET 2 - DEAKIN</div> | |
| <div class="i_date due"><strong>Due Tomorrow</strong></div> | |
| </div> | |
| <paper-checkbox id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| </div> | |
| <div id="type_label"> | |
| FUTURE INSPECTIONS: | |
| </div> | |
| <div id="work_list" layout vertical> | |
| <div class="work future" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" one height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">JOHN KNIGHT MEMORIAL PARK</div> | |
| <div class="i_date future">Due in 4 days</div> | |
| </div> | |
| <paper-checkbox flex three id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| <div class="work future" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" one height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">GINNINDERRA PENINSULA DISTRICT PARK</div> | |
| <div class="i_date future">Due in 5 days</div> | |
| </div> | |
| <paper-checkbox flex three id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| <div class="work future" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" one height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">MORGAN PLACE - CURTIN</div> | |
| <div class="i_date future">Due in 7 days</div> | |
| </div> | |
| <paper-checkbox flex three id="paper_checkbox"></paper-checkbox> | |
| </div> | |
| </div> | |
| <div id="buttons" layout horizontal reverse> | |
| <paper-button label="assign" raisedbutton icon="add" id="work_button" end on-tap="{{ showInspectorsForm }}"></paper-button> | |
| </div> | |
| </core-card> | |
| <core-card id="user_panel" layout vertical start> | |
| <div id="planheader" layout horizontal> | |
| <img src="/pacs/ui/icon-profile.png" height="32" width="32"> | |
| <div id="placename" flex>MICHAEL SHORT | PLANNING MANAGER</div> | |
| </div> | |
| <div id="type_label"> | |
| WORK STATUS: | |
| </div> | |
| <div id="type_list" layout horizontal> | |
| <div class="type_tab selected_tab" flex three>INSPECTIONS</div> | |
| <div id="div1"></div> | |
| <div class="type_tab" flex three>OPERATIONS</div> | |
| </div> | |
| <div id="work_list" layout vertical> | |
| <div id="type_label"> | |
| OVERDUE INSPECTIONS: | |
| </div> | |
| <div class="work future" layout horizontal> | |
| <img src="/pacs/ui/icon-urgent.png" one height="28" width="28"> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type overdue">17 UNASSIGNED INSPECTIONS DUE TODAY</div> | |
| <div class="i_date future">Due Today</div> | |
| </div> | |
| <core-icon-button icon="chevron-right" id="core_icon_button" theme="core-dark-theme" on-tap="{{ show_planner }}"></core-icon-button> | |
| </div> | |
| </div> | |
| </core-card> | |
| <core-card id="inspectors_panel" layout vertical start> | |
| <div id="planheader" layout horizontal> | |
| <img src="/pacs/ui/icon-edit.png" height="32" width="32"> | |
| <div id="placename" flex>5 ITEMS TO ASSIGN</div> | |
| </div> | |
| <div id="type_label"> | |
| ASSIGN WORK TO: | |
| </div> | |
| <div id="work_list" layout vertical> | |
| <div class="work future" layout horizontal> | |
| <div class="avatar-frame"> | |
| <img src="https://avatars1.githubusercontent.com/u/6690861?s=140" class="avatar-pic" one height="28" width="28"> | |
| </div> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">FRANCIS CITZEN</div> | |
| <div class="i_date future">Field Inspector - Parks and Playgrounds</div> | |
| </div> | |
| <core-icon-button icon="chevron-right" id="core_icon_button" theme="core-dark-theme"></core-icon-button> | |
| </div> | |
| <div class="work future" layout horizontal> | |
| <div class="avatar-frame"> | |
| <img src="https://avatars3.githubusercontent.com/u/41755?s=140" class="avatar-pic" one height="28" width="28"> | |
| </div> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">MICHAEL SHORT</div> | |
| <div class="i_date future">Planning Manager - Parks and Playgrounds</div> | |
| </div> | |
| <core-icon-button icon="chevron-right" id="core_icon_button" theme="core-dark-theme"></core-icon-button> | |
| </div> | |
| <div class="work future" layout horizontal> | |
| <div class="avatar-frame"> | |
| <img src="https://avatars2.githubusercontent.com/u/170882?s=140" class="avatar-pic" one height="28" width="28"> | |
| </div> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">COLIN CONRAD</div> | |
| <div class="i_date future">Contractor - Mowing Services</div> | |
| </div> | |
| <core-icon-button icon="chevron-right" id="core_icon_button" theme="core-dark-theme"></core-icon-button> | |
| </div> | |
| <div class="work future" layout horizontal> | |
| <div class="avatar-frame"> | |
| <img src="https://avatars2.githubusercontent.com/u/5644182?s=140" class="avatar-pic" one height="28" width="28"> | |
| </div> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">ERIK TOPHAT</div> | |
| <div class="i_date future">Executive Manager - Parks and CommunityServices</div> | |
| </div> | |
| <core-icon-button icon="chevron-right" id="core_icon_button" theme="core-dark-theme"></core-icon-button> | |
| </div> | |
| <div class="work future" layout horizontal> | |
| <div class="avatar-frame"> | |
| <img src="https://avatars2.githubusercontent.com/u/189046?s=140" class="avatar-pic" one height="28" width="28"> | |
| </div> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">PAUL PROE</div> | |
| <div class="i_date future">Senior Consultant - AIG</div> | |
| </div> | |
| <core-icon-button icon="chevron-right" id="core_icon_button" theme="core-dark-theme"></core-icon-button> | |
| </div> | |
| <div class="work future" layout horizontal> | |
| <div class="avatar-frame"> | |
| <img src="https://avatars3.githubusercontent.com/u/1868933?s=140" class="avatar-pic" one height="28" width="28"> | |
| </div> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">JOE CONRIOLA</div> | |
| <div class="i_date future">Inspector</div> | |
| </div> | |
| <core-icon-button icon="chevron-right" id="core_icon_button" theme="core-dark-theme"></core-icon-button> | |
| </div> | |
| <div class="work future" layout horizontal> | |
| <div class="avatar-frame"> | |
| <img src="https://avatars3.githubusercontent.com/u/2082824?s=140" class="avatar-pic" one height="28" width="28"> | |
| </div> | |
| <div class="inspect_details" layout vertical> | |
| <div class="i_type">CAROL INEFFIED</div> | |
| <div class="i_date future">Inspector</div> | |
| </div> | |
| <core-icon-button icon="chevron-right" id="core_icon_button" theme="core-dark-theme"></core-icon-button> | |
| </div> | |
| </div> | |
| </core-card> | |
| <core-card id="operation_panel" layout reverse vertical start> | |
| <div id="operation_tools" layout horizontal style="margin-bottom:10px;margin-left:10px;"> | |
| <img src="/pacs/ui/icon-adhoc.png" style="margin:5px;" id="core_icon_button" theme="core-dark-theme"> | |
| <img src="/pacs/ui/icon-maintence.png" style="margin:5px;" id="core_icon_button" theme="core-dark-theme"> | |
| <img src="/pacs/ui/icon-urgent.png" style="margin:5px;" id="core_icon_button" theme="core-dark-theme"> | |
| </div> | |
| <paper-button label="START MOWING OPERATION" raisedbutton icon="av:play-circle-outline" id="operation_button"></paper-button> | |
| <div class="inspect_details" style="margin-left:5px;margin-bottom:5px;" layout vertical> | |
| <div class="i_type">SCHEDULED MOWING OPERATION</div> | |
| <div class="i_date">Duration: 00:00:00</div> | |
| <div class="i_inspector"> | |
| <span class="i_name">Colin Conrad</span> | |
| </div> | |
| </div> | |
| </core-card> | |
| </esri-map> | |
| </section> | |
| </core-header-panel> | |
| </template> | |
| <script> | |
| Polymer('my-element', { | |
| selected_feature:null, | |
| current_user:{ | |
| }, | |
| appstate:{ | |
| state:'start' | |
| }, | |
| show_inspection:function(evt,dat,src){ | |
| console.log("INSPECT",evt,dat,src); | |
| this.$.inspect_panel.style.display="none"; | |
| this.$.inspectors_panel.style.display="none"; | |
| this.$.side_panel.style.display="none"; | |
| this.$.plan_panel.style.display="none"; | |
| this.$.info_panel.style.display="none"; | |
| this.$.user_panel.style.display="none"; | |
| this.$.info_icon.src="/pacs/ui/icon-info.png"; | |
| this.$.locate_icon.src="/pacs/ui/icon-locate.png"; | |
| this.$.photo_icon.src="/pacs/ui/icon-photo.png"; | |
| this.$.plan_icon.src="/pacs/ui/icon-warning.png"; | |
| this.$.profile_icon.src="/pacs/ui/icon-profile.png"; | |
| src.src="/pacs/ui/icon-info-select.png"; | |
| this.$.side_panel.style.display="block"; | |
| this.$.info_panel.style.display="block"; | |
| }, | |
| show_planner:function(evt,dat,src){ | |
| console.log("PLAN",evt,dat,src); | |
| this.$.inspect_panel.style.display="none"; | |
| this.$.inspectors_panel.style.display="none"; | |
| this.$.side_panel.style.display="none"; | |
| this.$.plan_panel.style.display="none"; | |
| this.$.info_panel.style.display="none"; | |
| this.$.user_panel.style.display="none"; | |
| this.$.info_icon.src="/pacs/ui/icon-info.png"; | |
| this.$.locate_icon.src="/pacs/ui/icon-locate.png"; | |
| this.$.photo_icon.src="/pacs/ui/icon-photo.png"; | |
| this.$.plan_icon.src="/pacs/ui/icon-warning.png"; | |
| this.$.profile_icon.src="/pacs/ui/icon-profile.png"; | |
| src.src="/pacs/ui/icon-warning-select.png"; | |
| this.$.side_panel.style.display="block"; | |
| this.$.plan_panel.style.display="block"; | |
| }, | |
| show_new:function(evt,dat,src){ | |
| console.log("NEW",evt,dat,src); | |
| }, | |
| showInspectionForm:function(evt,dat,src){ | |
| this.$.inspect_panel.style.display="none"; | |
| this.$.inspectors_panel.style.display="none"; | |
| this.$.side_panel.style.display="none"; | |
| this.$.plan_panel.style.display="none"; | |
| this.$.info_panel.style.display="none"; | |
| this.$.user_panel.style.display="none"; | |
| this.$.info_icon.src="/pacs/ui/icon-info-select.png"; | |
| this.$.locate_icon.src="/pacs/ui/icon-locate.png"; | |
| this.$.photo_icon.src="/pacs/ui/icon-photo.png"; | |
| this.$.plan_icon.src="/pacs/ui/icon-warning.png"; | |
| this.$.profile_icon.src="/pacs/ui/icon-profile.png"; | |
| this.$.side_panel.style.display="block"; | |
| this.$.inspect_panel.style.display="block"; | |
| }, | |
| showInspectorsForm:function(evt,dat,src){ | |
| this.$.inspect_panel.style.display="none"; | |
| this.$.inspectors_panel.style.display="none"; | |
| this.$.side_panel.style.display="none"; | |
| this.$.plan_panel.style.display="none"; | |
| this.$.info_panel.style.display="none"; | |
| this.$.user_panel.style.display="none"; | |
| this.$.info_icon.src="/pacs/ui/icon-info.png"; | |
| this.$.locate_icon.src="/pacs/ui/icon-locate.png"; | |
| this.$.photo_icon.src="/pacs/ui/icon-photo.png"; | |
| this.$.plan_icon.src="/pacs/ui/icon-warning-select.png"; | |
| this.$.profile_icon.src="/pacs/ui/icon-profile.png"; | |
| this.$.inspectors_panel.style.display="block"; | |
| }, | |
| show_profile:function(evt,dat,src){ | |
| console.log("PROFILE",evt,dat,src); | |
| this.$.inspect_panel.style.display="none"; | |
| this.$.inspectors_panel.style.display="none"; | |
| this.$.side_panel.style.display="none"; | |
| this.$.plan_panel.style.display="none"; | |
| this.$.info_panel.style.display="none"; | |
| this.$.user_panel.style.display="none"; | |
| this.$.info_icon.src="/pacs/ui/icon-info.png"; | |
| this.$.locate_icon.src="/pacs/ui/icon-locate.png"; | |
| this.$.photo_icon.src="/pacs/ui/icon-photo.png"; | |
| this.$.plan_icon.src="/pacs/ui/icon-warning.png"; | |
| this.$.profile_icon.src="/pacs/ui/icon-profile.png"; | |
| src.src="/pacs/ui/mobile-menu-close-small.png"; | |
| this.$.user_panel.style.display="block"; | |
| }, | |
| show_locate:function(evt,dat,src){ | |
| console.log("PLAN",evt,dat,src); | |
| this.$.inspect_panel.style.display="none"; | |
| this.$.inspectors_panel.style.display="none"; | |
| this.$.side_panel.style.display="none"; | |
| this.$.plan_panel.style.display="none"; | |
| this.$.info_panel.style.display="none"; | |
| this.$.user_panel.style.display="none"; | |
| this.$.info_icon.src="/pacs/ui/icon-info.png"; | |
| this.$.locate_icon.src="/pacs/ui/icon-locate.png"; | |
| this.$.photo_icon.src="/pacs/ui/icon-photo.png"; | |
| this.$.plan_icon.src="/pacs/ui/icon-warning.png"; | |
| this.$.profile_icon.src="/pacs/ui/icon-profile.png"; | |
| src.src="/pacs/ui/icon-locate-select.png"; | |
| this.$.location_card.style.display="inline-flex"; | |
| this.$.search_card.style.display="inline-flex"; | |
| } | |
| }); | |
| </script> | |
| </polymer-element> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment