Skip to content

Commit

Permalink
Merge pull request #99 from Syntaf/webpack-andrew-rainy-day
Browse files Browse the repository at this point in the history 
Webpack andrew rainy day
  • Loading branch information
@Syntaf
Syntaf authored Nov 11, 2024
2 parents 4a7f7e9 + adaedae commit a995b56
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 115 deletions.
154 changes: 64 additions & 90 deletions app/javascript/controllers/rainy_day_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,105 +2,79 @@ import { Controller } from "@hotwired/stimulus";


export default class extends Controller {
static targets = ["link"]; // we now have a this.sourceTarget or a this.sourceTargets array

static options = {
"mp": {
'widgetSelector': '#mountainProjectWidget',
'defaultZoom': 11,
'height': 500,
'urlBase': 'https://www.mountainproject.com/widget'
},
'areaListElementSelector': '[data-role="rainy-day-list-option"]',
'activeSelectorClass': 'active',
'activeLabelSelector': '[data-role="active-title"]'
}
connect() {
console.log('Hello, rainy day controller!');
}

// Rebuild the old JQuery based functionality here
};

// function RainyDayController(watchedAreaSlug, options) {
// this.watchedAreaSlug = watchedAreaSlug;
// this.options = $.extend(options, {
// 'mp': {
// 'widgetSelector': '#mountainProjectWidget',
// 'defaultZoom': 11,
// 'height': 500,
// 'urlBase': 'https://www.mountainproject.com/widget'
// },
// 'areaListElementSelector': '[data-role="rainy-day-list-option"]',
// 'activeSelectorClass': 'active',
// 'activeLabelSelector': '[data-role="active-title"]'
// });

// this.initView();
// }

// RainyDayController.prototype.initView = function () {
// $(this.options.areaListElementSelector).click(this.handleAreaSelection.bind(this));

// this.$activeLocation = $('.' + this.options.activeSelectorClass);
// this.$activeLabel = $(this.options.activeLabelSelector);
// this.$description = $('p[data-role="area-description"]');
// this.$rockType = $('strong[data-role="area-rock-type"]');
// this.$driveTime = $('strong[data-role="area-drive-time"]');

// if (this.$activeLocation.length < 1)
// {
// console.error('No active list element found');
// return;
// }
}
updateMountainProjectWidget(event) {
const baseUrl = "https://www.mountainproject.com/widget?loc=fixed&";
const target = event.currentTarget

// this.updateMountainProjectWidget(this.$activeLocation);
// }
const x = target.dataset.lon; //Replace const y = $activeElement.data('lon');
const y = target.dataset.lat; //Replace const x = $activeElement.data('lat');
const z = target.dataset.mtz ? target.dataset.mtz : this.constructor.options.mp.defaultZoom //Replace const z = $activeElement.data('mtz') ? $activeElement.data('mtz') : this.options.mp.defaultZoom;
const h = this.constructor.options.mp.height //Replace const h = this.options.mp.height
const url = `${baseUrl}x=${x}&y=${y}&z=${z}&h=${h}`

// RainyDayController.prototype.updateMountainProjectWidget = function ($activeElement) {
// var longitude = $activeElement.data('lon');
// var latitude = $activeElement.data('lat');
// var zoom = $activeElement.data('mtz') ? $activeElement.data('mtz') : this.options.mp.defaultZoom;
const iFrame = document.querySelector("iframe")
if (url === iFrame.src) return

// var newUrl = this.buildMountainProjectUrl(longitude, latitude, zoom);
// $(this.options.mp.widgetSelector).attr('src', newUrl);
// }

// RainyDayController.prototype.buildMountainProjectUrl = function (longitude, latitude, zoom) {
// return this.options.mp.urlBase + '?loc=fixed&' +
// 'x=' + longitude + '&' +
// 'y=' + latitude + '&' +
// 'z=' + zoom + '&' +
// 'h=' + this.options.mp.height
// }

// RainyDayController.prototype.handleAreaSelection = function (ev) {
// var $target = $(ev.target);
// var areaId = $target.data('id');
// var $selectedItems = $('[data-id="' + $target.data('id') + '"]');

// // Do nothing if the clicked element is already active
// if ($target.hasClass(this.options.activeSelectorClass))
// {
// return;
// }
return iFrame.setAttribute("src", url)
}

// this.fetchArea(areaId)
// .then(this.displayArea.bind(this, $selectedItems));
// }

// RainyDayController.prototype.fetchArea = function (id) {
// var url = '/' + this.watchedAreaSlug + '/rainy-day-options/';
// return $.get(url + id);
// }
/*********This function fetches the area attributes and replaces the old ones with these***********/

// RainyDayController.prototype.displayArea = function ($newActiveListItem, response) {
// if (!response || response.length == 0) {
// console.error('Issue connecting to server :(');
// }
async fetchArea (event) {
const href = this.linkTarget.getAttribute("href")
let url = href + '/rainy-day-options/';

// this.swapActiveClass($newActiveListItem);
// this.updatePageInformation(response);
// this.updateMountainProjectWidget($newActiveListItem);
const response = await fetch(url + event.currentTarget.dataset.id)
if (!response.ok) {
throw new Error('Network response error')
}
const data = await response.json()

// We need to select the attributes from fetch
const description = data.climbing_area.description
const rockType = data.climbing_area.rock_type
// const drivingTime = data.driving_time

// this.$activeLocation = $newActiveListItem;
// }
// We need to select the elements/attributes to replace
const areaDescription = document.querySelector('p[data-role="area-description"]')
areaDescription.innerHTML = description

// RainyDayController.prototype.swapActiveClass = function($newActiveListItem) {
// this.$activeLocation.removeClass(this.options.activeSelectorClass);
// $newActiveListItem.addClass(this.options.activeSelectorClass);
// }
const rockTypeElement = document.querySelector('strong[data-role="area-rock-type"]')
rockTypeElement.innerHTML = rockType
// const drivingTimeElement = document.querySelector('strong[data-role="area-drive-time"]')
}

