WGDashboard/src/templates/get_conf.html

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4">
	<div class="info mt-4">
		<div class="row">
			<div class="col-sm">
				<small class="text-muted"><strong>CONFIGURATION</strong></small>
				<h1 class="mb-3">{{conf_data['name']}}</h1>
			</div>
			<div class="col-sm">
				<small class="text-muted"><strong>ACTION</strong></small><br>
				<input class="mt-2 switch" id="{{conf_data['name']}}" type="checkbox" data-toggle="toggle"  {{conf_data['checked']}} data-size="sm">
			</div>
			<div class="w-100"></div>
			<div class="col-sm">
				<small class="text-muted"><strong>STATUS</strong></small>
				<h6 style="text-transform: uppercase;">{{conf_data['status']}}<span class="dot dot-{{conf_data['status']}}"></span></h6>
			</div>
			<div class="col-sm">
				<small class="text-muted"><strong>CONNECTED PEERS</strong></small>
				<h6 style="text-transform: uppercase;">{{conf_data['running_peer']}}</h6>
			</div>
			<div class="col-sm">
				<small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
				<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][0]}} GB</h6>
			</div>
			<div class="col-sm">
				<small class="text-muted"><strong>TOTAL RECIEVED</strong></small>
				<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][1]}} GB</h6>
			</div>
			<div class="col-sm">
				<small class="text-muted"><strong>TOTAL SENT</strong></small>
				<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][2]}} GB</h6>
			</div>
			<div class="w-100"></div>
			<div class="col-sm">
				<small class="text-muted"><strong>PUBLIC KEY</strong></small>
				<h6 style="text-transform: uppercase;"><samp>{{conf_data['public_key']}}</samp></h6>
			</div>
			<div class="col-sm">
				<small class="text-muted"><strong>LISTEN PORT</strong></small>
				<h6 style="text-transform: uppercase;"><samp>{{conf_data['listen_port']}}</samp></h6>
			</div>
		</div>
		<hr>
		<div class="button-div" style="text-align: right;">
			<button type="button" class="btn btn-outline-primary btn-sm mb-3" data-toggle="modal" data-target="#add_modal">
				<strong>ADD PEER</strong>
			</button>
			
		</div>
	</div>
	
	{% for i in conf_data['peer_data']%}
		<div class="card mb-3">
            <div class="card-header">
                <div class="row">
                    <div class="col">
                        <div class="card-header-body ">
                            {% if not i['name']%}
                                {{ "Untitled Peer" }}
                            {% else %}
                                {{i['name']}}
                            {% endif %}
                            <span class="dot dot-{{i['status']}}"></span>
                        </div>
                    </div>
                    <div class="col" style="text-align: right">
                        <p class="text-primary" style="text-transform: uppercase; display: inline-block; margin-bottom: 0; margin-right: 1rem"><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</p>
                        <p class="text-success" style="text-transform: uppercase;  display: inline-block; margin-bottom: 0"><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</p>
                    </div>

                </div>


            </div>
			<div class="card-body">
				<div class="row">
{#					<div class="col-sm">#}
{#						<small class="text-muted"><strong>STATUS</strong></small>#}
{#						<h6 style="text-transform: uppercase;">{{i['status']}}<span class="dot dot-{{i['status']}}"></span></h6>#}
{#					</div>#}
					<div class="col-sm">
						<small class="text-muted"><strong>PEER</strong></small>
						<h6><samp class="ml-auto">{{i['id']}}</samp></h6>
					</div>
					<div class="col-sm">
						<small class="text-muted"><strong>ALLOWED IP</strong></small>
						<h6 style="text-transform: uppercase;">{{i['allowed_ip']}}</h6>
					</div>
					<div class="w-100"></div>

					<div class="col-sm">
						<small class="text-muted"><strong>LATEST HANDSHAKE</strong></small>
						<h6 style="text-transform: uppercase;">{{i['latest_handshake']}}</h6>
					</div>
					<div class="col-sm">
						<small class="text-muted"><strong>END POINT</strong></small>
						<h6 style="text-transform: uppercase;">{{i['endpoint']}}</h6>
					</div>
{#					<div class="w-100"></div>#}
{#                    <div class="col-sm">#}
{#                        <canvas id="{{ i['id'] }}_chart" style="width: 100%" height="200"></canvas>#}
{#                    </div>#}
{#                    <script>#}
{#                        var data = "{{  i['traffic'] }}";#}
{#                        data = data.replaceAll("&#39;", "\"")#}
{#                        data = JSON.parse(data)#}
{#                        y_label = [];#}
{#                        data_point = [];#}
{#                        for (var i = 1; i < data.length; i++){#}
{#                            y_label.push(data[i]['time'])#}
{#                            data_point.push(data[i]['total_sent'] - data[i-1]['total_sent']);#}
{#                        }#}
{#                        var ctx = document.getElementById('{{ i['id'] }}_chart');#}
{#                        var plot_data =#}
{#                            {#}
{#                                labels: y_label,#}
{#                                datasets:[{#}
{#                                    label: "Traffic",#}
{#                                    data: data_point,#}
{#                                    fill: false,#}
{#                                    borderColor: 'rgb(75, 192, 192)',#}
{#                                    tension: 0.1#}
{#                                }],#}
{#                                options: {#}
{#                                    scales: {#}
{#                                        xAxes: [{#}
{#                                            type: 'time',#}
{#                                            ticks: {#}
{#                                                autoSkip: true,#}
{#                                                maxTicksLimit: 12#}
{#                                            }#}
{#                                        }]#}
{#                                    },#}
{#                                    responsive: true#}
{#                                }#}
{#                            }#}
{##}
{#                        var myLineChart = new Chart(ctx, {#}
{#                            type: 'line',#}
{#                            data: plot_data#}
{#                        });#}
{#                    </script>#}
                    <div class="w-100"></div>
					<div class="col-sm">
						<!-- <small class="text-muted"><strong>ACTION</strong></small> -->
						<div class="button-group">
                            <hr>
                            <button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-gear-fill"></i></button>
							<button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="{{i['id']}}" data-toggle="modal" data-target="#delete_modal"><i class="bi bi-x-circle-fill"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	{%endfor%}
</main>