{% extends 'navbar.html'%}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<div class="row mt-2">
    <div class="col">
        <h2 class="ms-4">{{miner}}</h2>
    </div>
    <div class="col">
        <div class="d-flex flex-row-reverse">
        <a class="btn btn-outline-danger mx-1" href="#" role="button">Remove</a>
        <a class="btn btn-primary mx-1" target="_blank" href="http://{{miner}}" role="button">Web Interface</a>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-10">
        <canvas id="line-chart" class="grad-border mt-3" width="600" height="360"></canvas>
    </div>
    <div class="col-2 mt-2">
        <div class="d-flex justify-content-center">Fan 1</div>
        <canvas class="mb-2" id="fan-chart-1" width="100" height="100"></canvas>
        <div class="d-flex justify-content-center">Fan 2</div>
        <canvas class="mb-2" id="fan-chart-2" width="100" height="100"></canvas>
        <div class="d-flex justify-content-center">Fan 3</div>
        <canvas class="mb-2" id="fan-chart-3" width="100" height="100"></canvas>
        <div class="d-flex justify-content-center">Fan 4</div>
        <canvas class="mb-2" id="fan-chart-4" width="100" height="100"></canvas>
    </div>
</div>

<div id="errorContainer" class="d-flex align-items-center mt-4 ms-4 alert alert-danger invisible">
    <strong id="errorCode"></strong>
  <div class="spinner-border ms-auto"></div>
</div>

<script>
var ws = new WebSocket("ws://localhost:80/miner/{{miner}}/ws");
let all_data = []
let all_labels = []
ws.onmessage = function(event) {
    var new_data = JSON.parse(event.data)
    if (new_data.hasOwnProperty("error")) {
        var err_container = document.getElementById("errorContainer")
        var err_code = document.getElementById("errorCode")
        err_code.innerHTML = new_data['error']
        err_container.classList.remove("invisible")
    } else {
        var chart = document.getElementById("line-chart")
        var err_container = document.getElementById("errorContainer")
        if (!err_container.classList.hasOwnProperty("invisible")) {
            err_container.classList.add("invisible")
        }
        datetime = luxon.DateTime.fromISO(new_data["datetime"]).toLocal();
        if (minerDataChart.data.labels.length > 50) minerDataChart.data.labels.shift();
        if (minerDataChart.data.datasets[0].data.length > 50) minerDataChart.data.datasets[0].data.shift();
        minerDataChart.data.labels.push(datetime.toLocaleString(luxon.DateTime.TIME_WITH_SECONDS));
        minerDataChart.data.datasets[0].data.push(new_data["hashrate"]);
        minerDataChart.update();
    };
};

var ctx = document.getElementById("line-chart").getContext("2d");
var width = document.getElementById("line-chart").width;
var chartGradient = ctx.createLinearGradient(0, 0, width, 0)
chartGradient.addColorStop(0, '#D0368A');
chartGradient.addColorStop(1, '#708AD4');

const chartAreaBorder = {
  id: 'chartAreaBorder',
  beforeDraw(chart, args, options) {
    const {ctx, chartArea: {left, top, width, height}} = chart;
    ctx.save();
    ctx.strokeStyle = options.borderColor;
    ctx.lineWidth = options.borderWidth;
    ctx.strokeRect(left, top, width, height);
    ctx.restore();
  }
};

var minerDataChart = new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [
    ],
    datasets: [{
          label: "Hashrate",
          borderColor: chartGradient,
          pointBorderColor: chartGradient,
          pointBackgroundColor: chartGradient,
          pointHoverBackgroundColor: chartGradient,
          pointHoverBorderColor: chartGradient,
        data: [
        ],
      }
    ]
  },
  plugins: [chartAreaBorder],
  options: {
      animation: {
        easing: 'easeInSine',
        duration: 250
      },
      plugins: {
        chartAreaBorder: {
          borderColor: chartGradient,
          borderWidth: 1
        },
        legend: {
            display: false
        }
      },
    scales: {
        y: {
            min: 0, // minimum value
            suggestedMax: 10,
            stepSize: 1
        },
        x: {
            ticks: {
                maxTicksLimit: 6,
                maxRotation: 0
            }
        }
    }
  }
});

var options_fans = {
    animation: {
        duration: 0,
    },
    aspectRatio: 1.5,
    events: [],
    responsive: true,
    plugins: {
        legend: {
            display: false,
        }
    }
};

var fanCtx = document.getElementById("fan-chart-1").getContext("2d");
var fanWidth = document.getElementById("fan-chart-1").width*(3/4);
var fanChartGradient = fanCtx.createLinearGradient(0, 0, fanWidth, 0)
fanChartGradient.addColorStop(0, '#D0368A');
fanChartGradient.addColorStop(1, '#708AD4');


var fan1Chart = new Chart(document.getElementById("fan-chart-1"), {
    type: "doughnut",
    data: {
        labels: ["Fan 1"],
        datasets: [
            {
                data: [100, 100],
                // add colors
                backgroundColor: [
                    fanChartGradient,
                    "rgba(199, 199, 199, 1)"
                ]
            },
        ]
    },
    options: options_fans
});
var fan2Chart = new Chart(document.getElementById("fan-chart-2"), {
    type: "doughnut",
    data: {
        labels: ["Fan 2"],
        datasets: [
            {
                data: [300, 100],
                // add colors
                backgroundColor: [
                    fanChartGradient,
                    "rgba(199, 199, 199, 1)"
                ]
            },
        ]
    },
    options: options_fans
});
var fan3Chart = new Chart(document.getElementById("fan-chart-3"), {
    type: "doughnut",
    data: {
        labels: ["Fan 3"],
        datasets: [
            {
                data: [200, 100],
                // add colors
                backgroundColor: [
                    fanChartGradient,
                    "rgba(199, 199, 199, 1)"
                ]
            },
        ]
    },
    options: options_fans
});
var fan4Chart = new Chart(document.getElementById("fan-chart-4"), {
    type: "doughnut",
    data: {
        labels: ["Fan 4"],
        datasets: [
            {
                data: [500, 100],
                // add colors
                backgroundColor: [
                    fanChartGradient,
                    "rgba(199, 199, 199, 1)"
                ]
            },
        ]
    },
    options: options_fans
});

</script>
{% endblock content %}