-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
126 lines (124 loc) · 4.92 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EDI Lint: EDI Visualization In Your Browser</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src='main.js'></script>
<style>
.elementSep {
color: #999;
}
.ediOutBlock { counter-reset: listing; }
.segment {
cursor: pointer;
}
span.segment {
counter-increment: listing;
}
.segment-inner:hover {
text-decoration: underline;
color: blue;
}
.ediOutBlock span.segment:before { content: counter(listing) ". "; color: gray; }
#zoomTable {
width:100%;
margin-bottom: 20px;
}
</style>
</head>
<body ng-app='ediLint'>
<a href="https://github.com/bglick/edi-lint"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<div ng-controller='EdiCtrl'>
<h1 class='text-center'>EDI Lint</h1>
<ol>
<li>Choose a file or paste <a href='http://www.x12.org/about/faqs.cfm' target='_blank'>EDI</a> below.</li>
<li>Use the buttons at the bottom to turn segment types on & off.</li>
</ol>
<input type='file' id='ediFile' class='form-control'/>
<textarea placeholder='Choose a file above, or paste your raw EDI here.' ng-model='ediIn' class='form-control' rows='10' spellcheck='false' id='ediBox'></textarea>
<div class='panel panel-danger' ng-show='ediOut.errors'>
<div class='panel panel-heading'>
<h3 class="panel-title">Parsing Error</h3>
</div>
<div class='panel-body'>
<ul class='list-unstyled'>
<li ng-repeat='e in ediOut.errors'>
{{e}}
</li>
</ul>
</div>
</div>
<div ng-show='ediOut.segments'>
<h2 id='parsedEdiHeading'>Parsed EDI</h2>
<div ng-show='zoomSegment'>
<table id='zoomTable' class='table table-condensed table-bordered'>
<thead>
<tr>
<th ng-repeat='el in zoomSegment.elements track by $index'><span ng-show='$index>0'>{{$index}}</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class='segment' ng-repeat="el in zoomSegment.elements track by $index" ng-class="{'info':el.highlighted}" ng-click="el.highlighted=!el.highlighted">{{el.content}}</td>
</tr>
</tbody>
</table>
</div>
<div ng-hide='zoomSegment'>
Click a row to zoom
</div>
<div class='text-right text-muted'>
Element Separator: <em>{{ediOut.elementSeparator}}</em>
Segment Terminator: <em>{{ediOut.segmentTerminatorDesc}}</em>
Rows: <em>{{ediOut.segments.length}}</em>
</div>
<pre class='pre-scrollable ediOutBlock'>
<div ng-repeat='seg in ediOut.segments'><span class='segment'><span ng-hide='hiddenSegmentTypes[seg.type]' class='segment-inner'><span ng-click='setZoomSegment(seg)' edi-segment='seg'></span></span></span></div>
</pre>
<div>
<span ng-show='ediOut.segments'>
<button class='btn btn-sm btn-success' ng-click='showAllSegments()'>All</button>
<button class='btn btn-sm btn-success' ng-click='hideAllSegments()'>None</button>
</span>
<span ng-repeat='propt in ediOut.segmentTypes'>
<button class='btn btn-sm' ng-class='{"btn-default":hiddenSegmentTypes[propt],"btn-primary":!hiddenSegmentTypes[propt]}' ng-click='toggleSegmentHide(propt)'>{{propt}}</button>
</span>
</div>
</div>
</div>
<div class='well'>
<small>This tool is provided AS IS without any warranty. Check out the author at <a href='http://brian-glick.com'>http://brian-glick.com</a>. <br />Parsing is done in your browser so the file size limitations will be related to your computer. Nothing is sent to the server.</small>
</div>
<script type="text/javascript">
$(function() {
if(FileReader) {
$('#ediFile').change(function(evt) {
var files, f, reader;
files = evt.target.files;
f = files[0];
if(f) {
reader = new FileReader();
reader.onload = function (event) {
var scp;
scp = $("#ediBox").scope();
scp.$apply(function() {
scp.ediIn = event.target.result;
});
};
reader.readAsText(f);
}
});
}
else {
$('#ediFile').remove();
}
});
</script>
<script src='my-ga.js'></script>
</body>
</html>