-
Notifications
You must be signed in to change notification settings - Fork 1
/
student.html
206 lines (188 loc) · 6.97 KB
/
student.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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<title>Student Page (Rinkeby Testnet)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="application/javascript"></script>
<script>
//function to clear all text fields and alert box display
function ClearFields() {
document.getElementById("id").value = "";
document.getElementById("firstName").value = "";
document.getElementById("lastName").value = "";
$("#E1").css('display','none');
$("#E2").css('display','none');
$("#E3").css('display','none');
$("#success").css('display','none');
$("#failure").css('display','none');
}
//function to show store success message
function ShowSuccess() {
$("#success").css('display','block');
}
//function to show store failed message
function ShowFailure() {
$("#failure").css('display','block');
}
//check all the text fields are not empty before running the smart contract
//else show error messages
function Check() {
$("#success").css('display','none');
$("#failure").css('display','none');
document.getElementById("info").textContent = "";
document.getElementById("failInfo").textContent = "";
var id = document.getElementById("id").value;
var fn = document.getElementById("firstName").value;
var ln = document.getElementById("lastName").value;
if (id == "" || fn == "" || ln == "") {
if (id == "") {$("#E1").css('display','block');} else {$("#E1").css('display','none');}
if (fn == "") {$("#E2").css('display','block');} else {$("#E2").css('display','none');}
if (ln == "") {$("#E3").css('display','block');} else {$("#E3").css('display','none');}
} else {
$("#E1").css('display','none');
$("#E2").css('display','none');
$("#E3").css('display','none');
addstu();
}
}
//function to call the add student smart contract
async function addstu() {
const provider = new ethers.providers.Web3Provider(window.ethereum, "any");
let accounts = await provider.send("eth_requestAccounts", []);
let account = accounts[0];
provider.on('accountsChanged', function (accounts) {
account = accounts[0];
console.log(address); // Print new address
});
const signer = provider.getSigner();
//change this student contract address here if you use another smart contract address
const contractAddress = '0xF8A1f69E254e8052526316435D54FdCF0D772a8E';
//abi for the smart contract, if any changes made, update the abi here
const abi = [
{
"inputs": [
{
"internalType": "uint256",
"name": "_ID",
"type": "uint256"
},
{
"internalType": "string",
"name": "_FirstName",
"type": "string"
},
{
"internalType": "string",
"name": "_LastName",
"type": "string"
}
],
"name": "addStuRecords",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [
{
"internalType": "uint256",
"name": "_ID",
"type": "uint256"
}
],
"name": "getStuDetails",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
},
{
"internalType": "string",
"name": "",
"type": "string"
},
{
"internalType": "string",
"name": "",
"type": "string"
},
{
"internalType": "address payable",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
}
];
const contract = new ethers.Contract(contractAddress, abi, signer);
let ID = document.getElementById("id").value;
let firstName = document.getElementById("firstName").value;
let lastName = document.getElementById("lastName").value;
//catch the error message if the smart contract failed
try {
let transaction = await contract.addStuRecords(ID, firstName, lastName);
await transaction.wait();
document.getElementById("info").insertAdjacentHTML("beforeend", "<strong>Student ID </strong>: " + ID + "<br><strong>Student First Name: </strong>" + firstName + "<br><strong>Student Last Name: </strong>" + lastName);
ClearFields();
ShowSuccess();
$("#failure").css('display','none');
} catch (err) {
ClearFields();
$("#success").css('display','none');
let text = err.stack;
const myArray = text.split("____");
document.getElementById("failInfo").insertAdjacentHTML("beforeend", myArray[1]);
ShowFailure();
console.log(err);
}
};
</script>
</head>
<body class="container pt-5">
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Student Page</h1>
<p>This page is for the student to enter student details</p>
</div>
<br>
<!--store failed alert message, the fail message is extracted from the smart contract using JS above-->
<div id="failure" class="alert alert-danger" style="display:none;">
<strong>Failed!</strong> <span id="failInfo"></span>
</div>
<!--store success alert message-->
<div id="success" class="alert alert-success" style="display:none;">
<p><strong>Success!</strong> You have added the student details successfully.</p>
<div id="info"></div>
</div>
<!--text fields to get student info-->
<form>
<div class="mb-3 mt-3">
<label for="id" class="form-label"><strong>Student ID:</strong></label>
<input type="number" class="form-control" id="id" data-bs-toggle="tooltip" title="Please enter number only" placeholder="Enter Student ID" name="id" required>
<div class="invalid-feedback" id="E1" style="display:none;">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="firstName" class="form-label"><strong>Student First Name:</strong></label>
<input type="text" class="form-control" id="firstName" placeholder="Enter First Name" name="firstName" required>
<div class="invalid-feedback" id="E2" style="display:none;">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="lastName" class="form-label"><strong>Student Last Name:</strong></label>
<input type="text" class="form-control" id="lastName" placeholder="Enter Last Name" name="lastName" required>
<div class="invalid-feedback" id="E3" style="display:none;">Please fill out this field.</div>
</div>
<!--buttons for running-->
<div class="container text-center">
<a href="index.html" type="button" class="btn btn-secondary col-sm-3">Back</a>
<button type="button" class="btn btn-primary col-sm-3" value="Submit" onclick="Check();">Submit</button>
<button type="button" class="btn btn-secondary col-sm-3" onclick="ClearFields();">Clear</button>
</div>
</form>
</body>
</html>