wireguard-manager-gui/wg_dashboard_frontend/src/app/page/dashboard/server/server.component.html

<mat-card class="dashboard-card" *ngIf="server.read_only == 0">

  <mat-card-header>
    <mat-card-title class="card-container-left">

      <mat-icon
        class="app-material-icon-valign"
        [class]="{'green': server.is_running, 'red': !server.is_running}"
        matTooltip="Indicates if the server is online or offline"
      >check_circle</mat-icon>
      {{server.interface}}

    </mat-card-title>
    <mat-card-title class="card-container-right">

      <app-modal-confirm
        *ngIf="server.read_only == 0"
        [noConfirm]="true"
        (onConfirm)="downloadServerConfig()"
        area="true"
        icon="get_app"
        hover="Download config zip for {{server.interface}}">
      </app-modal-confirm>

      <app-modal-confirm
        [qrCode]="true"
        [noConfirm]="false"
        area="true"
        icon="settings"
        title="Configuration"
        [text]="server.configuration"
        hover="Show config for {{server.interface}}">
      </app-modal-confirm>

      <app-modal-confirm
        *ngIf="server.read_only == 0"
        [noConfirm]="true"
        (onConfirm)="addPeer()"
        icon="person_add"
        hover="Add peer to {{server.interface}}">
      </app-modal-confirm>

      <app-modal-confirm
        *ngIf="!server.is_running"
        [noConfirm]="true"
        (onConfirm)="start()"
        icon="play_arrow"
        hover="Start {{server.interface}}">
      </app-modal-confirm>

      <app-modal-confirm
        *ngIf="server.is_running"
        [noConfirm]="false"
        (onConfirm)="stop()"
        title="Stop server {{server.interface}}?"
        text="Are you sure you want to stop this server? This may cause you or your clients to lose connection to the server."
        icon="stop"
        hover="Stop {{server.interface}}">
      </app-modal-confirm>

      <app-modal-confirm
        [noConfirm]="false"
        (onConfirm)="restart()"
        title="Restart server {{server.interface}}?"
        text="Are you sure you want to restart this server? This may cause you or your clients to lose connection to the server."
        icon="autorenew"
        hover="Restart {{server.interface}}">
      </app-modal-confirm>

      <app-modal-confirm
        *ngIf="server.read_only == 0"
        [noConfirm]="true"
        (onConfirm)="edit()"
        icon="edit"
        hover="Edit {{server.interface}}">
      </app-modal-confirm>

      <app-modal-confirm
        (onConfirm)="delete()"
        title="Delete {{server.interface}}"
        text="Are you sure you want to delete {{server.interface}}"
        icon="delete"
        hover="Delete {{server.interface}}">
      </app-modal-confirm>

    </mat-card-title>

    <mat-card-subtitle *ngIf="server.read_only == 0" style="margin-top: 2px;">Endpoint: <b>{{server.endpoint}}:{{server.listen_port}}</b> - Address: <b>{{server.address}}/{{server.subnet}}</b></mat-card-subtitle>

    <!-- Read-only, usually client "fake-server" -->
    <mat-card-subtitle *ngIf="server.read_only == 1" style="margin-top: 2px;">
      Address: <b>{{server.peers[0].address}}, {{server.peers[0].v6_address}}</b>
      <br>DNS: <b>{{server.peers[0].dns}}</b>
      <br>Allowed-IP's <b>{{server.peers[0].allowed_ips}}</b>
      <br>Endpoint: <b>{{ getEndpointFromConfig(server.peers[0].configuration)}}</b>
    </mat-card-subtitle>
  </mat-card-header>

  <mat-card-content *ngIf="server.read_only == 0" class="dashboard-card-content">


    <table class="table" >
      <thead>
        <tr>
          <th>Name</th>
          <th>Address</th>
          <th>Public-Key</th>
          <th>Total tx/rx</th>
          <th>Handshake</th>
          <th>Manage</th>
        </tr>
      </thead>


      <tbody>
        <ng-container *ngFor="let peer of server.peers; let idx = index;" (click)="selectedPeer = (selectedPeer != peer)? peer : null">

            <tr (click)="openPeer(peer)">
              <td>
                <i *ngIf="{ a: (peer._stats && peer._stats.handshake && (peer._stats.handshake.split(' ')[1] === 'seconds' || pInt(peer._stats.handshake.split(' ')[0]) < 3))}; let isRunning"class="material-icons table-icon app-material-icon-valign" [ngClass]="{'green': isRunning.a, 'red': !isRunning.a}">check_circle</i>
                {{peer.name}}</td>
              <td>{{peer.address}}</td>
              <td>{{peer.public_key}}</td>
              <td>{{peer._stats?.tx || '0'}}/{{peer._stats?.rx || '0'}}</td>
              <td> {{peer._stats?.handshake || 'N/A'}}</td>
              <td>

                <!-- Download Button -->
                <app-modal-confirm
                  [noConfirm]="true"
                  (onConfirm)="downloadPeerConfig(peer); $event.stopPropagation();"
                  icon="get_app"
                  hover="Download configuration for {{peer.name}}">
                </app-modal-confirm>


                <!-- Edit buttons -->
                <app-modal-confirm
                  [noConfirm]="true"
                  (onConfirm)="selectedPeer=peer; this.editPeerEmitter.emit({type: 'edit', peer: peer});"
                  icon="edit"
                  hover="Edit {{peer.name}}">
                </app-modal-confirm>

                <app-modal-confirm
                  [noConfirm]="false"
                  (onConfirm)="this.editPeerEmitter.emit({type: 'delete', peer: peer});"
                  text="Are you sure you want to delete {{peer.name}} ({{peer.public_key}})?"
                  title="Delete {{peer.name}}"
                  icon="delete"
                  hover="Delete {{peer.name}} ({{peer.public_key}})">
                </app-modal-confirm>



              </td>

            </tr>
            <tr [hidden]="peer !== selectedPeer">
              <td colspan="6">
                  <app-peer
                    [cbOnPeerUpdate]="onPeerUpdate"
                    [onEvent]="this.editPeerEmitter"
                    [(peer)]="server.peers[idx]"
                    [(server)]="server">
                  </app-peer>
              </td>
            </tr>


        </ng-container>
      </tbody>
    </table>




  </mat-card-content>
  <mat-card-actions>
  </mat-card-actions>
