BCAI/ML/localUser/WebPage/UI.html at master · taoluwork/BCAI · GitHub

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
<!--
    This is the HTML for the user web page.
    It is used to define the layout and elements of the page.
    These elements are both modified by and used to make calls to the web page's javascript file.
-->

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel = "stylesheet" type = "text/css" href = "ui.css" />

        <title>iChain User Console</title>

    </head>

    <body>


        <div class="container-fluid" id="headerContainer">
            <h1 class="display-1 text-center">iChain</h1>
        </div>


        <div class="container-fluid text-center w-75 addresscontainer" id="addressContainer">
            <button class="btn btn-secondary dropdown-toggle text-center" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Addresses
            </button>
                <div class="dropdown-menu text-center" id="AddressBar">
                </div>
        </div>

        <div class="container-fluid text-center w-75" id="passwordContainer">
            <form id="passwordForm" class="container-fluid text-center w-50">
                <input type="password" class="form-control passwordVal" id="passwordVal" placeholder="Password">
                <button type="button" class="btn btn-secondary submitPassword" id="submitPassword">Submit Password</button>
            </form>
        </div>

        <br />

        <div id="actionContainer" class="container-fluid text-center actioncontainer">
            <form id="startTaskForm" class="container-fluid text-center  w-50">
                <div class="form-group" id="startTaskInputs">
                    <input type="text" class="form-control" id="startTaskFilePath" placeholder="Enter File Path">
                </div>
                <button type="submit" class="btn btn-secondary" id="startTaskSubmit">Start Task</button>
            </form>

            <form id="stopTaskForm" class="container-fluid text-center">
                <div class="form-group text-center" id="StopTaskInputs">
                    <button type="submit" class="btn btn-secondary text-center" id="stopTaskSubmit">Stop Task</button>
                </div>
            </form>
        </div>

        <div class="container-fluid text-center">
            <p id="startTaskPSA">Before you can start task, file must finish hosting.</p>
            <p>After you submit anything, the web page will become unresponsive for a bit as the blockchain message goes through.</p>
        </div>

        <div id="balanceContainer" class="container-fluid text-center">
            <p id="balanceText"></p>
        </div>

        <div id="statusContainer" class="container-fluid text-center">
            <p id="statusText"></p>
        </div>

        <div id="provChoiceContainer" class="container-fluid text-center">
            <form id="provChoiceForm" class="container-fluid text-center  w-50">
                <table id="provChoiceTable" class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Address and Rating</th>
                        </tr>
                    </thead>
                    <tbody id="provChoiceBody">
                    </tbody>
                </table>
                <input type="text" id="provChoiceValue" class="form-control" placeholder="Type # of your choice">
                <br />
                <button type="button" class="btn btn-secondary" id="provChoiceSubmit">Submit Choice</button>
                <br />
                <br />
            </form>
        </div>

        <div id="valChoiceContainer" class="container-fluid text-center">
            <form id="valChoiceForm" class="container-fluid text-center  w-50">
                <table id="valChoiceTable" class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Address and Rating</th>
                        </tr>
                    </thead>
                    <tbody id="valChoiceBody">
                    </tbody>
                </table>
                <input type="text" id="valChoiceValue" class="form-control" placeholder="Type # of your choice">
                <br />
                <button type="button" class="btn btn-secondary" id="valChoiceSubmit">Submit Choice</button>
                <br />
                <br />
            </form>
        </div>

        <div id="ratingContainer" class="container-fluid text-center">
            <form id="ratingForm" class="container-fluid text-center  w-50">
                <p>Please submit a rating from 1-100 for your provider.</p>
                <input type="text" id="ratingValue" class="form-control" placeholder="Type your rating for your provider from 1-100.">
                <br />
                <button type="button" class="btn btn-secondary" id="ratingSubmit">Submit Rating</button>
                <br />
                <br />
            </form>
        </div>

        <div class="container-fluid text-center  w-75" id="poolSelect">
            <h2 class="text-center">
                Select A Pool:
            </h2>
                <div class="btn-group" role="group" id="poolSelectBar">
                        <button type="button" class="btn btn-secondary" id="pendingPoolSel">Pending Pool</button>
                        <button type="button" class="btn btn-secondary" id="providerPoolSel">Provider Pool</button>
                        <button type="button" class="btn btn-secondary" id="providingPoolSel">Providing Pool</button>
                        <button type="button" class="btn btn-secondary" id="validatingPoolSel">Validation Pool</button>
                        <button type="button" class="btn btn-secondary selected" id="nonePoolSel">none</button>
                </div>
        </div>
        <div id="poolContainer" class="container-fluid text-center  w-75">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Request Address</th>
                    </tr>
                </thead>
                <tbody id="poolBody">
                </tbody>
            </table>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="ui.js"></script>
        <div class="container-fluid text-center">

          </div>
    </body>
</html>