This repository has been archived by the owner on Dec 7, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
117 lines (112 loc) · 3.92 KB
/
home.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart generator</title>
<link rel="stylesheet" href="css/styles.css">
<script src="javascript/menu.js"></script>
<script src="javascript/submit.js"></script>
<script src="javascript/utils.js"></script>
</head>
<body>
<div class="header">
<h1>Chart generator</h1>
</div>
<div id="navbar">
<a href="home.html">Home</a>
<a href="info.html">Info</a>
</div>
<h2 id="home">Welcome to our chart generator</h2>
<div class="container">
<div class="block left-cube">
<div class="div-header">
<span>UPLOAD FILES</span>
</div>
<br>
<label>Choose files from which to generate chart</label>
<br>
<input id="fileUploadInput" type="file" name="filetoupload">
<br>
<button onclick="submitFile()">submit</button>
</div>
<div class="block right-cube">
<div class="div-header">
<span>Choose from uploaded files</span>
</div>
<div id="fileFieldset" style="overflow:auto; height: 40%">
</div>
<button onclick="showDiagramsWithFileList()">submit</button>
</div>
</div>
<div id="container">
<div class="block" style="width: 100%; height: 100%; overflow: hidden">
<a id="bar" href="simple.html?type=bar">
<div class="left-cube forth-cube">
<img src="image/barchart.gif" class="in-square">
<span style="color: black">Bar</span>
</div>
</a>
<a id="line" href="simple.html?type=line">
<div class="left-cube forth-cube">
<img src="image/linediagram.png" class="in-square">
<span style="color: black">Line</span>
</div>
</a>
<a id="pie" href="simple.html?type=pie">
<div class="left-cube forth-cube">
<img src="image/piediagram.png" class="in-square">
<span style="color: black">Pie</span>
</div>
</a>
<a id="area" href="area.html">
<div class="left-cube forth-cube">
<img src="image/areadiagram.png" class="in-square">
<span style="color: black">Area</span>
</div>
</a>
<a id="doughnut" href="simple.html?type=doughnut">
<div class="left-cube forth-cube">
<img src="image/doughnut.png" class="in-square">
<span style="color: black">Doughnut</span>
</div>
</a>
</div>
</div>
<script>
function disaplyUploadedFiles() {
getFiles(addFiles);
function addFiles(oFiles) {
var fieldSet = document.getElementById("fileFieldset");
for (var i = 0; i < oFiles.length; i++) {
var radioBtn = createRadioButton(oFiles[i], "uploadedFiles", oFiles[i]);
fieldSet.appendChild(radioBtn);
}
}
}
disaplyUploadedFiles();
function showDiagramsWithFileList() {
var fileName;
var inputChildren = document.getElementById("fileFieldset").children;
for (var child in inputChildren){
var divChildren = inputChildren[child].children;
var input = divChildren[0];
if (input.checked){
fileName = input.id;
break;
}
}
appendLink("bar", fileName, "&");
appendLink("line", fileName,"&");
appendLink("pie", fileName, "&");
appendLink("doughnut", fileName, "&");
appendLink("area", fileName, "?");
$('#container').show();
}
</script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>$('#container').hide();</script>
<div class="footer">
2018, FMI, Web Technologies 10th edition, Denis Duev, Mihaela Chakova
</div>
</body>
</html>