-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
147 lines (143 loc) · 6.08 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width initial-scale=1">
<meta name="description" content="COMP4322">
<meta name="keywords" content="COMP4322,LSR">
<meta name="author" content="Gourp 7">
<title>COMP 4322 - Link State Routing Protocol</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css"/>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
</head>
<body>
<div class="ui two column centered grid">
<div class="row">
<h2>COMP 4322 - Link State Routing Protocol</h2>
</div>
<div class="three column centered row">
<div class="column">
<h3>Basic Settings</h3>
<form class="ui form">
<div class="field">
<div class="ui labeled input">
<div class="ui label">Upload LSR file</div>
<input type="file" id="input">
</div>
</div>
<div class="field"><div class="ui labeled input">
<div class="ui label">Source Node</div>
<input type="text" class="graph-related" id="source" disabled placeholder="Enter source node">
</div></div>
<div class="three fields">
<div class="field">
<button class="fluid ui disabled button source-related" id="compute-all-btn">Compute All</button>
</div>
<div class="field">
<button class="fluid ui disabled button source-related" id="single-step-btn">Single Step</button>
</div>
<div class="field">
<button class="fluid ui disabled button graph-related" id="reset-btn">Reset</button>
</div>
</div>
</form>
</div>
<div class="column">
<h3>Add/Update Edge</h3>
<form class="ui form">
<div class="field"><div class="ui labeled input">
<div class="ui label">Source Node</div>
<input type="text" class="graph-related" id="update-edge-src" disabled placeholder="Enter source node">
</div></div>
<div class="field"><div class="ui labeled input">
<div class="ui label">Destination Node</div>
<input type="text" class="graph-related" id="update-edge-dest" disabled placeholder="Enter destination node">
</div></div>
<div class="field"><div class="ui labeled input">
<div class="ui label">Weight</div>
<input type="text" class="graph-related" id="update-edge-weight" disabled placeholder="Enter edge weight">
</div></div>
<button class="fluid ui disabled button graph-related" id="update-edge-btn">Click to Add/Update</button>
</form>
</div>
</div>
<div class="three column centered row">
<div class="column">
<h3>Add New Node</h3>
<form class="ui form">
<div class="field"><div class="ui labeled input">
<div class="ui label">Node Name</div>
<input type="text" class="graph-related" id="add-new-node-id" disabled placeholder="Enter node name">
</div></div>
<button class="fluid ui disabled button graph-related" id="add-new-node-btn">Add and Refresh</button>
</form>
</div>
<div class="column">
<h3>Delete Node</h3>
<form class="ui form">
<div class="field"><div class="ui labeled input">
<div class="ui label">Node Name</div>
<input type="text" class="graph-related" id="delete-node-id" disabled placeholder="Enter node name">
</div></div>
<button class="fluid ui disabled button graph-related" id="delete-node-btn">Delete and Refresh</button>
</form>
</div>
</div>
<div class="three column centered row">
<div class="column">
<h3>Delete Edge</h3>
<form class="ui form">
<div class="field"><div class="ui labeled input">
<div class="ui label">Source Node</div>
<input type="text" class="graph-related" id="delete-edge-src" disabled placeholder="Enter source code">
</div></div>
<div class="field"><div class="ui labeled input">
<div class="ui label">Destination Node</div>
<input type="text" class="graph-related" id="delete-edge-dest" disabled placeholder="Enter destination code">
</div></div>
<button class="fluid ui disabled button graph-related" id="delete-edge-btn">Delete and Refresh</button>
</form>
</div>
<div class="column">
<div class="one column centered row" class="graph-related" id="network-visulization">
</div>
</div>
</div>
<div class="one column centered row">
<div class="eleven wide column">
<div class="ui message">
<div class="header">
Graph Content
</div>
<p id="graph-content" class="graph-related">(Empty graph)</p>
</div>
<div class="ui message">
<div class="header">
Feedback
</div>
<p id="feedback">(Empty)</p>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js"></script>
<script src="//d3js.org/d3.v3.js"></script>
<script src="src/update.js" type="text/javascript"></script>
<script src="src/Dijkstra.js" type="text/javascript"></script>
<script src="src/parser.js" type="text/javascript"></script>
<script src="src/network.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>