// RainyDayController.prototype.updatePageInformation = function(newAreaInformation) {
// this.$description.html(newAreaInformation['climbing_area']['description']);
// this.$rockType.html(newAreaInformation['climbing_area']['rock_type']);
// this.$driveTime.html(newAreaInformation['driving_time'] + ' minutes');
// this.$activeLabel.html(newAreaInformation['climbing_area']['name']);
// }
showArea(event) {
this.updateMountainProjectWidget(event);
this.fetchArea(event)
this.handleAreaSelection(event)
}

// Method for changing the button text when an area from the dropdown menu is selected
handleAreaSelection(event){
// We need to replace the text inside of the button with the active element
const menuInfo = document.getElementById("dropdownMenuButton")
if (!menuInfo) return
const target = event.currentTarget;
menuInfo.innerText = target.innerText;
}

}
13 changes: 7 additions & 6 deletions app/javascript/stylesheets/rainy_day_options.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ body[data-page-controller="rainy_day_options"] {
.mobile {
display: none;
position: absolute;
top: 10px;
top: 21px;
right: 0;

.dropdown-toggle {
Expand Down Expand Up @@ -142,10 +142,10 @@ body[data-page-controller="rainy_day_options"] {
font-weight: $extraBold;
}

&.active {
background-color: transparent;
color: $primaryColor;
}
// &.active {
// background-color: transparent;
// color: $primaryColor;
// }

&:hover {
background-color: transparent;
Expand Down Expand Up @@ -186,8 +186,9 @@ body[data-page-controller="rainy_day_options"] {
.crag-info {
// padding: 0 10px 35px 10px;
padding: 25px;
padding-left: 14px;
// margin-bottom: 35px;
background-color: #fff;
background-color: #eee;

&.bottom-border {
border-bottom: 1px solid #eee;
Expand Down
39 changes: 20 additions & 19 deletions app/views/area/rainy_day_options/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,26 @@
<% end %>
<div class="page-header card">
<div class="container">
<h1><a href="/<%= @watched_area.slug %>">WET ROCK POLICE</a></h1>
<h1><a data-rainy-day-target="link" href="/<%= @watched_area.slug %>">WET ROCK POLICE</a></h1>
<h2>Rainy Day Options for <%= @watched_area.name %></h2>
</div>
</div>
<div class="container page-content">
<div class="crags">
<div class="crag-list">
<div class="area-header ">
<div class="area-header">
<span class="header">Areas</span>
<span class="header header-mobile">Area:</span>
</div>
<div class="mobile dropdown">
<button class="dropdown-toggle" data-role="active-title" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="dropdown-toggle" data-role="active-title" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<%= @active_rainy_day_option.climbing_area.name %>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<% @watched_area.climbing_areas.each_with_index do |area, index| %>
<a class="dropdown-item <% if index == 0 %>active<% end %>"
<a
data-action="click->rainy-day#showArea"
class="dropdown-item <% if index == 0 %>active<% end %>"
data-role="rainy-day-list-option"
data-id="<%= area.id %>"
data-name="<%= area.name %>"
Expand All @@ -32,29 +34,31 @@
<% end %>
</div>
</div>
<ul class="desktop list-group-flush">
<ul class="desktop list-group-flush">
<% @watched_area.climbing_areas.each_with_index do |area, index| %>
<li class="list-group-item list-group-item-action <% if index == 0 %>active<% end %>"
data-role="rainy-day-list-option"
data-id="<%= area.id %>"
data-name="<%= area.name %>"
data-lat="<%= area.location.latitude.to_f %>"
data-lon="<%= area.location.longitude.to_f %>"
data-mtz="<%= area.location.mt_z %>">
<%= area.name %>
</li>
<li
data-action="click->rainy-day#showArea"
class="list-group-item list-group-item-action <% if index == 0 %>active<% end %>"
data-role="rainy-day-list-option"
data-id="<%= area.id %>"
data-name="<%= area.name %>"
data-lat="<%= area.location.latitude.to_f %>"
data-lon="<%= area.location.longitude.to_f %>"
data-mtz="<%= area.location.mt_z %>">
<%= area.name %>
</li>
<% end %>
</ul>
</div>
<div class="mountain-project card">
<iframe id="mountainProjectWidget" style="width:100%; max-width:1200px; height:500px;" frameborder="0" scrolling="no" src="https://www.mountainproject.com/widget?loc=fixed&x=-12871302&y=4337800&z=11.7&h=500"></iframe>
</div>
</div>
<div class="crag-info bottom-border">

<h4>Description (via <a href="">Mountain Project</a>):</h4>
<p data-role="area-description"><%= raw @active_rainy_day_option.climbing_area.description %></p>
</div>
<div class="crag-info bottom-padding">
<div class="crag-info container bottom-padding">
<h4>Features:</h4>
<table>
<tr>
Expand All @@ -81,6 +85,3 @@
</div>
</div>

<script>
var rainyDayController = new RainyDayController('<%= @watched_area.slug %>', {});
</script>

0 comments on commit a995b56

Please sign in to comment.