105 lines
3.6 KiB
Vue
105 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import axios from 'axios';
|
|
import { useToast } from 'vue-toast-notification';
|
|
import Button from '@app/components/Button.vue';
|
|
import Input from '@app/components/Input.vue';
|
|
|
|
const $toast = useToast();
|
|
|
|
const subnet = ref( '' );
|
|
const isLoading = ref( false );
|
|
const hasResults = ref( false );
|
|
const results = ref( {} );
|
|
|
|
/**
|
|
* Load subnet data based on input
|
|
*/
|
|
const getSubnetData = () => {
|
|
// Enable loading icon
|
|
isLoading.value = true;
|
|
|
|
// Create post data
|
|
const postData = new FormData();
|
|
postData.append( 'subnet', subnet.value );
|
|
|
|
// Send request
|
|
axios.post( '/api/subnet', postData ).then( (response) => {
|
|
const { data } = response;
|
|
|
|
// Load new block
|
|
isLoading.value = false;
|
|
hasResults.value = true;
|
|
results.value = data.result;
|
|
} ).catch( (error) => {
|
|
isLoading.value = false;
|
|
|
|
// Show error message
|
|
const errorMessage = error.response.data.message || 'Something went wrong.';
|
|
$toast.error(errorMessage, {
|
|
position: 'top',
|
|
duration: 1500,
|
|
});
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Reset form by resetting al vars
|
|
*/
|
|
const resetForm = () => {
|
|
subnet.value = '';
|
|
isLoading.value = false;
|
|
hasResults.value = false;
|
|
results.value = {};
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-center items-center min-h-screen">
|
|
<div class="sm:w-3/4 md:w-2/3 lg:w-2/4 xl:w-2/5 2xl:w-1/5 -translate-y-24">
|
|
<img src="https://www.bit.nl/assets/images/bit_logo_white.png" alt="BIT Logo" class="mx-auto w-52 mb-6">
|
|
|
|
<div class="bg-white p-10 rounded-xl shadow-2xl">
|
|
<h1 class="text-2xl font-semibold text-center mb-6">IPcalc-u-later</h1>
|
|
|
|
<div v-if="hasResults">
|
|
<table class="min-w-full table-auto text-left">
|
|
<tbody>
|
|
<tr class="">
|
|
<td class="py-2 font-medium">Network Address</td>
|
|
<td class="py-2 text-right">{{ results.network }}</td>
|
|
</tr>
|
|
<tr class="">
|
|
<td class="py-2 font-medium">First Usable IP</td>
|
|
<td class="py-2 text-right">{{ results.first }}</td>
|
|
</tr>
|
|
<tr class="">
|
|
<td class="py-2 font-medium">Last Usable IP</td>
|
|
<td class="py-2 text-right">{{ results.last }}</td>
|
|
</tr>
|
|
<tr class="">
|
|
<td class="py-2 font-medium">Number of Usable Hosts</td>
|
|
<td class="py-2 text-right">{{ results.hosts }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<Button @click="resetForm">Reset</Button>
|
|
</div>
|
|
|
|
<form v-else method="post" class="text-left" @submit.prevent="getSubnetData">
|
|
<div class="mb-4">
|
|
<label for="subnet" class="block text-sm font-medium">Enter Subnet</label>
|
|
|
|
<Input name="subnet" v-model="subnet" placeholder="(e.g. 192.168.1.0/24 or 2001:db8::/64)" />
|
|
</div>
|
|
|
|
<Button type="submit">
|
|
<i class="fa-solid fa-circle-notch fa-pulse" v-if="isLoading"></i>
|
|
<span v-else>Submit</span>
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|