Skip to content

Commit f81ddef

Browse files
alexmanchenoalexmancheno
committed
Update
1 parent 93d391d commit f81ddef

File tree

3 files changed

+167
-166
lines changed

3 files changed

+167
-166
lines changed

‎src/components/Assignment3/Assignment3.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import autoBind from 'react-autobind';
3-
import UserInput from './UserInput';
3+
import IPv4Tab from './IPv4Tab';
4+
import IPv6Tab from './IPv6Tab';
45

56
export default class Asssignment3 extends React.Component {
67
constructor(props) {
@@ -11,7 +12,20 @@ export default class Asssignment3 extends React.Component {
1112
render() {
1213
return (
1314
<div>
14-
<UserInput />
15+
<ul className="nav nav-tabs">
16+
<li className="active"><a data-toggle="tab" href="#IPv4Tab">IPv4</a></li>
17+
<li><a data-toggle="tab" href="#IPv6Tab">IPv6</a></li>
18+
</ul>
19+
20+
<div className="tab-content">
21+
<br></br>
22+
<div id="IPv4Tab" className="tab-pane fade in active">
23+
<IPv4Tab />
24+
</div>
25+
<div id="IPv6Tab" className="tab-pane fade">
26+
<IPv6Tab />
27+
</div>
28+
</div>
1529
</div>
1630
)
1731
}

‎src/components/Assignment3/UserInput.js renamed to ‎src/components/Assignment3/IPv4Tab.js

Lines changed: 2 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,27 @@ import React from 'react';
22
import autoBind from 'react-autobind';
33
import style from './style.css';
44

5-
export default class UserInput extends React.Component {
5+
export default class IPv4TabContent extends React.Component {
66
constructor(props) {
77
super(props);
88
autoBind(this);
9-
let addresses = new Object();
109
this.state = {
1110
classful: true,
12-
zeroCompression: false,
1311
classNameValue: "A",
1412
numberOfHostsNeeded: 0,
15-
numberOfNetworksNeeded: 0,
1613
generatedIPAddress: "",
1714
ipAddressInBinary: "",
18-
IPv6AddressInColonHex: "",
19-
IPv6AddressInBinary: "",
20-
addresses: JSON.stringify(addresses)
2115
}
22-
// localStorage.clear();
2316
}
2417

2518
handleclassNameChange(event) {
2619
this.setState({classNameValue: event.target.value});
2720
}
2821

29-
handleNumberOfNetworksChange(event) {
30-
this.setState({numberOfNetworksNeeded: event.target.value });
31-
}
32-
3322
handleNumberOfHostsChange(event) {
3423
this.setState({numberOfHostsNeeded: event.target.value });
3524
}
3625

37-
handleZeroCompressionChange(bool) {
38-
this.setState({zeroCompression: bool});
39-
}
40-
4126
handleclassNameRadioButtonChange(bool) {
4227
this.setState({classful: bool});
4328
}
@@ -47,11 +32,6 @@ export default class UserInput extends React.Component {
4732
this.generateIPv4Address();
4833
}
4934

50-
handleIPv6Submit(event) {
51-
event.preventDefault();
52-
this.generateIPv6Address();
53-
}
54-
5535
getRandomInt(max) {
5636
return Math.floor(Math.random() * Math.floor(max));
5737
}
@@ -115,7 +95,6 @@ export default class UserInput extends React.Component {
11595
if (binaryString[0] === '-') binaryString = binaryString.substr(1);
11696
while (binaryString.length < 32) {
11797
binaryString = "0" + binaryString;
118-
this.sleep(1000);
11998
}
12099
}
121100

@@ -129,74 +108,6 @@ export default class UserInput extends React.Component {
129108
localStorage.setItem("IPv4Addresses", JSON.stringify(map));
130109
}
131110

132-
generateIPv6Address() {
133-
let numberOfNetworksNeeded = this.state.numberOfNetworksNeeded;
134-
let zeroCompression = this.state.zeroCompression;
135-
136-
let map;
137-
if (localStorage.getItem("IPv6Addresses") !== null) {
138-
map = JSON.parse(localStorage.getItem("IPv6Addresses"));
139-
} else {
140-
map = new Object();
141-
}
142-
143-
let networkBits = 16;
144-
let n = Math.ceil(Math.log2(numberOfNetworksNeeded)) - 16;
145-
if (n > 0) {
146-
networkBits += n;
147-
}
148-
149-
let suffixBits = 64 - networkBits;
150-
let randomNumber = 0;
151-
let result;
152-
do {
153-
randomNumber = this.getRandomInt(Math.pow(2, suffixBits));
154-
for (let i = randomNumber.toString(2).length; i < 64; i++) {
155-
randomNumber = randomNumber * 2;
156-
}
157-
158-
let hexString = randomNumber.toString(16);
159-
result = "";
160-
161-
let count = 0;
162-
for (let i = 0; i < hexString.length; ) {
163-
if (count === 4) {
164-
result += ":";
165-
count = 0;
166-
} else {
167-
let c = hexString.charAt(i);
168-
result += c;
169-
count++;
170-
i++;
171-
}
172-
}
173-
result += ":0000:0000:0000:0000";
174-
175-
let array = result.split(":");
176-
let compressed = "::";
177-
let foundNonZeroes = false;
178-
if (zeroCompression) {
179-
for (let i = array.length - 1; i >= 0; i--) {
180-
let s = array[i];
181-
if (s !== "0000" || foundNonZeroes) {
182-
compressed = ":" + parseInt(s, 16).toString(16) + compressed;
183-
foundNonZeroes = true;
184-
}
185-
}
186-
187-
result = compressed.substr(1);
188-
}
189-
190-
result += "/" + (64 - networkBits).toString();
191-
} while (result in map) ;
192-
193-
map[result] = true;
194-
localStorage.setItem("IPv6Addresses", JSON.stringify(map));
195-
196-
this.setState({IPv6AddressInColonHex: result});
197-
this.setState({IPv6AddressInBinary: randomNumber.toString(2)});
198-
}
199-
200111
intToIPAddressString(ip) {
201112
let bytes = [4];
202113
bytes[3] = ip & 0xFF;
@@ -206,11 +117,7 @@ export default class UserInput extends React.Component {
206117
return `${bytes[0]}.${bytes[1]}.${bytes[2]}.${bytes[3]}`;
207118
}
208119

209-
sleep(ms) {
210-
return new Promise(resolve => setTimeout(resolve, ms));
211-
}
212-
213-
getIPv4TabContent() {
120+
render() {
214121
return (
215122
<div>
216123
<form onSubmit={e => this.handleSubmit(e)}>
@@ -264,73 +171,4 @@ export default class UserInput extends React.Component {
264171
</div>
265172
)
266173
}
267-
268-
getIPv6TabContent() {
269-
return (
270-
<div>
271-
<form onSubmit={e => this.handleIPv6Submit(e)}>
272-
<div className="form-group-row">
273-
<legend className="col-form-label">Zero compression?</legend>
274-
<div className="radio">
275-
<label>
276-
<input type="radio"
277-
checked={this.state.zeroCompression === true}
278-
onChange={e => this.handleZeroCompressionChange(true)} />
279-
yes
280-
</label>
281-
<br/>
282-
<label>
283-
<input type="radio"
284-
checked={this.state.zeroCompression === false}
285-
onChange={e => this.handleZeroCompressionChange(false)} />
286-
no
287-
</label>
288-
</div>
289-
<div className="input-group">
290-
<span className="input-group-addon" id="basic-addon1">Number of networks needed:</span>
291-
<input type="number" className="form-control" placeholder="hosts.." aria-describedby="basic-addon1" onChange={e => { this.handleNumberOfNetworksChange(e) }} />
292-
</div>
293-
<br/>
294-
<button type="submit" value="submit" className="btn btn-primary">Assign!</button>
295-
</div>
296-
</form>
297-
<br/>
298-
<div>
299-
<div className="form-group">
300-
<label htmlFor="exampleFormControlInput1">Your IPv6 address in colon hex:</label>
301-
<input className={"form-control " + style.courier} type="text" name="country" value={this.state.IPv6AddressInColonHex} readOnly />
302-
</div>
303-
<div className="form-group">
304-
<label htmlFor="exampleFormControlInput1">Your IPv6 address in binary:</label>
305-
<input className={"form-control " + style.courier} type="text" name="country" value={this.state.IPv6AddressInBinary} readOnly />
306-
</div>
307-
</div>
308-
</div>
309-
)
310-
}
311-
312-
313-
render() {
314-
315-
return (
316-
<div>
317-
<ul className="nav nav-tabs">
318-
<li className="active"><a data-toggle="tab" href="#IPv4Tab">IPv4</a></li>
319-
<li><a data-toggle="tab" href="#IPv6Tab">IPv6</a></li>
320-
</ul>
321-
322-
<div className="tab-content">
323-
<br></br>
324-
<div id="IPv4Tab" className="tab-pane fade in active">
325-
{this.getIPv4TabContent()}
326-
</div>
327-
<div id="IPv6Tab" className="tab-pane fade">
328-
{this.getIPv6TabContent()}
329-
</div>
330-
</div>
331-
<br></br>
332-
333-
</div>
334-
)
335-
}
336174
}

0 commit comments

Comments
 (0)