wg-portal/frontend/src/views/ProfileView.vue

<script setup>
import PeerViewModal from "../components/PeerViewModal.vue";

import {onMounted, ref} from "vue";
import {profileStore} from "@/stores/profile";
import PeerEditModal from "@/components/PeerEditModal.vue";
import {settingsStore} from "@/stores/settings";

const settings = settingsStore()
const profile = profileStore()

const viewedPeerId = ref("")
const editPeerId = ref("")

onMounted(async () => {
  await profile.LoadUser()
  await profile.LoadPeers()
  await profile.LoadStats()
})
</script>

<template>
  <PeerViewModal :peerId="viewedPeerId" :visible="viewedPeerId!==''" @close="viewedPeerId=''"></PeerViewModal>
  <PeerEditModal :peerId="editPeerId" :visible="editPeerId!==''" @close="editPeerId=''"></PeerEditModal>

  <!-- Peer list -->
  <div class="mt-4 row">
    <div class="col-12 col-lg-5">
      <h2 class="mt-2">{{ $t('profile.headline') }}</h2>
    </div>
    <div class="col-12 col-lg-4 text-lg-end">
      <div class="form-group d-inline">
        <div class="input-group mb-3">
          <input v-model="profile.filter" class="form-control" :placeholder="$t('general.search.placeholder')" type="text" @keyup="profile.afterPageSizeChange">
          <button class="input-group-text btn btn-primary" :title="$t('general.search.button')"><i class="fa-solid fa-search"></i></button>
        </div>
      </div>
    </div>
    <div class="col-12 col-lg-3 text-lg-end">
      <a v-if="settings.Setting('SelfProvisioning')" class="btn btn-primary ms-2" href="#" :title="$t('general.search.button-add-peer')" @click.prevent="editPeerId='#NEW#'"><i class="fa fa-plus me-1"></i><i class="fa fa-user"></i></a>
    </div>
  </div>
  <div class="mt-2 table-responsive">
    <div v-if="profile.CountPeers===0">
    <h4>{{ $t('profile.no-peer.headline') }}</h4>
    <p>{{ $t('profile.no-peer.abstract') }}</p>
    </div>
    <table v-if="profile.CountPeers!==0" id="peerTable" class="table table-sm">
      <thead>
      <tr>
        <th scope="col">
          <input id="flexCheckDefault" class="form-check-input" :title="$t('general.select-all')" type="checkbox" value="">
        </th><!-- select -->
        <th scope="col"></th><!-- status -->
        <th scope="col">{{ $t('profile.table-heading.name') }}</th>
        <th scope="col">{{ $t('profile.table-heading.ip') }}</th>
        <th v-if="profile.hasStatistics" scope="col">{{ $t('profile.table-heading.stats') }}</th>
        <th scope="col">{{ $t('profile.table-heading.interface') }}</th>
        <th scope="col"></th><!-- Actions -->
      </tr>
      </thead>
      <tbody>
        <tr v-for="peer in profile.FilteredAndPagedPeers" :key="peer.Identifier">
          <th scope="row">
            <input id="flexCheckDefault" class="form-check-input" type="checkbox" value="">
          </th>
          <td class="text-center">
            <span v-if="peer.Disabled" class="text-danger"><i class="fa fa-circle-xmark" :title="peer.DisabledReason"></i></span>
            <span v-if="!peer.Disabled && peer.ExpiresAt" class="text-warning"><i class="fas fa-hourglass-end" :title="peer.ExpiresAt"></i></span>
          </td>
          <td><span v-if="peer.DisplayName" :title="peer.Identifier">{{peer.DisplayName}}</span><span v-else :title="peer.Identifier">{{$filters.truncate(peer.Identifier, 10)}}</span></td>
          <td>
            <span v-for="ip in peer.Addresses" :key="ip" class="badge rounded-pill bg-light">{{ ip }}</span>
          </td>
          <td v-if="profile.hasStatistics">
            <div v-if="profile.Statistics(peer.Identifier).IsConnected">
              <span class="badge rounded-pill bg-success"><i class="fa-solid fa-link"></i></span> <span :title="peers.Statistics(peer.Identifier).LastHandshake">{{ $t('profile.peer-connected') }}</span>
            </div>
            <div v-else>
              <span class="badge rounded-pill bg-light"><i class="fa-solid fa-link-slash"></i></span>
            </div>
          </td>
          <td>{{peer.InterfaceIdentifier}}</td>
          <td class="text-center">
            <a href="#" :title="$t('profile.button-show-peer')" @click.prevent="viewedPeerId=peer.Identifier"><i class="fas fa-eye me-2"></i></a>
            <a href="#" :title="$t('profile.button-edit-peer')" @click.prevent="editPeerId=peer.Identifier"><i class="fas fa-cog"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <hr>
  <div class="mt-3">
    <div class="row">
      <div class="col-6">
        <ul class="pagination pagination-sm">
          <li :class="{disabled:profile.pageOffset===0}" class="page-item">
            <a class="page-link" @click="profile.previousPage">&laquo;</a>
          </li>

          <li v-for="page in profile.pages" :key="page" :class="{active:profile.currentPage===page}" class="page-item">
            <a class="page-link" @click="profile.gotoPage(page)">{{page}}</a>
          </li>

          <li :class="{disabled:!profile.hasNextPage}" class="page-item">
            <a class="page-link" @click="profile.nextPage">&raquo;</a>
          </li>
        </ul>
      </div>
      <div class="col-6">
        <div class="form-group row">
          <label class="col-sm-6 col-form-label text-end" for="paginationSelector">{{ $t('general.pagination.size') }}:</label>
          <div class="col-sm-6">
            <select v-model.number="profile.pageSize" class="form-select" @click="profile.afterPageSizeChange()">
              <option value="10">10</option>
              <option value="25">25</option>
              <option value="50">50</option>
              <option value="100">100</option>
              <option value="999999999">{{ $t('general.pagination.all') }}</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>