adam-acs/inertia/pages/CommandsFleet.vue

<script setup lang="ts">
import { ref } from 'vue'
import { router } from '@inertiajs/vue3'
import { useI18n } from 'vue-i18n'
import TitleBar from '../components/TitleBar.vue'

const { t } = useI18n()

const { devices, commands } = defineProps<{
  devices: string[]
  commands: any[]
}>()

const actionTypes = [
  'SET_PARAMETER_VALUES',
  'GET_PARAMETER_VALUES',
  'GET_PARAMETER_NAMES',
  'SET_PARAMETER_ATTRIBUTES',
  'GET_PARAMETER_ATTRIBUTES',
  'DOWNLOAD',
  'UPLOAD',
  'REBOOT',
  'FACTORY_RESET',
  'SCHEDULE_INFORM',
  'REFRESH',
]

const form = ref({
  action: 'GET_PARAMETER_VALUES',
  mode: 'NI',
  priority: 1,
  parameters: '{}',
})

function sendFleetCommand() {
  let params: Record<string, any> = {}
  try {
    params = JSON.parse(form.value.parameters)
  } catch { /* ignore */ }

  router.post('/commands/fleet/command', {
    action: form.value.action,
    mode: form.value.mode,
    priority: form.value.priority,
    parameters: params,
    devices: devices,
  })
}
</script>

<template>
  <TitleBar section="commands" :subtitle="`— ${t('titles.commandsFleet')}`" />

  <div class="container-xxl py-4">
    <!-- Selected devices summary -->
    <div class="alert alert-info d-flex align-items-center mb-4">
      <svg class="me-2" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
      </svg>
      <span>
        <strong>{{ devices?.length || 0 }}</strong> {{ t('labels.devices').toLowerCase() }} sélectionné(s)
      </span>
    </div>

    <!-- Command form -->
    <div class="card">
      <div class="card-header">
        <h2 class="h5 mb-0">{{ t('titles.commandsFleet') }}</h2>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label fw-bold">{{ t('labels.action') }}</label>
            <select class="form-select" v-model="form.action">
              <option v-for="action in actionTypes" :key="action" :value="action">{{ action }}</option>
            </select>
          </div>
          <div class="col-md-3">
            <label class="form-label fw-bold">{{ t('labels.mode') }}</label>
            <select class="form-select" v-model="form.mode">
              <option value="NI">{{ t('options.NI') }}</option>
              <option value="I">{{ t('options.I') }}</option>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label fw-bold">{{ t('labels.priority') }}</label>
            <input type="number" class="form-control" v-model.number="form.priority" min="0" max="3" />
          </div>
        </div>

        <div class="row g-3 mt-1">
          <div class="col-12">
            <label class="form-label fw-bold">{{ t('labels.parameters') }} (JSON)</label>
            <textarea class="form-control font-monospace" v-model="form.parameters" rows="5" placeholder='{ "names": ["InternetGatewayDevice.DeviceInfo."] }'></textarea>
          </div>
        </div>

        <div class="mt-4">
          <button class="btn btn-primary" @click="sendFleetCommand">
            {{ t('button.send') }}
          </button>
        </div>
      </div>
    </div>

    <!-- Devices list -->
    <div class="card mt-4" v-if="devices && devices.length > 0">
      <div class="card-header">
        <h3 class="h6 mb-0">{{ t('labels.devices') }}</h3>
      </div>
      <ul class="list-group list-group-flush">
        <li v-for="deviceId in devices" :key="deviceId" class="list-group-item font-monospace small">
          {{ deviceId }}
        </li>
      </ul>
    </div>
  </div>
</template>