Skip to content

Commit

Permalink
Revert "First pass at forced transition to resources"
Browse files Browse the repository at this point in the history 
This reverts commit 698fb55.
  • Loading branch information
@rcalef
rcalef committed May 13, 2024
1 parent 5b29cbd commit 1348c4f
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 117 deletions.
100 changes: 14 additions & 86 deletions src/routes/dashboard/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,103 +6,31 @@
</svelte:head>

<script>
import Dashboard from "./Dashboard.svelte";
import DashboardTab from "./Dashboard.svelte"
import Methodology from "./Methodology.svelte"
import Resources from "./Resources.svelte"
import Tabs from "./Tabs.svelte";
let items = [
{ label: "Dashboard",
value: 1,
component: DashboardTab
},
{ label: "Methodology",
value: 2,
component: Methodology
},
{ label: "What's next?",
value: 3,
component: Resources
}
];
let activeTabValue = 1;
const handleClick = tabValue => () => (activeTabValue = tabValue);
let narrativeComplete;
let dashboard;
$: {
if (narrativeComplete) {
activeTabValue = 3;
narrativeComplete = false;
dashboard = true;
}
console.log("narrative: ", narrativeComplete);
console.log("dashboard: ", dashboard);
let items = [
{ label: "Dashboard",
value: 1,
component: DashboardTab
},
{ label: "Methodology",
value: 2,
component: Methodology
},
{ label: "What's next?",
value: 3,
component: Resources
}
];
</script>

<ul>
{#each items as item}
<li class={activeTabValue === item.value ? 'active' : ''}>
<span on:click={handleClick(item.value)}>{item.label}</span>
</li>
{/each}
</ul>

<div class="box" style:display={activeTabValue == 1 ? null : 'none'}>
<Dashboard bind:narrativeComplete={narrativeComplete} bind:dashboard={dashboard}/>
</div>
<div class="box" style:display={activeTabValue == 2 ? null : 'none'}>
<Methodology/>
</div>
<div class="box" style:display={activeTabValue == 3 ? null : 'none'}>
<Resources/>
</div>
<Tabs {items} />

<!-- Map Display Options -->

<style>
@import url("$lib/global.css");
.box {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #dee2e6;
border-top: 0;
border-bottom: 0;
border-left: 0;
border-right: 0;
}
ul {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
border-bottom: 1px solid #dee2e6;
}
li {
margin-bottom: -1px;
}
span {
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
display: block;
padding: 0.5rem 1rem;
cursor: pointer;
}
span:hover {
border-color: #e9ecef #e9ecef #dee2e6;
}
li.active > span {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
</style>
42 changes: 11 additions & 31 deletions src/routes/dashboard/Dashboard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@
import mapboxgl from 'mapbox-gl';
import { onMount } from "svelte";
export let narrativeComplete = false;
export let dashboard = false;
mapboxgl.accessToken = 'pk.eyJ1IjoiZXB0eXNpbmdlciIsImEiOiJjbHVoanlneWIycm14MmxvZTh2Y3VhYXFkIn0.lkhHKBe-C2_I9v2J-jJ2hg';
const accessToken = 'pk.eyJ1IjoiZXB0eXNpbmdlciIsImEiOiJjbHVoanlneWIycm14MmxvZTh2Y3VhYXFkIn0.lkhHKBe-C2_I9v2J-jJ2hg';
let map;
Expand Down Expand Up @@ -80,9 +76,9 @@
let minRentAll = 0;
let minSalary, maxSalary;
let dashboard = false;
let showPopup = true;
let showSidePanel = false;
let showClosing = false;
let rentValue = 1500;
let selectedRent = 6000;
Expand Down Expand Up @@ -155,12 +151,6 @@
showPopup = false;
}
function completeNarrative() {
showClosing = false;
narrativeComplete = true;
colorDashboard();
updateMapColoring(selectedOption);
}
onMount(async () => {
const initialState = { lng: lng, lat: lat, zoom: zoom };
Expand Down Expand Up @@ -431,9 +421,12 @@
if (commuteState[feature.id]){
workingNeighborhood = feature.properties.neighborhood;
commuteSlider = null;
selectedRent = rentValue;
selectedCommute = commuteValue;
showClosing = true;
selectedRent = 2000;
selectedCommute = 60;
dashboard = true;
showSidePanel = true;
colorDashboard();
updateMapColoring(selectedOption);
} else {
console.log("you can't click that neighborhood")
}
Expand Down Expand Up @@ -990,11 +983,6 @@
}
// Shrink map width if side panel is active
$: {
if(dashboard) {
showSidePanel = true;
}
}
$: {
if (showSidePanel) {
mapWidth = "70%";
Expand Down Expand Up @@ -1137,22 +1125,14 @@
work in <span class="neighborhood-name" style="font-weight: bold; color: hsl(200, 900%, 30%)">{workingNeighborhood}</span>!</p>
</div>
{/if}
{#if showClosing && showPopup}
<div class='instruction'>
<p>
This completes the narrative tour of our dashboard, next we'd like to show you some external resources in case you're
wondering what you can do to improve your community's access to high-paying jobs without having to compromise by
either spending more money on rent or spending more time commuting to work.
</p>
<div class="buttonDiv">
<button on:click={completeNarrative}>Continue</button>
</div>
</div>
{/if}
{#if dashboard && showPopup}
<div class='instruction'>
<button class="closeButton" on:click={closePopup}>X</button>
<p>
This completes the narrative tour of our dashboard, next we'd like to show you some external resources in case you're
wondering what you can do to improve your community's access to high-paying jobs without having to compromise by
either spending more money on rent or spending more time commuting to work.

<span class="neighborhood-name" style="font-weight: bold;">Welcome to the dashboard!</span> You can now explore all the rent and commute data on your own by selecting what to color the map by.
When colored by commute time, <span style="text-decoration: underline; font-style: italic;">click</span> on different neighborhoods to get commute time <span style="text-decoration: underline; font-style: italic;">from</span> that neighborhood.
</p>
Expand Down

0 comments on commit 1348c4f

Please sign in to comment.