</mat-card>

<ng-container *ngIf="server.read_only == 1">

  <mat-card class="dashboard-card" *ngFor="let srv_peer of server.peers">

    <mat-card-header>
      <mat-card-title class="card-container-left">

        <mat-icon
          class="app-material-icon-valign"
          [class]="{'green': server.is_running, 'red': !server.is_running}"
          matTooltip="Indicates if the server is online or offline"
        >check_circle</mat-icon>
        {{srv_peer.name}}

      </mat-card-title>
      <mat-card-title class="card-container-right">

        <app-modal-confirm
          [qrCode]="true"
          [noConfirm]="false"
          area="true"
          icon="settings"
          title="Configuration"
          [text]="server.configuration"
          hover="Show config for {{server.interface}}">
        </app-modal-confirm>

        <app-modal-confirm
          *ngIf="!server.is_running"
          [noConfirm]="true"
          (onConfirm)="start()"
          icon="play_arrow"
          hover="Start {{server.interface}}">
        </app-modal-confirm>

        <app-modal-confirm
          *ngIf="server.is_running"
          [noConfirm]="false"
          (onConfirm)="stop()"
          title="Stop server {{server.interface}}?"
          text="Are you sure you want to stop this server? This may cause you or your clients to lose connection to the server."
          icon="stop"
          hover="Stop {{server.interface}}">
        </app-modal-confirm>

        <app-modal-confirm
          [noConfirm]="false"
          (onConfirm)="restart()"
          title="Restart server {{server.interface}}?"
          text="Are you sure you want to restart this server? This may cause you or your clients to lose connection to the server."
          icon="autorenew"
          hover="Restart {{server.interface}}">
        </app-modal-confirm>

        <app-modal-confirm
          (onConfirm)="delete()"
          title="Delete {{server.interface}}"
          text="Are you sure you want to delete {{server.interface}}"
          icon="delete"
          hover="Delete {{server.interface}}">
        </app-modal-confirm>

      </mat-card-title>

      <!-- Read-only, usually client "fake-server" -->
      <mat-card-subtitle style="margin-top: 2px;">
        Address: <b>{{srv_peer.address}}, {{srv_peer.v6_address}}</b>
        <br>DNS: <b>{{srv_peer.dns}}</b>
        <br>Allowed-IP's <b>{{srv_peer.allowed_ips}}</b>
        <br>Endpoint: <b>{{ getEndpointFromConfig(srv_peer.configuration)}}</b>
      </mat-card-subtitle>
    </mat-card-header>

    <mat-card-content class="dashboard-card-content">


    </mat-card-content>
    <mat-card-actions>
    </mat-card-actions>
  </mat-card>

</ng-container>