mirror of
https://github.com/DJ2LS/FreeDATA
synced 2024-05-14 08:04:33 +00:00
124 lines
3.9 KiB
Vue
124 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { saveSettingsToFile } from "../js/settingsHandler";
|
|
|
|
import { setActivePinia } from "pinia";
|
|
import pinia from "../store/index";
|
|
setActivePinia(pinia);
|
|
|
|
import { useSettingsStore } from "../store/settingsStore.js";
|
|
const settings = useSettingsStore(pinia);
|
|
|
|
function saveSettings() {
|
|
saveSettingsToFile();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card mb-1">
|
|
<div class="card-header p-1">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-1">
|
|
<i class="bi bi-house-door" style="font-size: 1.2rem"></i>
|
|
</div>
|
|
<div class="col-10">
|
|
<strong class="fs-5">My station</strong>
|
|
</div>
|
|
<div class="col-1 text-end">
|
|
<button
|
|
type="button"
|
|
id="openHelpModalStation"
|
|
data-bs-toggle="modal"
|
|
data-bs-target="#stationHelpModal"
|
|
class="btn m-0 p-0 border-0"
|
|
>
|
|
<i class="bi bi-question-circle" style="font-size: 1rem"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-2">
|
|
<div class="row">
|
|
<div class="col-md-auto">
|
|
<div
|
|
class="input-group input-group-sm mb-0"
|
|
data-bs-placement="bottom"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-trigger="hover"
|
|
data-bs-html="false"
|
|
title="Enter your callsign and save it"
|
|
>
|
|
<span class="input-group-text">
|
|
<i class="bi bi-person-bounding-box" style="font-size: 1rem"></i>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
style="width: 5rem; text-transform: uppercase"
|
|
placeholder="callsign"
|
|
pattern="[A-Z]*"
|
|
id="myCall"
|
|
maxlength="8"
|
|
aria-label="Input group"
|
|
aria-describedby="btnGroupAddon"
|
|
v-model="settings.mycall"
|
|
@input="saveSettings"
|
|
/>
|
|
<select
|
|
class="form-select form-select-sm"
|
|
aria-label=".form-select-sm"
|
|
id="myCallSSID"
|
|
v-model="settings.myssid"
|
|
@change="saveSettings"
|
|
>
|
|
<option selected value="0">0</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
<option value="6">6</option>
|
|
<option value="7">7</option>
|
|
<option value="8">8</option>
|
|
<option value="9">9</option>
|
|
<option value="10">10</option>
|
|
<option value="11">11</option>
|
|
<option value="12">12</option>
|
|
<option value="13">13</option>
|
|
<option value="14">14</option>
|
|
<option value="15">15</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-auto">
|
|
<div
|
|
class="input-group input-group-sm mb-0"
|
|
data-bs-placement="bottom"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-trigger="hover"
|
|
data-bs-html="false"
|
|
title="Enter your gridsquare and save it"
|
|
>
|
|
<span class="input-group-text">
|
|
<i class="bi bi-house-fill" style="font-size: 1rem"></i>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
class="form-control mr-1"
|
|
style="max-width: 6rem"
|
|
placeholder="locator"
|
|
id="myGrid"
|
|
maxlength="6"
|
|
aria-label="Input group"
|
|
aria-describedby="btnGroupAddon"
|
|
v-model="settings.mygrid"
|
|
@input="saveSettings"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end of row-->
|
|
</div>
|
|
</div>
|
|
</template>
|