@extends('layouts.main')


@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ __('strings.my_devices') }}</h4>
            </div>
            <div class="card-body p-2">
                <div class="table-responsive">
                    <table id="devices-table" class="table cell-borders">
                        <thead class="thead-inverse">
                            <tr>
                                <th>Imei</th>
                                <th>Alias</th>
                                <th>Sensor</th>
                                <th>{{ __('strings.received_at') }}</th> 
                                <th>{{ __('strings.real_date_time') }}</th>
                                <th>{{ __('strings.temperature') }}</th>
                                <th>Temp. F</th>
                                <th>{{ __('strings.humidity') }}</th>
                                <th>{{ __('strings.batery') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    var table;
    $(function() {
	//setting language for moment.js
	moment.locale('es');        
        
	//initialize datetable
        table = $('#devices-table').DataTable({
            responsive: false,
            paging: false,
            processing: true,
            ajax: {
                url: "{{route('api_user_devices')}}",
                type: "POST",
                contentType: "application/json",                
                data: function(json){
                    json.user_token = '{{Auth::user()->token}}';
                    return JSON.stringify(json);
                } ,                
                dataType: "json"
            },
            columns:[
                { data: 'imei'},
                { data: 'data.alias', render: function(data) {
                        if(data == undefined) {
                            return "N. D.";
                        } 
                        return data;
                    }
                },
                { data: 'type'},
                { data: 'trama.received_at', render: function(data, type, row, meta) {
                            return moment.utc(data).local().fromNow();
                    }
                },
                { data: 'trama.received_at', render: function(data, type, row, meta) {
                            return moment.utc(data).local().format('YYYY-MM-DD HH:mm:ss');
                    }
                },
                { data: 'trama', render: function(trama) {
                        if(trama !== undefined) {
                            if(trama.type === 'snowman') {
                                return trama.data.temp + " ºC";
                            } else {
                                "no-snowman";
                            }
                        } 
                        return "sin datos";
                    }
                },
                { data: 'trama', render: function(trama) {
                        if(trama.type === 'snowman') {
                            return (parseFloat(trama.data.temp) * 1.8 + 32).toFixed(2)  + " ºF";
                        } else {
                            "no-snowman";
                        }
                    }
                },
                { data: 'trama', render: function(trama) {                        
                        if(trama.type === 'snowman') {
                            return trama.data.hum + " %";
                        } else {
                            "no-snowman";
                        }
                    }
                },
                { data: 'trama', render: function(trama) {
                        if(trama.type === 'snowman') {
                            return trama.data.bat + " %";
                        } else {
                            "no-snowman";
                        }
                    }
                }
            ],
            dom: 'Bfltip',
            buttons: [
            'copy', 'excel', 'pdf'
            ]
            });
    });
</script>
@endpush