Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Task/wg 375 recon portal UI changes #1435

Merged
merged 3 commits into from
Sep 25, 2024
Merged

Task/wg 375 recon portal UI changes #1435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e51782c
task/WG-375-Recon-Portal-UI-changes
sophia-massie Sep 9, 2024
c701882
task/wg-375-Recon-Portal-UI-changes
sophia-massie Sep 24, 2024
5da101d
- Removes escape character sanitation now that API
sophia-massie Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions designsafe/static/scripts/rapid/controllers/rapid-main-ctrl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,9 +248,11 @@ export default class RapidMainCtrl {
}

search() {
if (!this.events || !this.openTopoData) return;
this.filtered_events = this.RapidDataService.searchEvents(this.events, this.filter_options);
this.filtered_openTopoData = this.RapidDataService.searchOpenTopo(this.openTopoData, this.opentopo_filter_options, this.filter_options);
if (!this.events && !this.openTopoData) return;
if (this.data_source)
this.filtered_events = this.RapidDataService.searchEvents(this.events, this.filter_options);
if (this.ot_data_source)
this.filtered_openTopoData = this.RapidDataService.searchOpenTopo(this.openTopoData, this.opentopo_filter_options, this.filter_options);

// Handle Recon Portal Layer
this.updateLayer(this.data_source, this.reconLayer, this.filtered_events);
Expand Down
160 changes: 62 additions & 98 deletions designsafe/static/scripts/rapid/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,119 +4,68 @@
</div>
<div class="filter-options slide-in" ng-show="vm.show_filter_options">
<div class="filter-container">
<div class="filter-options">
<label> Event Type </label>
<select class="form-control"
ng-options="et.display_name for et in vm.event_types track by et.name"
ng-change="vm.search()"
ng-model="vm.filter_options.event_type"
ng-disabled="!vm.data_source"
title="Select the data source to enable filters"></select>
<label> Start date </label>
<input type="date"
class="form-control"
ng-model="vm.filter_options.start_date"
<ul>
<div class="data_source">
<input type="checkbox"
ng-change="vm.search()"
ng-model="vm.data_source"/>
<label> DesignSafe Data </label>
</div>
<div class="filter-options">
<label> Event Type </label>
<select class="form-control"
ng-options="et.display_name for et in vm.event_types track by et.name"
ng-model="vm.filter_options.event_type"
ng-disabled="!vm.data_source"
title="Select the data source to enable filters">
<label> End date </label>
<input type="date"
title="Select the data source to enable filters"></select>
<label> Start date </label>
<input type="date"
class="form-control"
ng-model="vm.filter_options.start_date"
ng-disabled="!vm.data_source"
title="Select the data source to enable filters"/>
<label> End date </label>
<input type="date"
class="form-control"
ng-model="vm.filter_options.end_date"
ng-change="vm.search()"
ng-disabled="!vm.data_source"
title="Select the data source to enable filters">
</div>
<div class="external-data-checkbox" ng-show="!vm.show_external_filters">
<input type="checkbox" id="showExternalCheckbox" ng-click="vm.show_external_filters = true; vm.ot_data_source = false;"
ng-model="vm.show_external_filters">
<label for="showExternalCheckbox">
<i class="ds-icon-Expand unchecked-icon"></i>
<h4>
<u>
View External Dataset Filters
</u>
</h4>
</label>
</div>
<div ng-show="vm.show_external_filters">
<div class="external-data-checkbox" ng-show="vm.show_external_filters">
<input type="checkbox" id="hideExternalCheckbox" ng-click="vm.show_external_filters = false; vm.ot_data_source = false; vm.clear_filters();"
ng-model="vm.show_external_filters">
<label for="hideExternalCheckbox">
<h4>
<u>
Hide External Dataset Filters
</u>
</h4>
</label>
</div>
<ul>
title="Select the data source to enable filters"/>
</div>
</ul>
<ul>
<div class="data_source">
<input type="checkbox"
<input type="checkbox"
ng-change="vm.search()"
ng-model="vm.ot_data_source">
<label class="external_datasource_listing"> OpenTopography Data </label>
</div>
<div class="filter-options">
<label> Keyword search<span class="info-icon" data-tooltip="Keywords typically include: title terms, location details, type of events, index terms associated with the datasets"> (i)</span></label> </label>
<input type="text"
class="form-control"
ng-model="vm.opentopo_filter_options.keyword"
ng-change="vm.debouncedSearch()"
ng-disabled="!vm.ot_data_source"
title="Select the data source to enable filters"></input>
<label> Start date </label>
<input type="date"
class="form-control"
ng-model="vm.opentopo_filter_options.ot_start_date"
ng-change="vm.search()"
ng-disabled="!vm.ot_data_source"
title="Select the data source to enable filters">
<label> End date </label>
<input type="date"
class="form-control"
ng-model="vm.opentopo_filter_options.ot_end_date"
ng-change="vm.search()"
ng-disabled="!vm.ot_data_source"
title="Select the data source to enable filters">
</div>
<div class="data_source">
<input type="checkbox"
ng-change="vm.search()"
ng-model="vm.ot_data_source">
<label class="external_datasource_listing"> External Data Source 2 </label>
</div>
<div class="filter-options">
<label> Keyword search<span class="info-icon" data-tooltip="Keywords typically include: title terms, location details, type of events, index terms associated with the datasets"> (i)</span></label> </label>
<input type="text"
ng-model="vm.ot_data_source"/>
<label> OpenTopography Data </label>
</div>
<div class="filter-options">
<label> Keyword search<span class="info-icon" data-tooltip="Keywords typically include: title terms, location details, type of events, index terms associated with the datasets"> (i)</span></label> </label>
<input type="text"
class="form-control"
ng-model="vm.opentopo_filter_options.keyword"
ng-change="vm.debouncedSearch()"
ng-disabled="!vm.ot_data_source"
title="Select the data source to enable filters"></input>
<label> Start date </label>
<input type="date"
<label> Start date </label>
<input type="date"
class="form-control"
ng-model="vm.opentopo_filter_options.ot_start_date"
ng-change="vm.search()"
ng-disabled="!vm.ot_data_source"
title="Select the data source to enable filters">
<label> End date </label>
<input type="date"
<label> End date </label>
<input type="date"
class="form-control"
ng-model="vm.opentopo_filter_options.ot_end_date"
ng-change="vm.search()"
ng-disabled="!vm.ot_data_source"
title="Select the data source to enable filters">
</div>
</div>
<div class="filter-options">
<button class="btn btn-xs btn-info clear-btn" ng-click="vm.clear_filters()"> Clear </button>
<button class="btn btn-xs btn-default hide-btn" ng-click="vm.show_filter_options=false"> Hide </button>
</div>
</div>
</ul>
</div>
</ul>
<div class="filter-button-row">
<button class="btn btn-xs btn-default filter-btn" ng-click="vm.show_filter_options=false"> Hide Filters </button>
<button class="btn btn-xs btn-default filter-btn" ng-click="vm.clear_filters()"> Clear Filters </button>
<button class="btn btn-xs btn-info filter-btn" ng-click="vm.search()" ng-disabled="(!vm.data_source && !vm.ot_data_source)"> Search </button>
</div>
</div>
</div>
<div id="show_sidebar_handle" ng-show="!vm.show_sidebar" ng-click="vm.show_sidebar = !vm.show_sidebar">
<div class="sidebar-handle"
Expand Down Expand Up @@ -153,9 +102,25 @@ <h4>
</div>
</div>
<div ng-show="!vm.active_rapid_event" class="event-results sb-row">
<div ng-show="vm.filtered_events" class="">
<event-listing ng-show="vm.data_source" ng-repeat="event in vm.filtered_events" event=event ng-click="vm.select_event(event)"></event-listing>
<event-listing ng-show="vm.ot_data_source" ng-repeat="event in vm.filtered_openTopoData" event=event ng-click="vm.select_event(event)"></event-listing>
<div class="event-listing designSafeData error" ng-if="vm.data_source && vm.filtered_events.length === 0">
<p>No DesignSafe datasets match your selected filters.</p>
</div>
<div class="event-listing openTopoData error" ng-if="vm.ot_data_source && vm.filtered_openTopoData.length === 0">
<p>No OpenTopography datasets match your selected filters.</p>
</div>
<div ng-if="vm.filtered_events">
<event-listing
ng-repeat="event in vm.filtered_events"
event="event"
ng-click="vm.select_event(event)">
</event-listing>
</div>
<div ng-if="vm.filtered_openTopoData">
<event-listing
ng-repeat="event in vm.filtered_openTopoData"
event="event"
ng-click="vm.select_event(event)">
</event-listing>
</div>
<div ng-show="!vm.filtered_events" class="">
<event-listing ng-show="vm.data_source" ng-repeat="event in vm.events" event=event ng-click="vm.select_event(event)"></event-listing>
Expand All @@ -166,4 +131,3 @@ <h4>
</div> <!-- ends sidebar -->
<div id="map"></div>
</div>
</div>
68 changes: 17 additions & 51 deletions designsafe/static/scripts/rapid/styles/rapid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,9 @@ body {
.event-listing.openTopoData {
border-left: 5px solid #a8bb2f;
}
.event-listing.designSafeData {
border-left: 5px solid #548cc8;
}

.event-listing .event-type.earthquake {
background-color: #e46e28;
Expand All @@ -241,7 +244,11 @@ body {
.event-listing .event-type.openTopoData {
background-color: #a8bb2f;
}

.error {
background: #efd5d8;
color: #bb2f3f;
font-weight: bold;
}

.event-listing .event-date, .event-listing .event-type {
background: #777777;
Expand Down Expand Up @@ -294,6 +301,13 @@ body {
gap: 10px;
}

.filter-button-row {
display: flex;
justify-content:center;
white-space: nowrap;
align-items: center;
}

.filter-options-button {
margin: 10px;
}
Expand All @@ -316,62 +330,14 @@ body {
margin-bottom: 10px;
}

.data_source{
.data-source{
display:flex;
flex-direction: row;
width: 100%;
align-items: center;
}

.external_datasource_listing {
padding-left: 10px;
padding-right: 10px;
padding-top: 12px;
padding-bottom: 5px;

}

.external-data-checkbox {
position: relative;
display: inline-block;
}

.external-data-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

.external-data-checkbox label {
cursor: pointer;
display: flex;
align-items: center;
}

.external-data-checkbox .unchecked-icon {
display: inline-block;
font-size: 20px;
margin-right: 8px;
}

.external-data-checkbox .checked-icon {
display: none;
font-size: 20px;
margin-right: 8px;
}

.external-data-checkbox input[type="checkbox"]:checked ~ label .unchecked-icon {
display: none;
}

.external-data-checkbox input[type="checkbox"]:checked ~ label .checked-icon {
display: inline-block;
}

.clear-btn,
.hide-btn{
.filter-btn{
width: 25%;
height :40px;
}
Expand Down
Loading