Skip to content

Commit

Permalink
Regex implementation for Seed Request (#71)
Browse files Browse the repository at this point in the history
  • Loading branch information
Sgt-Imalas authored Nov 7, 2024
1 parent 6efc3c7 commit e287fb3
Show file tree
Hide file tree
Showing 12 changed files with 225 additions and 162 deletions.
61 changes: 61 additions & 0 deletions frontend/src/components/CoordinateRequestDialog.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import Swal from "sweetalert2";

export function requestCoordinate() {
const apiUrl = import.meta.env.VITE_API_URL;
// Lets pop up a swal to ask for the seed name and then send it to the backend
Swal.fire({
title: "Request a seed thats not found in the database yet",
input: "text",
inputLabel: "Coordinate:",
inputPlaceholder: "Enter the Coordinate here...",
showCancelButton: true,
confirmButtonText: "Request",
showLoaderOnConfirm: true,
inputValidator: (coordinate) => validateCoordinate(coordinate),
preConfirm: (coordinates) => {
return fetch(`${apiUrl}/coordinates/request/` + coordinates, {
method: "GET",
headers: {
Authorization: `Bearer ${useUserStore().token}`,
},
})
.then((response) => {
return response.json();
})
.then((data) => {
if (data.error) {
throw new Error(data.error);
}
return data;
})

.catch((error) => {
Swal.showValidationMessage(`${error}`);
});
},
allowOutsideClick: () => !Swal.isLoading(),
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: "Seed Requested",
text: result.value.message,
icon: "success",
});
}
});
}

export function validateCoordinate(coordinate) {
const coordinateValidationRegex = RegExp(
/(^(SNDST-A|CER-A|CERS-A|OCAN-A|S-FRZ|LUSH-A|FRST-A|VOLCA|BAD-A|HTFST-A|OASIS-A|V-SNDST-C|V-CER-C|V-CERS-C|V-OCAN-C|V-SWMP-C|V-SFRZ-C|V-LUSH-C|V-FRST-C|V-VOLCA-C|V-BAD-C|V-HTFST-C|V-OASIS-C|SNDST-C|CER-C|FRST-C|SWMP-C|M-SWMP-C|M-BAD-C|M-FRZ-C|M-FLIP-C|M-RAD-C)-\d+-[^-]*-[^-]*-[^-]*)/gm
);
return new Promise((resolve) => {
console.log(coordinate);
let coordinateValid = coordinateValidationRegex.test(coordinate);
if (!coordinateValid) {
resolve("Not a valid Coordinate!");
} else {
resolve();
}
});
}
184 changes: 81 additions & 103 deletions frontend/src/components/Navbar.vue
Original file line number Diff line number Diff line change
@@ -1,44 +1,59 @@
<script setup>
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
</script>

<template>
<!-- Bootstrap 5 navbar -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<router-link to="/" class="navbar-brand"><img src="@/assets/logo.png" style="max-height: 40px" class="me-2"/>{{ $t('navbar.title') }}</router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link to="/map-explorer" class="nav-link">{{ $t('navbar.map_explorer_link') }}</router-link>
</li>
<!--
<li class="nav-item">
<router-link to="/seed-viewer" class="nav-link">Seed Viewer</router-link>
</li>
-->
<li class="nav-item">
<router-link to="/trait-finder" class="nav-link">{{ $t('navbar.world_trait_finder_link') }}</router-link>
</li>
<li class="nav-item">
<router-link to="/starmap-generator" class="nav-link">{{ $t('navbar.starmap_link') }}</router-link>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<router-link to="/contribute" class="nav-link">{{ $t('navbar.contribute_link') }}</router-link>
</li>
<li class="nav-item">
<a href="https://discord.gg/3vhCpp6PNq" target="mni_gh" class="nav-link">{{ $t('navbar.discord_link') }}</a>
</li>
<li class="nav-item">
<a href="https://github.com/barratt/mapsnotincluded.org" target="mni_disc" class="nav-link">{{ $t('navbar.github_link') }}</a>
</li>
<!-- <li class="nav-item">
<!-- Bootstrap 5 navbar -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<router-link to="/" class="navbar-brand"><img src="@/assets/logo.png" style="max-height: 40px" class="me-2" />{{
$t("navbar.title")
}}</router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<router-link to="/map-explorer" class="nav-link">{{
$t("navbar.map_explorer_link")
}}</router-link>
</li>
<!--
<li class="nav-item">
<router-link to="/seed-viewer" class="nav-link">{{
$t("navbar.seed_viewer_link")
}}</router-link>
</li>
-->
<li class="nav-item">
<router-link to="/trait-finder" class="nav-link">{{
$t("navbar.world_trait_finder_link")
}}</router-link>
</li>
<li class="nav-item">
<router-link to="/starmap-generator" class="nav-link">{{
$t("navbar.starmap_link")
}}</router-link>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<router-link to="/contribute" class="nav-link">{{
$t("navbar.contribute_link")
}}</router-link>
</li>
<li class="nav-item">
<a href="https://discord.gg/3vhCpp6PNq" target="mni_gh" class="nav-link">{{
$t("navbar.discord_link")
}}</a>
</li>
<li class="nav-item">
<a href="https://github.com/barratt/mapsnotincluded.org" target="mni_disc" class="nav-link">{{
$t("navbar.github_link") }}</a>
</li>
<!-- <li class="nav-item">
<Menu>
<MenuButton class="locale-button">
<i class="bi bi-globe nav-link"></i>
Expand All @@ -57,124 +72,87 @@ import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
</Menu>
</li> -->

