Skip to content

Commit

Permalink
All foamer-mode options
Browse files Browse the repository at this point in the history
  • Loading branch information
@42A7C5
42A7C5 committed Jan 7, 2024
1 parent c952fd0 commit 5bc4cec
Show file tree
Hide file tree
Showing 3 changed files with 190 additions and 60 deletions.
82 changes: 58 additions & 24 deletions src/components/layerbutton.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,65 @@
<script lang='ts'>
export let layersettings:any;
export let name:string;
export let selectedSettingsTab:string;
export let runSettingsAdapt:any;
export let urlicon:string;
export let change:string;
<script lang="ts">
export let layersettings: any;
export let name: string;
export let selectedSettingsTab: string;
export let runSettingsAdapt: any;
export let urlicon: string;
export let change: string;
export let nestedchange: string = '';
</script>

<!-- {#if layersettings} -->
<!-- {#if layersettings[selectedSettingsTab]} -->
<div on:click={() => {
layersettings[selectedSettingsTab][change] = !layersettings[selectedSettingsTab][change] ;
runSettingsAdapt();
}}

on:keydown={() => {
layersettings[selectedSettingsTab][change] = !layersettings[selectedSettingsTab][change] ;
runSettingsAdapt();
}}
<div
role="button"
tabindex="0"
on:click={() => {
if (nestedchange != '') {
Object.keys(layersettings[selectedSettingsTab][change]).forEach(element => {
console.log(element)
layersettings[selectedSettingsTab][change][element] = false;
});
layersettings[selectedSettingsTab][change][nestedchange] = true;
} else {
layersettings[selectedSettingsTab][change] = !layersettings[selectedSettingsTab][change];
}
runSettingsAdapt();
}}
on:keydown={() => {
if (nestedchange != '') {
Object.keys(layersettings[selectedSettingsTab][change]).forEach(element => {
layersettings[selectedSettingsTab][change][element] = false;
});
layersettings[selectedSettingsTab][change][nestedchange] = true;
} else {
layersettings[selectedSettingsTab][change] = !layersettings[selectedSettingsTab][change];
}
runSettingsAdapt();
}}
>
<!--Toggle Routes-->
<div
aria-label={`${name} button`}
class:border-blue-500={layersettings[selectedSettingsTab][change] == true}
class:dark:border-blue-50={layersettings[selectedSettingsTab][change] == true}
class:border-transparent={layersettings[selectedSettingsTab][change] == false}
class={`bg-[#f5f1f0] dark:bg-[#1C2738] rounded-xl border-2`}><img src={urlicon} class='w-14 h-14' alt='' /></div>
<p class='text-sm text-center '>{name}</p>
{#if nestedchange}
<!--Toggle Routes-->
<div
aria-label={`${name} button`}
class:border-blue-500={layersettings[selectedSettingsTab][change][nestedchange] == true}
class:dark:border-blue-50={layersettings[selectedSettingsTab][change][nestedchange] == true}
class:border-transparent={layersettings[selectedSettingsTab][change][nestedchange] == false}
class={`bg-[#f5f1f0] dark:bg-[#1C2738] rounded-xl border-2`}
>
<img src={urlicon} class="w-14 h-14" alt="" />
</div>
<p class="text-sm text-center">{name}</p>
{:else}
<div
aria-label={`${name} button`}
class:border-blue-500={layersettings[selectedSettingsTab][change] == true}
class:dark:border-blue-50={layersettings[selectedSettingsTab][change] == true}
class:border-transparent={layersettings[selectedSettingsTab][change] == false}
class={`bg-[#f5f1f0] dark:bg-[#1C2738] rounded-xl border-2`}
>
<img src={urlicon} class="w-14 h-14" alt="" />
</div>
<p class="text-sm text-center">{name}</p>
{/if}
</div>
<!-- {/if}{/if} -->
8 changes: 4 additions & 4 deletions src/i18n/strings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ const i18n = {
showvehicle: 'Vehicle',
showspeed: 'Speed',
// foamer layers
orminfra: 'Infrastructure',
ormspeeds: 'Max Speeds',
ormsignalling: 'Signalling',
ormelectrification: 'Electrification',
orminfra: 'Infra',
ormspeeds: 'Speeds',
ormsignalling: 'Signals',
ormelectrification: 'Power',
ormgauge: 'Gauge',
// announcements
announcements: 'Play Random Announcements (Troll)',
Expand Down
160 changes: 128 additions & 32 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
what_martin_to_use,
what_backend_to_use,
check_kactus,
check_backend,
check_backend
} from '../components/distributed';
import { addStopsLayers } from '../components/addLayers/addStops';
import CloseButton from '../components/CloseButton.svelte';
Expand Down Expand Up @@ -64,7 +64,7 @@
let fleetData = {
'f-mts~rt~onebusaway': mtsFleetData,
'f-metro~losangeles~rail~rt': metroFleetData,
'f-northcountrytransitdistrict~rt': nctdFleetData,
'f-northcountrytransitdistrict~rt': nctdFleetData
};
let enabledlayerstyle =
Expand All @@ -84,7 +84,7 @@
//false means use metric, true means use us units
let selectedSettingsTab = 'localrail';
let usunits = false;
let foamermode = false;
let sidebarCollapsed = false;
let sidebarView = 0;
let announcermode = false;
Expand Down Expand Up @@ -212,11 +212,6 @@
//redo settings
}
function handleFoamerModeSwitch() {
foamermode = !foamermode;
localStorage.setItem('foamermode', foamermode ? 'true' : 'false');
}
function handleAnnouncerModeSwitch() {
announcermode = !announcermode;
localStorage.setItem('announcermode', announcermode ? 'true' : 'false');
Expand All @@ -231,12 +226,6 @@
usunits = false;
}
if (localStorage.getItem('foamermode') === 'true') {
foamermode = true;
} else {
foamermode = false;
}
if (localStorage.getItem('fpsmode') === 'true') {
fpsmode = true;
} else {
Expand Down Expand Up @@ -349,10 +338,10 @@
more: {
foamermode: {
infra: false,
speeds: false,
maxspeed: false,
signalling: false,
electrification: false,
gague: false
gauge: false
},
showstationentrances: true,
showstationart: false,
Expand Down Expand Up @@ -961,12 +950,36 @@
function runSettingsAdapt() {
console.log('run settings adapt', layersettings);
if (mapglobal) {
if (foamermode) {
if (layersettings.more.foamermode.infra) {
mapglobal.setLayoutProperty('foamershapes', 'visibility', 'visible');
} else {
mapglobal.setLayoutProperty('foamershapes', 'visibility', 'none');
}
if (layersettings.more.foamermode.maxspeed) {
mapglobal.setLayoutProperty('maxspeedshapes', 'visibility', 'visible');
} else {
mapglobal.setLayoutProperty('maxspeedshapes', 'visibility', 'none');
}
if (layersettings.more.foamermode.signalling) {
mapglobal.setLayoutProperty('signallingshapes', 'visibility', 'visible');
} else {
mapglobal.setLayoutProperty('signallingshapes', 'visibility', 'none');
}
if (layersettings.more.foamermode.electrification) {
mapglobal.setLayoutProperty('electrificationshapes', 'visibility', 'visible');
} else {
mapglobal.setLayoutProperty('electrificationshapes', 'visibility', 'none');
}
if (layersettings.more.foamermode.gauge) {
mapglobal.setLayoutProperty('gaugeshapes', 'visibility', 'visible');
} else {
mapglobal.setLayoutProperty('gaugeshapes', 'visibility', 'none');
}
Object.entries(layerspercategory).map((eachcategory) => {
let category = eachcategory[0];
let categoryvalues = eachcategory[1];
Expand Down Expand Up @@ -1610,12 +1623,60 @@
tileSize: 256
});
map.addSource('maxspeedtiles', {
type: 'raster',
tiles: ['https://a.tiles.openrailwaymap.org/maxspeed/{z}/{x}/{y}.png'],
tileSize: 256
});
map.addSource('signallingtiles', {
type: 'raster',
tiles: ['https://a.tiles.openrailwaymap.org/signals/{z}/{x}/{y}.png'],
tileSize: 256
});
map.addSource('electrificationtiles', {
type: 'raster',
tiles: ['https://a.tiles.openrailwaymap.org/electrification/{z}/{x}/{y}.png'],
tileSize: 256
});
map.addSource('gaugetiles', {
type: 'raster',
tiles: ['https://a.tiles.openrailwaymap.org/gauge/{z}/{x}/{y}.png'],
tileSize: 256
});
map.addLayer({
id: 'foamershapes',
type: 'raster',
source: 'foamertiles'
});
map.addLayer({
id: 'maxspeedshapes',
type: 'raster',
source: 'maxspeedtiles'
});
map.addLayer({
id: 'signallingshapes',
type: 'raster',
source: 'signallingtiles'
});
map.addLayer({
id: 'electrificationshapes',
type: 'raster',
source: 'electrificationtiles'
});
map.addLayer({
id: 'gaugeshapes',
type: 'raster',
source: 'gaugetiles'
});
map.addLayer({
id: 'ferryshapes',
type: 'line',
Expand Down Expand Up @@ -2129,6 +2190,7 @@
</script>

<svelte:head>
<!-- Google Tag Manager -->
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
Expand Down Expand Up @@ -2835,22 +2897,56 @@
</div>

{#if selectedSettingsTab === 'more'}
<div>
<input
on:click={(x) => {
handleFoamerModeSwitch();
runSettingsAdapt();
}}
on:keydown={(x) => {
handleFoamerModeSwitch();
runSettingsAdapt();
}}
checked={foamermode}
id="foamermode"
type="checkbox"
class="align-middle my-auto w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
<div class="flex flex-row gap-x-1">
<Layerbutton
bind:layersettings
selectedSettingsTab="more"
change="foamermode"
nestedchange="infra"
name={strings.orminfra}
urlicon="https://b.tiles.openrailwaymap.org/standard/14/2866/6611.png"
{runSettingsAdapt}
/>

<Layerbutton
bind:layersettings
selectedSettingsTab="more"
change="foamermode"
nestedchange="maxspeed"
name={strings.ormspeeds}
urlicon="https://b.tiles.openrailwaymap.org/maxspeed/14/2866/6611.png"
{runSettingsAdapt}
/>

<Layerbutton
bind:layersettings
selectedSettingsTab="more"
change="foamermode"
nestedchange="signalling"
name={strings.ormsignalling}
urlicon="https://b.tiles.openrailwaymap.org/signals/14/2866/6611.png"
{runSettingsAdapt}
/>

<Layerbutton
bind:layersettings
selectedSettingsTab="more"
change="foamermode"
nestedchange="electrification"
name={strings.ormelectrification}
urlicon="https://b.tiles.openrailwaymap.org/electrification/14/2866/6611.png"
{runSettingsAdapt}
/>

<Layerbutton
bind:layersettings
selectedSettingsTab="more"
change="foamermode"
nestedchange="gauge"
name={strings.ormgauge}
urlicon="https://b.tiles.openrailwaymap.org/gauge/14/2866/6611.png"
{runSettingsAdapt}
/>
<label for="foamermode" class="ml-2">{strings.orminfra}</label>
</div>

<div>
Expand Down

0 comments on commit 5bc4cec

Please sign in to comment.