-
Notifications
You must be signed in to change notification settings - Fork 3
/
viewer.html
157 lines (141 loc) · 7.57 KB
/
viewer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css">
<style type="text/css">
#main {
padding-top: 15px;
}
#csv-table_wrapper table.table-bordered {
border: none;
margin-top: 0 !important;
}
div.dataTables_wrapper div.dataTables_length select {
width: inherit;
display: inherit;
}
div.dataTables_wrapper div.dataTables_filter input {
width: inherit;
display: inherit;
}
.dataTables_wrapper .form-group {
margin-bottom: 0;
}
.dataTables_wrapper div.dataTables_info {
padding-top: 4px !important;
}
.dataTables_paginate a {
margin: 0 2px;
}
</style>
</head>
<body>
<div id="main" class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="loading" class="alert alert-info lead text-center">Loading csv file ...</div>
<div id="error" class="alert alert-danger lead text-center hidden"></div>
<table id="csv-table" class="table table-bordered table-striped table-condensed"></table>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function() {
var showError = function(message) {
hideLoading();
if(!message || typeof message !== 'string' || !message instanceof String) {
message = "Une erreur est survenue";
}
$('#error').removeClass('hidden');
$('#error').html(message);
}
var hideLoading = function() {
$('#loading').hide();
}
var uriCsvFile = window.location.hash.replace("#", "");
if(!uriCsvFile) {
uriCsvFile = window.location.pathname.replace(/.*\/(.+.csv).html$/, '$1');
if(window.location.pathname == uriCsvFile) {
uriCsvFile = false;
}
}
if(!uriCsvFile) {
showError("CSV File not specified or not found");
return;
}
document.title = uriCsvFile;
$('#loading').html("Loading csv file : " + uriCsvFile);
var data = Papa.parse(uriCsvFile, {
download: true,
skipEmptyLines: true,
header: true,
error: function(err, file, inputElem, reason)
{
showError(err);
},
complete: function(data)
{
console.log("loaded");
if(data.errors.length > 0) {
showError("File contains error, is maybe not a csv file");
return;
}
var columns = [];
for(key in data.meta.fields) {
columns.push({ data: data.meta.fields[key], title: data.meta.fields[key] });
}
var table = $('#csv-table').DataTable({
data: data.data,
columns: columns,
scrollY: true,
scrollX: true,
scrollCollapse: true,
searching: true,
paging: true,
ordering: true,
lengthMenu: [[250, 500, 1000], [250, 500, 1000]],
language: {
"info": "_START_ to _END_ (_TOTAL_ lines)",
},
initComplete: function() {
hideLoading();
$('#csv-table_wrapper').addClass('panel panel-default');
$('#csv-table_wrapper').prepend('<div class="panel-heading"></div>');
$('#csv-table_wrapper .panel-heading').append($('#csv-table_wrapper #csv-table_length').detach());
$('#csv-table_wrapper .panel-heading').append($('#csv-table_wrapper #csv-table_filter').detach());
$('#csv-table_wrapper .panel-heading').append("<div class='col-sm-3 col-md-3 text-right text-muted dataTables_title'><a href='"+uriCsvFile+"' target='_blank'>"+uriCsvFile+"</a></div>");
$('#csv-table_wrapper .panel-heading').append("<div class='clearfix'></div>");
$('#csv-table_length').addClass('form-group row col-sm-3 col-md-1');
$('#csv-table_length').html($('<div class="col-xs-12 row"></div>').append($('#csv-table_length select').detach()));
$('#csv-table_length select').addClass('form-control input-sm');
$('#csv-table_filter').addClass('form-group row col-sm-6 col-md-8');
$('#csv-table_filter').html($('<div class="col-xs-12 row"></div>').append($('#csv-table_filter input').detach()));
$('#csv-table_filter input').addClass('form-control input-sm');
$('#csv-table_filter input').attr('placeholder', 'Rechercher ...');
$('#csv-table_wrapper').append('<div class="panel-footer"></div>');
$('#csv-table_wrapper .panel-footer').append($('#csv-table_wrapper #csv-table_info').detach());
$('#csv-table_wrapper .panel-footer').append($('#csv-table_wrapper #csv-table_paginate').detach());
$('#csv-table_wrapper .panel-footer').append("<div class='clearfix'></div>");
$('#csv-table_info').addClass('row col-xs-5 text-muted');
$('#csv-table_paginate').addClass('row col-xs-7');
},
drawCallback: function() {
$('#csv-table_paginate a').addClass('btn btn-default');
$('#csv-table_paginate a.current').addClass('btn-primary');
}
});
$('#loading').hide();
}
});
});
</script>
</body>
</html>