finished grid items

freedata_gui/src/components/dynamic_components.vue

@@ -518,7 +518,7 @@ onMounted(() => {
    <!-- <i class="bi bi-grip-vertical h5">      </i>-->
 
   <span class="me-4 text-white" style="writing-mode: vertical-rl; transform: rotate(180deg);">
-    grid edit
+    {{ $t('grid.gridedit') }}
   </span>
 
 
@@ -560,7 +560,7 @@ onMounted(() => {
   >
     <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasGridItemsLabel">
-        Manage grid widgets &nbsp;<button
+        {{ $t('grid.managegridwidgets') }} &nbsp;<button
         class="btn btn-sm"
         :class="settingsStore.local.grid_enabled == true ? 'btn-outline-success' : 'btn-outline-danger'"
         type="button"
@@ -580,7 +580,7 @@ onMounted(() => {
     </div>
     <div class="offcanvas-body">
       <p>
-        Grid widgets allow you to customize the display. You may add additional widgets to fit your needs. You can move and resize the individual widgets!
+        {{ $t('grid.gridwidgetsdescription') }}
       </p>
       <div>
         <button
@@ -588,14 +588,14 @@ onMounted(() => {
           type="button"
           @click="quickfill"
         >
-          Fill grid with common widgets
+          {{ $t('grid.fillgrid') }}
         </button>
         <button
           class="btn btn-outline-primary"
           type="button"
           @click="quickfillSM"
         >
-          Fill grid for small screens
+          {{ $t('grid.fillgridsmallscreen') }}
         </button>
       </div>
       <hr />
@@ -612,7 +612,7 @@ onMounted(() => {
               aria-expanded="true"
               aria-controls="collapseHeardStations"
             >
-              <strong>Activity</strong>
+              <strong>{{ $t('grid.activity') }}</strong>
             </button>
           </h2>
           <div
@@ -636,7 +636,7 @@ onMounted(() => {
               aria-expanded="false"
               aria-controls="collapseActivities"
             >
-              <strong>Audio</strong>
+              <strong>{{ $t('grid.audio') }}</strong>
             </button>
           </h2>
           <div
@@ -659,7 +659,7 @@ onMounted(() => {
               aria-expanded="false"
               aria-controls="collapseBroadcasts"
             >
-              <strong>Broadcasts</strong>
+              <strong>{{ $t('grid.broadcasts') }}</strong>
             </button>
           </h2>
           <div
@@ -682,7 +682,7 @@ onMounted(() => {
               aria-expanded="false"
               aria-controls="collapseRadioControl"
             >
-              <strong>Radio Control/Status</strong>
+              <strong>{{ $t('grid.radiocontrol') }}</strong>
             </button>
           </h2>
           <div
@@ -706,7 +706,7 @@ onMounted(() => {
               aria-expanded="false"
               aria-controls="collapseAudioControl"
             >
-              <strong>Statistics</strong>
+              <strong>{{ $t('grid.statistics') }}</strong>
             </button>
           </h2>
           <div
@@ -730,7 +730,7 @@ onMounted(() => {
               aria-expanded="false"
               aria-controls="collapseStatistics"
             >
-              <strong>Other</strong>
+              <strong>{{ $t('grid.other') }}</strong>
             </button>
           </h2>
           <div
@@ -748,27 +748,27 @@ onMounted(() => {
         class="btn btn-sm btn-outline-warning"
         type="button"
         @click="clearAllItems"
-        title="Clear all items from the grid"
+        :title="$t('grid.cleargrid_help')"
       >
-        Clear grid
+        {{ $t('grid.cleargrid') }}
       </button>
       <hr/>
       <button
         class="btn btn-sm btn-outline-dark"
         type="button"
         @click="loadPreset"
-        title="Restore your saved grid preset (clears current grid)"
+        :title="$t('grid.restorepreset_help')"
       >
 
-        Restore preset
+        {{ $t('grid.restorepreset') }}
       </button>&nbsp;
       <button
         class="btn btn-sm btn-outline-dark"
         type="button"
         @click="savePreset"
-        title="Save current grid layout as a preset that can be restored using restore preset button"
+        :title="$t('grid.savepreset_help')"
       >
-        Save preset
+        {{ $t('grid.savepreset') }}
       </button>
     </div>
   </div>
@@ -776,7 +776,7 @@ onMounted(() => {
   <div class="offcanvas offcanvas-end text-start"     data-bs-scroll="true"
     data-bs-backdrop="false" tabindex="-1" id="offcanvasFrequency" aria-labelledby="offcanvasExampleLabel">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Frequency selection</h5>
+    <h5 class="offcanvas-title" id="offcanvasExampleLabel">{{ $t('grid.frequencyselection') }}</h5>
       <button
         type="button"
         class="btn-close"
@@ -789,7 +789,7 @@ onMounted(() => {
   </div>
   <div class="offcanvas-body">
     <p>
-    Commonly used frequencies are listed here, and are all USB.&nbsp; Simply click on a entry or manually enter a frequency in the textbox to tune your rig if rig control is enabled.
+      {{ $t('grid.frequencydescription') }}
     </p>
     <ul
               class="list-group"
@@ -798,7 +798,7 @@ onMounted(() => {
             >
               <li class="list-group-item">
                 <div class="input-group p-1">
-                  <span class="input-group-text">frequency</span>
+                  <span class="input-group-text">{{ $t('general.frequency') }}</span>
                   <input
                     v-model="state.new_frequency"
                     style="max-width: 8rem"

freedata_gui/src/components/grid/grid_CQ.vue

@@ -29,7 +29,7 @@ async function handleCQCall() {
     <a
       class="btn btn-sm btn-secondary d-flex justify-content-center align-items-center object-fill border rounded w-100 h-100"
       @click="handleCQCall"
-      title="Send a CQ call!"
+      :title="$t('grid.components.callcq') "
     >
       <span v-if="!isCQButtonDisabled">CQ</span>
       <span v-else>...</span>

freedata_gui/src/components/grid/grid_active_audio.vue

@@ -11,7 +11,7 @@ const state = useStateStore(pinia);
   <div class="card w-100 h-100">
     <div class="card-header mb-1">
       <i class="bi bi-volume-up" style="font-size: 1rem"></i>&nbsp;
-      <strong>Audio</strong>
+      <strong>{{ $t('grid.components.audio') }}</strong>
     </div>
     <div class="card-body pt-0 pb-0">
       <div class="container-wide">

freedata_gui/src/components/grid/grid_active_broadcasts.vue

@@ -69,7 +69,7 @@ window.addEventListener(
   <div class="card h-100">
     <div class="card-header">
       <i class="bi bi-broadcast" style="font-size: 1.2rem"></i>&nbsp;
-      <strong>Broadcasts</strong>
+      <strong>{{ $t('grid.componments.broadcasts') }}</strong>
     </div>
     <div class="card-body overflow-auto">
       <div class="input-group">
@@ -95,8 +95,8 @@ window.addEventListener(
           title="Send a ping request to a remote station"
           @click="transmitPing"
         >
-                          <strong v-if="!isPingButtonDisabled">PING Station</strong>
-                <strong v-else>Sending...</strong>
+                          <strong v-if="!isPingButtonDisabled">{{ $t('grid.components.pingstation') }}</strong>
+                <strong v-else>{{ $t('grid.components.transmitting') }}</strong>
         </button>
 
         <button
@@ -106,8 +106,8 @@ window.addEventListener(
           title="Send a CQ to the world"
           @click="handleSendCQ"
         >
-          <span v-if="!isCQButtonDisabled">Call CQ</span>
-                <span v-else>Sending CQ...</span>
+          <span v-if="!isCQButtonDisabled">{{ $t('grid.components.callcq') }}</span>
+                <span v-else>{{ $t('grid.components.sendingcq') }}</span>
         </button>
 
         <button
@@ -119,9 +119,9 @@ window.addEventListener(
             'btn-success': state.beacon_state,
             'btn-outline-secondary': !state.beacon_state,
           }"
-          title="Toggle beacon mode. The interval can be set in settings. While sending a beacon, you can receive ping requests and open a datachannel. If a datachannel is opened, the beacon pauses."
+          :title=" $t('grid.components.togglebeacon_help')"
         >
-          Toggle beacon
+          {{ $t('grid.components.togglebeacon') }}
         </button>
       </div>
       <!-- end of row-->

freedata_gui/src/components/grid/grid_active_broadcasts_vert.vue

@@ -72,7 +72,7 @@ window.addEventListener(
   <div class="card h-100">
     <div class="card-header">
       <i class="bi bi-broadcast" style="font-size: 1.2rem"></i>&nbsp;
-      <strong>Broadcasts</strong>
+      <strong>{{ $t('grid.components.broadcasts') }}</strong>
     </div>
     <div class="card-body overflow-auto p-0">
       <div class="container text-center">
@@ -90,7 +90,7 @@ window.addEventListener(
                   maxlength="11"
                   pattern="[A-Z]*"
                 />
-                <label for="floatingInput">DX-Callsign</label>
+                <label for="floatingInput">{{ $t('grid.components.dxcall') }}</label>
               </div>
               <button
                 class="btn btn-sm btn-outline-secondary"
@@ -104,8 +104,8 @@ window.addEventListener(
                 @click="transmitPing"
                 :disabled="isPingButtonDisabled"
               >
-                <strong v-if="!isPingButtonDisabled">PING Station</strong>
-                <strong v-else>Sending ping...</strong>
+                <strong v-if="!isPingButtonDisabled">{{ $t('grid.components.pingstation') }}</strong>
+                <strong v-else>{{ $t('grid.components.sendingping') }}</strong>
               </button>
             </div>
           </div>
@@ -122,8 +122,8 @@ window.addEventListener(
               :disabled="isCQButtonDisabled"
             >
               <h3>
-                <span v-if="!isCQButtonDisabled">CQ CQ CQ</span>
-                <span v-else>Sending CQ...</span>
+                <span v-if="!isCQButtonDisabled">{{ $t('grid.components.cqcqcq') }}</span>
+                <span v-else>{{ $t('grid.components.sendingcq') }}</span>
               </h3>
             </button>
           </div>
@@ -140,7 +140,7 @@ window.addEventListener(
                 v-model="state.beacon_state"
                 @click="startStopBeacon"
               />
-              <label class="form-check-label" for="flexSwitchBeacon">Enable Beacon</label>
+              <label class="form-check-label" for="flexSwitchBeacon">{{ $t('grid.components.enablebeacon') }}</label>
             </div>
           </div>
 
@@ -154,7 +154,7 @@ window.addEventListener(
                 v-model="state.away_from_key"
                 @change="setAwayFromKey"
               />
-              <label class="form-check-label" for="flexSwitchAFK">Away From Key</label>
+              <label class="form-check-label" for="flexSwitchAFK">{{ $t('grid.components.awayfromkey') }}</label>
             </div>
           </div>
         </div>

freedata_gui/src/components/grid/grid_active_heard_stations.vue

@@ -88,7 +88,7 @@ function transmitPing(callsign) {
     <!--325px-->
     <div class="card-header">
       <i class="bi bi-list-columns-reverse" style="font-size: 1.2rem"></i>&nbsp;
-      <strong>Heard stations</strong>
+      <strong>{{ $t('grid.components.heardstations') }}</strong>
     </div>
 
     <div class="card-body overflow-auto p-0">
@@ -97,14 +97,14 @@ function transmitPing(callsign) {
         <table class="table table-sm table-striped" id="tblHeardStationList">
           <thead>
             <tr>
-              <th scope="col" id="thTime">Time</th>
-              <th scope="col" id="thFreq">Freq</th>
-              <th scope="col" id="thDxcall">DXCall</th>
-              <th scope="col" id="thDxgrid">Grid</th>
-              <th scope="col" id="thDist">Dist</th>
-              <th scope="col" id="thType">Type</th>
-              <th scope="col" id="thSnr">SNR</th>
-              <th scope="col" id="thSnr">AFK?</th>
+              <th scope="col" id="thTime">{{ $t('grid.components.time') }}</th>
+              <th scope="col" id="thFreq">{{ $t('grid.components.freq') }}</th>
+              <th scope="col" id="thDxcall">{{ $t('grid.components.dxcall') }}</th>
+              <th scope="col" id="thDxgrid">{{ $t('grid.components.grid') }}</th>
+              <th scope="col" id="thDist">{{ $t('grid.components.dist') }}</th>
+              <th scope="col" id="thType">{{ $t('grid.components.type') }}</th>
+              <th scope="col" id="thSnr">{{ $t('grid.components.snr') }}</th>
+              <th scope="col" id="thSnr">{{ $t('grid.components.afk') }}</th>
             </tr>
           </thead>
           <tbody id="gridHeardStations">

freedata_gui/src/components/grid/grid_active_heard_stations_mini.vue

@@ -36,7 +36,7 @@ function pushToPing(origin) {
   <div class="card h-100">
     <div class="card-header">
       <i class="bi bi-list-columns-reverse" style="font-size: 1.2rem"></i>&nbsp;
-      <strong>Heard Stations</strong>
+      <strong>{{ $t('grid.components.heardstations') }}</strong>
     </div>
 
     <div class="card-body overflow-auto p-0">
@@ -45,8 +45,8 @@ function pushToPing(origin) {
         <table class="table table-sm table-striped">
           <thead>
             <tr>
-              <th scope="col">Time</th>
-              <th scope="col">DX Call</th>
+              <th scope="col">Tim{{ $t('grid.components.time') }}e</th>
+              <th scope="col">{{ $t('grid.components.dxcall') }}</th>
             </tr>
           </thead>
           <tbody>

freedata_gui/src/components/grid/grid_active_rig_control.vue

@@ -36,7 +36,7 @@ function setRadioParameterTuner() {
   <div class="card h-100">
     <div class="card-header">
       <i class="bi bi-house-door" style="font-size: 1.2rem"></i>&nbsp;
-      <strong>Radio control</strong>
+      <strong>{{ $t('grid.components.radiocontrol') }}</strong>
     </div>
 
     <div class="card-body overflow-auto p-2">
@@ -58,7 +58,7 @@ function setRadioParameterTuner() {
 
         <div class="me-2">
           <div class="input-group input-group-sm">
-            <span class="input-group-text">Mode</span>
+            <span class="input-group-text">{{ $t('grid.components.radiocontrolmode') }}</span>
             <select
               class="form-control"
               v-model="state.mode"
@@ -75,7 +75,7 @@ function setRadioParameterTuner() {
 
         <div class="me-2">
           <div class="input-group input-group-sm">
-            <span class="input-group-text">% Power</span>
+            <span class="input-group-text">{{ $t('grid.components.powerpercent') }}</span>
             <select
               class="form-control"
               v-model="state.rf_level"
@@ -116,7 +116,7 @@ function setRadioParameterTuner() {
             v-model="state.tuner"
             @change="setRadioParameterTuner"
           />
-          <label class="form-check-label" for="flexSwitchTuner">Tuner</label>
+          <label class="form-check-label" for="flexSwitchTuner">{{ $t('grid.components.tuner') }}</label>
         </div>
       </div>
     </div>

freedata_gui/src/components/grid/grid_activities.vue

@@ -26,7 +26,7 @@ function getDateTime(timestampRaw) {
   <div class="card h-100">
     <div class="card-header">
       <i class="bi bi-card-list" style="font-size: 1.2rem"></i>&nbsp;
-      <strong>Activity</strong>
+      <strong>{{ $t('grid.components.activity') }}</strong>
     </div>
     <div class="card-body overflow-auto m-0" style="align-items: start">
       <div v-for="item in state.activities" :key="item[0]">

freedata_gui/src/components/grid/grid_beacon.vue

@@ -23,7 +23,7 @@ function startStopBeacon() {
       @click="startStopBeacon"
       title="Enable/disable periodic beacons"
     >
-      Beacon 
+      {{ $t('grid.components.beacon') }} 
       <span
         role="status"
         :class="{

freedata_gui/src/components/grid/grid_ping.vue

@@ -43,10 +43,10 @@ window.addEventListener(
       data-bs-toggle="tooltip"
       data-bs-trigger="hover"
       data-bs-html="false"
-      title="Send a ping request to a remote station"
+      :title="$t('grid.components.ping_help')"
       @click="transmitPing"
     >
-      Ping
+      {{ $t('grid.components.ping') }}
     </a>
   </div>
 </template>

freedata_gui/src/components/grid/grid_ptt.vue

@@ -12,6 +12,6 @@ const state = useStateStore(pinia);
     class="d-flex justify-content-center align-items-center object-fill border rounded w-100 h-100"
     :class="state.ptt_state ? 'text-bg-warning' : 'text-bg-white'"
   >
-    <h2>ON AIR</h2>
+    <h2>{{ $t('grid.components.onair').toUpperCase() }}</h2>
   </div>
 </template>

freedata_gui/src/components/grid/grid_scatter.vue

@@ -95,7 +95,7 @@ const scatterChartData = computed(() => ({
     <!--325px-->
     <div class="card-header">
       <i class="bi bi-border-outer" style="font-size: 1.2rem"></i>&nbsp;
-      <strong>Scatter diagram</strong>
+      <strong>{{ $t('grid.components.scatterdiagram') }}</strong>
     </div>
     <div class="card-body overflow-auto p-0">
       <Scatter :data="scatterChartData" :options="scatterChartOptions" />

freedata_gui/src/components/grid/grid_stats_chart.vue

@@ -98,7 +98,7 @@ const transmissionSpeedChartData = computed(() => ({
     <!--325px-->
     <div class="card-header">
       <i class="bi bi-graph-up-arrow" style="font-size: 1.2rem"></i>&nbsp;
-      <strong>Transmission Charts</strong>
+      <strong>{{ $t('grid.components.transmissioncharts') }}</strong>
     </div>
     <div class="card-body overflow-auto p-0">
   <Line

freedata_gui/src/components/grid/grid_stop.vue

@@ -19,7 +19,7 @@ function stopAllTransmissions() {
     data-bs-trigger="hover"
     data-bs-html="false"
     @click="stopAllTransmissions"
-    title="Abort session and stop transmissions"
+    :title="$t('grid.components.stop_help')"
   >
     <i class="bi bi-sign-stop-fill h1"></i>
   </a>

freedata_gui/src/components/grid/grid_tune.vue

@@ -16,7 +16,7 @@ setActivePinia(pinia);
       data-bs-target="#audioModal"
       title="Tune"
     >
-      Tune
+      {{ $t('grid.components.tune') }}
     </a>
   </div>
 </template>

freedata_gui/src/locales/en_English.json

@@ -9,7 +9,64 @@
         "dxcallsign": "dxcallsign",
         "destination": "destination",
         "stop": "Stop",
-        "modem": "Modem"
+        "modem": "Modem",
+        "frequency": "frequency"
+    },
+    "grid": {
+        "frequencydescription": "Commonly used frequencies are listed here, and are all USB. Simply click on a entry or manually enter a frequency in the textbox to tune your rig if rig control is enabled.",
+        "frequencyselection": "Frequency selection",
+        "savepreset": "Save preset",
+        "savepreset_help": "Save current grid layout as a preset that can be resotred using restore preset button",
+        "restorepreset": "Restore preset",
+        "restorepreset_help": "Restore your saved grid preset (clears current grid)",
+        "cleargrid": "Clear grid",
+        "cleargrid_help": "Clear all items from the grid",
+        "gridedit": "grid edit",
+        "managegridwidgets": "Manage grid widgets",
+        "gridwidgetsdescription": "Grid widgets allow you to customize the display. You may add additional widgets to fit your needs. You can move and resize the individual widgets!",
+        "fillgrid": "Fill grid with common widgets",
+        "fillgridsmallscreen": "Fill grid for small screens",
+        "activity": "Activity",
+        "audio": "Audio",
+        "broadcasts": "Broadcasts",
+        "radiocontrol": "Radio control/Status",
+        "statistics": "Statistics",
+        "other": "Other",
+        "components": {
+            "tune": "Tune",
+            "stop_help": "Abort session and stop transmissions",
+            "transmissioncharts": "Transmission charts",
+            "scatterdiagram": "Scatter diagram",
+            "onair": "on air",
+            "ping": "Ping",
+            "ping_help": "Send a ping reqiuest to a remote station",
+            "heardstations": "Heard Stations",
+            "time": "Time",
+            "freq": "Freq",
+            "dxcall": "DXCall",
+            "grid": "Grid",
+            "dist": "Dist",
+            "type": "Type",
+            "snr": "SNR",
+            "afk": "AFK?",
+            "audio": "Audio",
+            "broadcasts": "Broadcasts",
+            "transmitting": "Sending...",
+            "pingstation": "PING Station",
+            "sendingcq": "Sending CQ...",
+            "callcq": "Call CQ",
+            "cqcqcq": "CQ CQ CQ",
+            "togglebeacon": "toggle beacon",
+            "togglebeacon_help": "Toggle beacon mode. While sending a beacon, you can receive ping requests and open a datachannel. If a datachannel is openend, the beacon pauses.",
+            "enablebeacon": "Enable beacon",
+            "awayfromkey": "Away from key",
+            "radiocontrol": "Radio control",
+            "radiocontrolmode": "Mode",
+            "powerpercent": "% Power",
+            "tuner": "Tuner",
+            "activity": "Activity",
+            "beacon": "Beacon"
+        }
     },
     "modals": {
         "close": "Close",