<template>
  <div class="table-container">
    <table class="responsive-table">
      <thead>
        <tr>
          <th>Node/Name</th>
          <th>Status</th>
          <th>Latitude</th>
          <th>Longitude</th>
          <th>Battery</th>
          <th>Gemessene - Temperatur</th>
          <th>Laufzeit</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(node, index) in tableData" :key="index">
          <td>{{ node.name }}</td>
          <td>
            <span :class="node.status === 'ONLINE' ? 'status-online' : 'status-offline'">
              {{ node.status }}
            </span>
          </td>
          <td>{{ node.position.lat }}</td>
          <td>{{ node.position.lng }}</td>
          <td>{{ calculateBatteryPercentage(node.batteryVoltage, node.minVoltage, node.maxVoltage) }}%</td>
          <td>{{ node.temperature }}°C</td>
          <td>{{ node.runtime }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

//folgende Mockdaten rausnehmen und mit axios requests abfragen

export default {
  data() {
    return {
      tableData: [
        {
          name: "XXXX-XXXX-XXXX-XXXX",
          status: "ONLINE",
          position: { lat: 40.7128, lng: 74.0012 },
          batteryVoltage: 3.9, 
          minVoltage: 3.0,    
          maxVoltage: 4.2,     
          temperature: 100,
          runtime: "12h 30m 12s",
        },
        {
          name: "XXXX-XXXX-XXXX-XXXX",
          status: "OFFLINE",
          position: { lat: 40.7128, lng: 74.0012 },
          batteryVoltage: 3.2,
          minVoltage: 3.0,
          maxVoltage: 4.2,
          temperature: 100,
          runtime: "30m",
        },
        {
          name: "Localnode-3",
          status: "ONLINE",
          position: { lat: 40.7128, lng: 74.0012 },
          batteryVoltage: 3.7,
          minVoltage: 3.0,
          maxVoltage: 4.2,
          temperature: 100,
          runtime: "12h 30m 12s",
        },
        {
          name: "XXXX-XXXX-XXXX-XXXX",
          status: "ONLINE",
          position: { lat: 40.7128, lng: 74.0012 },
          batteryVoltage: 3.8,
          minVoltage: 3.0,
          maxVoltage: 4.2,
          temperature: 100,
          runtime: "12h 30m 12s",
        },
        {
          name: "XXXX-XXXX-XXXX-XXXX",
          status: "ONLINE",
          position: { lat: 40.7128, lng: 74.0012 },
          batteryVoltage: 3.1,
          minVoltage: 3.0,
          maxVoltage: 4.2,
          temperature: 100,
          runtime: "12h 30m 12s",
        },
        {
          name: "XXXX-XXXX-XXXX-XXXX",
          status: "OFFLINE",
          position: { lat: 40.7128, lng: 74.0012 },
          batteryVoltage: 3.0,
          minVoltage: 3.0,
          maxVoltage: 4.2,
          temperature: 100,
          runtime: "12h 30m 12s",
        },
        {
          name: "XXXX-XXXX-XXXX-XXXX",
          status: "ONLINE",
          position: { lat: 40.7128, lng: 74.0012 },
          batteryVoltage: 3.6,
          minVoltage: 3.0,
          maxVoltage: 4.2,
          temperature: 100,
          runtime: "12h 30m 12s",
        },
      ],
    };
  },
  methods: {
    calculateBatteryPercentage(currentVoltage, minVoltage, maxVoltage) {
      if (currentVoltage <= minVoltage) {
        return 0;
      } else if (currentVoltage >= maxVoltage) {
        return 100;
      } else {
        return ((currentVoltage - minVoltage) / (maxVoltage - minVoltage) * 100).toFixed(2);
      }
    }
  }
};
</script>

<style scoped>
.table-container {
  background-color: white;
  padding: 0.5rem 1rem;
  margin: 0 auto;
  width: 100%;
  overflow-x: auto;
}

.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: auto;
}

.responsive-table th,
.responsive-table td {
  padding: 0.5rem;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.responsive-table th {
  font-weight: bold;
}

.responsive-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.status-online {
  color: green;
  font-weight: bold;
}

.status-offline {
  color: red;
  font-weight: bold;
}
</style>
