forked from krrrr38/json-interface-builder
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (81 loc) · 3 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
<html ng-app="jibApp">
<head>
<title>JSON Interface Builder</title>
<script src="./public/javascripts/minified/json-interface-builder.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="./public/stylesheets/app.css">
</head>
<body>
<header>
<h1>JSON Interface Builder</h1>
<div>
Generate Interfaces of JSON for TypeScript, Scala, Go and so on.
</div>
</header>
<div class="pure-g" ng-controller="TopCtrl">
<div class="pure-u-1-2">
<div class="container pure-form">
<h4>Whole JSON</h4>
<textarea ng-disabled="step != 0"
ng-model="json"
autofocus="autofocus"
placeholder='{"foo": {"bar": 3}, "hoge": "fuga"}'
id="json-container"></textarea>
</div>
</div>
<div class="pure-u-1-2">
<div class="container">
<div class="start" ng-show="step == 0">
<div class="description">
<ol>
<li>Write/Paste Valid JSON in a Left Window</li>
<li>Click START button</li>
<li>Write each Component Json Names</li>
<li>Generate Interfaces for each JSON</li>
</ol>
</div>
<div class="start-submit">
<input type="button"
value="START"
class="pure-button pure-button-primary start-button"
ng-click="startBuilding()"
ng-disabled="!isValidJson(json)"
></input>
</div>
<div>
<h4>HOWTO</h4>
<img src="./images/howto.gif" width="500px">
</div>
</div>
<div class="builder" ng-show="step == 1">
<div>
Write an Interface Name for Following JSON Component.
</div>
<ul class="build-list-container">
<li ng-repeat="target in components" ng-show="targetComponentIndex == {{$index}}" class="build-container">
<div component-builder
component="target"
submit="nextComponent(name)"></div>
</li>
</ul>
</div>
<div class="result pure-form" ng-show="step == 2">
<div>
<p>Generate Interfaces for json.</p>
<label class="pure-radio">
<input type="radio" ng-model="language" value="ts">TypeScript</input>
</label>
<label class="pure-radio">
<input type="radio" ng-model="language" value="scala">Scala</input>
</label>
<label class="pure-radio">
<input type="radio" ng-model="language" value="go">Go</input>
</label>
</div>
<textarea ng-model="result" class="result-preview">
</div>
</div>
</div>
</div>
</body>
</html>