<!-- Optionally, add buttons to set or clear token -->
<div class="nav-link my-auto">
<button v-if="isAuthenticated" @click="requestCoordinates" class="btn btn-sm btn-primary">Request Coordinates</button>
<a v-else :href="loginUrl">
<img src="https://community.cloudflare.steamstatic.com/public/images/signinthroughsteam/sits_01.png">
</a>
</div>
</ul>
</div>
</div>
</nav>
<!-- Optionally, add buttons to set or clear token -->
<div class="nav-link my-auto">
<button v-if="isAuthenticated" @click="requestCoordinate" class="btn btn-sm btn-primary">
{{ $t("coordinate_request_dialog.request_coordinate_title") }}
</button>
<a v-else :href="loginUrl">
<img src="https://community.cloudflare.steamstatic.com/public/images/signinthroughsteam/sits_01.png" />
</a>
</div>
</ul>
</div>
</div>
</nav>
</template>

<script>
const apiUrl = import.meta.env.VITE_API_URL;
import { useUserStore } from '@/stores';
import Swal from 'sweetalert2';
import { useUserStore } from "@/stores";
import { requestCoordinate } from "./CoordinateRequestDialog";
export default {
data(){
data() {
return {
loginUrl: `${apiUrl}/login?origin=${window.location.origin}`,
}
};
},
computed: {
// Accessing the isAuthenticated getter from the store
isAuthenticated() {
return useUserStore().isAuthenticated;
},
},
methods: {
requestCoordinates() {
// Lets pop up a swal to ask for the seed name and then send it to the backend
Swal.fire({
title: 'Request Coordinates',
input: 'text',
inputLabel: 'Coordinates Name',
inputPlaceholder: 'Enter the coordinates name',
showCancelButton: true,
confirmButtonText: 'Request',
showLoaderOnConfirm: true,
preConfirm: (coordinates) => {
return fetch(`${apiUrl}/coordinates/request/` + coordinates, {
method: 'GET',
headers: {
'Authorization': `Bearer ${useUserStore().token}`
},
})
.then(response => {
return response.json();
})
.then(data => {
if (data.error) {
throw new Error(data.error);
}
return data;
})
.catch(error => {
Swal.showValidationMessage(`${error}`);
});
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: 'Seed Requested',
text: result.value.message,
icon: 'success'
});
}
});
},
},
}
methods: {},
};
</script>

<style scoped>
.navbar {
background-color: #4F5F80;
background-color: #4f5f80;
}
.nav-item {
display: flex;
align-items: center;
position: relative;
}
.locale-button {
background-color: transparent;
border: none;
}
.locale-dropdown {
position: absolute;
bottom: 0px;
left: 0px;
transform: translateY(100%);
background-color: #4F5F80;
background-color: #4f5f80;
border: 1px solid #b4bdd1;
border-radius: 4px;
display: flex;
flex-direction: column;
}
.locale-dropdown-item {
padding: 3px 10px;
margin: 0px;
}
.locale-dropdown-item:hover {
cursor: pointer;
background-color: #43516d;
border-radius: 4px;
}
.locale-selected {
background-color: #43516d;
border-radius: 4px;
}
.locale-text {
font-size: 18px;
white-space: nowrap;
}
</style>
</style>
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default {
request_coordinate_title: "Request Coordinate",
request_coordinate_text: "Request a Coordinage thats not in the database yet",
request_coordinate_invalid_syntax: "Not a valid Coordinate!",
request_coordinate_already_in_db: "Coordinate is already in database!",
request_coordinate_view_seed: "View in Map Explorer",
};
17 changes: 9 additions & 8 deletions frontend/src/content/en/components/navbar.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
export default {
"title": "MapsNotIncluded",
"map_explorer_link": "Map Explorer",
"world_trait_finder_link": "World Trait Finder",
"starmap_link": "StarMap Generator",
"contribute_link": "Contribute",
"discord_link": "Discord",
"github_link": "GitHub",
}
title: "MapsNotIncluded",
map_explorer_link: "Map Explorer",
world_trait_finder_link: "World Trait Finder",
seed_viewer_link: "Seed Viewer",
starmap_link: "StarMap Generator",
contribute_link: "Contribute",
discord_link: "Discord",
github_link: "GitHub",
};
24 changes: 13 additions & 11 deletions frontend/src/content/en/index.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import notFound from './view/not_found.js'
import about from './view/about.js'
import contribute from './view/contribute.js'
import home from './view/home.js'
import mapExplorerSteps from './view/map_explorer_steps.js'
import mapExplorer from './view/map_explorer.js'
import worldTraitFinder from './view/world_trait_finder.js'
import seedViewer from './view/seed_viewer.js'
import starmapGenerator from './view/starmap_generator.js'
import navbar from './components/navbar.js'
import notFound from "./view/not_found.js";
import about from "./view/about.js";
import contribute from "./view/contribute.js";
import home from "./view/home.js";
import mapExplorerSteps from "./view/map_explorer_steps.js";
import mapExplorer from "./view/map_explorer.js";
import worldTraitFinder from "./view/world_trait_finder.js";
import seedViewer from "./view/seed_viewer.js";
import starmapGenerator from "./view/starmap_generator.js";
import navbar from "./components/navbar.js";
import coordinateRequestDialog from "./components/coordinate_request_dialog.js";

export default {
navbar: navbar,
Expand All @@ -20,4 +21,5 @@ export default {
map_explorer: mapExplorer,
world_trait_finder: worldTraitFinder,
starmap_generator: starmapGenerator,
}
coordinate_request_dialog: coordinateRequestDialog,
};
Loading

0 comments on commit e287fb3

Please sign in to comment.