OS-LAB-using-JavaScript/scan.html at master · KhushiGarg21/OS-LAB-using-JavaScript · 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
<!Doctype html>
<head>
    <title>SCAN</title>
    <link rel="stylesheet" href="home.css">
    <link rel="shortcut icon" href="logo.png">
</head>

<body>

    <!-- implementation -->

    <div class="last-block">
        <div class="about-k">
            <h1 style="margin: 0px; align-items:center">Implementation</h1>
        </div>

        <div id="alert-wrapper"></div>

        <div class="running-algo">

            <form>
                <div id="controls">
                    <div class="mb-3">
                        <label for="formGroupExampleInput" class="form-label"> No. Of Requests</label><br>
                        <input type="number" class="form-control" id="requests">
                    </div>

                    <div class="mb-3">
                        <label for="formGroupExampleInput" class="form-label"> Total Tracks</label><br>
                        <input type="number" class="form-control" id="max-track" placeholder="Maximum Track Number">
                    </div>

                    <div class="mb-3">
                        <label for="formGroupExampleInput" class="form-label"> Head position</label><br>
                        <input type="number" class="form-control" id="head" data-bs-toggle="popover"
                            data-bs-trigger="hover" title="important!"
                            data-bs-content="The value of head position should not lie outside the range track nunber.">
                    </div>

                    <div class="mb-3">
                        <label for="inputState" class="form-label">Choose Direction</label><br>
                        <select id="direction" class="form-select form-control" style="width: 150px;">
                            <option value="left" class="select">Left</option>
                            <option value="right" class="select">Right</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="formGroupExampleInput" class="form-label"> Tracks</label><br>
                        <input type="text" placeholder="Track requests" class="form-control" id="tracks"
                            data-bs-toggle="popover" data-bs-trigger="hover" title="important!"
                            data-bs-content="Make sure that the values of the tracks are either space separated or comma separated. There should not be any comma before the first track value and after the last track value. Any track request should not exceed the maximum possible track number.">
                    </div>

                    <div class="algo-buttons">
                        <input id="reset-button" style="cursor:pointer; width:50px;" type="reset" class="btn btn-dark form-control last_button"
                            style="margin: 10px;">
                        <button id="run" type="button" class="btn btn-dark last_button disabled"
                            data-bs-toggle="popover" data-bs-trigger="hover" title="Warning!"
                            data-bs-content="None of the fields above should be empty. They should not contain any alphabetic or special character!"
                            style="margin: 20px; cursor:pointer; width:50px;">Run</button>
                        <!-- <button id="run" >Run</button> -->
                    </div>
                </div>
            </form>
        </div>
        <div class='chart-wrapper'>

            <div id="image" class="chart-display">
                <div class="show-element" id="chart-image">
                    CHART WILL APPEAR HERE
                </div>
                <div id="chart-container" class="show-element">
                    <div class="chartres">
                        <canvas id="chart"></canvas>
                    </div>

                    <div id="seekShow">
                        <div id="seek" style="width: 80%; height: 10%; text-align: center;" data-bs-toggle="popover"
                            data-bs-placement="left" data-bs-trigger="click" title="Important!"
                            data-bs-content="Considering the successive track seek time as 1ms.">
                            <h4 id="temp"> </h4>
                            <h4 id="temp1"> </h4>
                        </div>
                        <div id="download-buttons">
                            <div id="dImageIcon"></div>
                            <div id="dPDFIcon"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
    crossorigin="anonymous"></script>
    <script src="Chart.min.js"></script>
    <!-- <script src="search.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <script src="scan.js"></script>
</body>