· 5 years ago · Jul 17, 2020, 10:24 PM
1import { ResponsiveLine } from "@nivo/line";
2
3const userJson = {
4 username: "",
5 email: "",
6 password: "",
7 token: "",
8};
9
10const auctionJson = {
11 title: "",
12 description: "",
13 min_bid: "",
14 deadline: "",
15 username: "",
16 token: "",
17};
18
19const userJsonRegister = {
20 username: "",
21 email: "",
22 password: "",
23};
24
25var allAuctions = [];
26
27function checkLogin() {
28 userJson.username = document.getElementById("userLogin").value;
29 userJson.password = document.getElementById("passLogin").value;
30 if (userJson.username == "") {
31 alert("Error: Username cannot be blank!");
32 document.getElementById("user");
33 return false;
34 }
35
36 if (userJson.password == "") {
37 alert("Error: Password cannot be blank!");
38 document.getElementById("pass");
39 return false;
40 }
41 var re = /^\w+$/;
42 if (!re.test(userJson.password)) {
43 alert(
44 "Error: Password must contain only letters, numbers and underscores!"
45 );
46 document.getElementById("pass");
47 return false;
48 }
49
50 if (userJson.username < 8 || userJson.username > 20) {
51 alert("Error: Username must contain between eight to twenty characters!");
52 return false;
53 }
54
55 const loginURL =
56 "http://localhost:8080/carolinafig-joaomatias-proj5-webserver/rest/users/login";
57
58 // Create our request constructor with all the parameters we need
59 var requestPost = new Request(loginURL, {
60 method: "POST", // *GET, POST, PUT, DELETE, etc.
61 mode: "same-origin", // no-cors, *cors, same-origin
62 cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
63 credentials: "same-origin", // include, *same-origin, omit
64 headers: {
65 "Content-Type": "application/json;charset=utf-8",
66 Accept: "application/json;charset=utf-8",
67 // 'Content-Type': 'application/x-www-form-urlencoded',
68 },
69 redirect: "follow", // manual, *follow, error
70 referrerPolicy: "no-referrer", // no-referrer, *client
71 body: JSON.stringify(userJson), // body data type must match "Content-Type" header
72
73 /*method: 'POST',
74 headers: {
75 'Content-Type': 'application/json',
76 },*/
77 });
78
79 // call the fetch function passing the url of the API as a parameter
80 return verificaLogin(requestPost);
81}
82
83function checkRegister() {
84 var user = document.getElementById("userRegister").value;
85 var email = document.getElementById("mailRegister").value;
86 var pass = document.getElementById("passRegister").value;
87
88 console.log(user + " " + email + " " + pass);
89 if (user == "") {
90 alert("Error: Username cannot be blank!");
91 document.getElementById("user");
92 return false;
93 }
94
95 if (pass == "") {
96 alert("Error: Password cannot be blank!");
97 document.getElementById("pass");
98 return false;
99 }
100
101 if (email == "") {
102 alert("Error: Email cannot be blank!");
103 document.getElementById("email");
104 return false;
105 }
106
107 var re = /^\w+$/;
108 if (!re.test(pass)) {
109 alert(
110 "Error: Password must contain only letters, numbers and underscores!"
111 );
112 document.getElementById("pass");
113 return false;
114 }
115
116 if (user < 8 || user > 20) {
117 alert("Error: Username must contain between eight to twenty characters!");
118 return false;
119 }
120
121 const registerURL =
122 "http://localhost:8080/carolinafig-joaomatias-proj5-webserver/rest/users";
123 // Create our request constructor with all the parameters we need
124
125 var requestPost = new Request(registerURL, {
126 method: "POST",
127 body: "username=" + user + "&email=" + email + "&password=" + pass,
128 headers: {
129 "Content-Type": "application/x-www-form-urlencoded",
130 },
131 });
132
133 // call the fetch function passing the url of the API as a parameter
134 return verificaRegister(requestPost);
135}
136
137function verificaAuction() {
138 var title = document.getElementById("auction-title").value;
139 auctionJson.title = title;
140 var description = document.getElementById("auction_desc").value;
141 auctionJson.description = description;
142 var min_bid = document.getElementById("auction_minbid").value;
143 auctionJson.min_bid = min_bid;
144 var deadline =
145 document.getElementById("auction_date").value +
146 " " +
147 document.getElementById("auction_time").value;
148 auctionJson.deadline = deadline;
149 var username = userJson.username;
150 auctionJson.username = username;
151 var token = userJson.token;
152 auctionJson.token = token;
153
154 console.log(auctionJson);
155
156 const addAuction =
157 "http://localhost:8080/carolinafig-joaomatias-proj5-webserver/rest/auctions";
158 // Create our request constructor with all the parameters we need
159
160 var requestPost = new Request(addAuction, {
161 method: "POST",
162 body:
163 "title=" +
164 auctionJson.title +
165 "&description=" +
166 auctionJson.description +
167 "&min_bid=" +
168 auctionJson.min_bid +
169 "&deadline=" +
170 auctionJson.deadline,
171 headers: {
172 "Content-Type": "application/x-www-form-urlencoded",
173 username: auctionJson.username,
174 token: auctionJson.token,
175 },
176 });
177
178 return verificaAddAuction(requestPost);
179}
180
181function getAllAuctions() {
182 const getAuctions =
183 "http://localhost:8080/carolinafig-joaomatias-proj5-webserver/rest/auctions/";
184 // Create our request constructor with all the parameters we need
185
186 var requestPost = new Request(getAuctions, {
187 method: "GET",
188 });
189
190 return retornaAllAuctions(requestPost);
191}
192
193function getAuctionsOwned() {
194 const getAuctions =
195 "http://localhost:8080/carolinafig-joaomatias-proj5-webserver/rest/auctions?ownedBy=" +
196 userJson.username;
197 // Create our request constructor with all the parameters we need
198
199 var requestPost = new Request(getAuctions, {
200 method: "GET",
201 headers: {
202 username: userJson.username,
203 },
204 });
205
206 return retornaAllAuctions(requestPost);
207}
208
209function getAllOpenAuctions() {
210 const getAuctions =
211 "http://localhost:8080/carolinafig-joaomatias-proj5-webserver/rest/auctions?state=open";
212 // Create our request constructor with all the parameters we need
213
214 var requestPost = new Request(getAuctions, {
215 method: "GET",
216 });
217
218 return retornaAllAuctions(requestPost);
219}
220
221function getAllClosedAuctions() {
222 const getAuctions =
223 "http://localhost:8080/carolinafig-joaomatias-proj5-webserver/rest/auctions?state=finished";
224 // Create our request constructor with all the parameters we need
225
226 var requestPost = new Request(getAuctions, {
227 method: "GET",
228 });
229
230 return retornaAllAuctions(requestPost);
231}
232
233async function verificaLogin(requestPost) {
234 fetch(requestPost)
235 // checks if response status is 200
236 .then(function (response) {
237 alert("Status do response: " + response.status);
238 if (response.status !== 200) {
239 console.log(
240 "Looks like there was a problem while trying to login. Status Code: " +
241 response.status
242 );
243 return;
244 }
245 if (response.status == 200) {
246 response.json().then(function (data) {
247 // .json()) transforms the data into json
248
249 userJson.email = data.email;
250 userJson.username = data.username;
251 userJson.token = data.token;
252
253 console.log("Recebi este JSON do user: " + userJson.username);
254 });
255 alert("Tudo ok, fez login!");
256
257 if (userJson.username == "admin") {
258 adminDashboard();
259 } else {
260 welcome_page();
261 }
262 welcome_page();
263 }
264 })
265 // if the server returns any errors
266 .catch(function (err) {
267 console.log("Fetch Error :-S", err);
268 });
269 console.log("Tudo ok, estamos a tentar fazer login!");
270 return true;
271}
272
273async function verificaRegister(requestPost) {
274 fetch(requestPost)
275 // checks if response status is 200
276 .then(function (response) {
277 alert("Status do response: " + response.status);
278 if (response.status !== 200) {
279 console.log(
280 "Looks like there was a problem while registering. Status Code: " +
281 response.status
282 );
283 return;
284 }
285 if (response.status == 200) {
286 response.json().then(function (data) {
287 // .json()) transforms the data into json
288
289 userJson.email = data.email;
290 userJson.username = data.username;
291 userJson.token = data.token;
292
293 console.log("Recebi este JSON do user: " + userJson.username);
294 });
295 alert("Tudo ok, fez register! Por favor faça login.");
296 welcome_page();
297 }
298 })
299 // if the server returns any errors
300 .catch(function (err) {
301 console.log("Fetch Error :-S", err);
302 });
303 console.log("Alright chaps, we're registering!");
304 return true;
305}
306
307var auction = {
308 id: "",
309 title: "",
310 description: "",
311 min_bid: "",
312 deadline: "",
313};
314
315const auctionList = [];
316
317async function retornaAllAuctions(requestPost) {
318 fetch(requestPost)
319 // checks if response status is 200
320 .then(function (response) {
321 alert("Status do response: " + response.status);
322 if (response.status !== 200) {
323 console.log(
324 "Looks like there was a problem while registering. Status Code: " +
325 response.status
326 );
327 return;
328 }
329 if (response.status == 200) {
330 response.json().then(function (data) {
331 allAuctions = data;
332 // .json()) transforms the data into json
333 ordenaTabela(allAuctions);
334 drawAllAuctions();
335
336 /*
337 userJson.email = data.email;
338 userJson.username = data.username;
339 userJson.token = data.token;*/
340 });
341 alert("Tudo ok, lista de leilões retornada.");
342 }
343 })
344 // if the server returns any errors
345 .catch(function (err) {
346 console.log("Fetch Error :-S", err);
347 });
348
349 return true;
350}
351
352async function verificaAddAuction(requestPost) {
353 fetch(requestPost)
354 // checks if response status is 200
355 .then(function (response) {
356 alert("Status do response: " + response.status);
357 console.log(user + " " + email + " " + pass);
358 if (response.status !== 200) {
359 console.log(
360 "Looks like there was a problem while registering. Status Code: " +
361 response.status
362 );
363 return;
364 }
365 if (response.status == 200) {
366 /*response.json().then(function(data) {
367 // .json()) transforms the data into json
368
369 userJson.email = data.email;
370 userJson.username = data.username;
371 userJson.token = data.token;
372
373 console.log('Recebi este JSON do user: ' + userJson.username);
374 });*/
375 alert("Tudo ok, leilão adicionado.");
376 welcome_page();
377 }
378 })
379 // if the server returns any errors
380 .catch(function (err) {
381 console.log("Fetch Error :-S", err);
382 });
383
384 return true;
385}
386
387function all() {
388 const element1 = (
389 <div className="header-container">
390 <h1 className="w3-jumbo" id="h_all">
391 <b>Consulta de leilões</b>
392 </h1>
393 </div>
394 );
395
396 const element2 = (
397 <div
398 id="allauctions"
399 className="center-auctions"
400 style={{ display: "flex" }}
401 >
402 <button className="flex-item" onClick={getAllAuctions}>
403 Consultar todos os leilões
404 </button>
405 <button className="flex-item" onClick={getAllOpenAuctions}>
406 Consultar leilões a decorrer
407 </button>
408 <button className="flex-item" onClick={getAllClosedAuctions}>
409 Consultar leilões passados
410 </button>
411 </div>
412 );
413 ReactDOM.render(element1, document.getElementById("root_upper"));
414 ReactDOM.render(element2, document.getElementById("root"));
415}
416
417function editBid() {
418 const element1 = (
419 <div className="header-container">
420 <h1 className="w3-jumbo" id="h_editBid">
421 <b>Editar licitação</b>
422 </h1>
423 </div>
424 );
425
426 const element2 = (
427 <div id="editBid" className="create_auction">
428 <input
429 id="auction_minbid"
430 placeholder="Licitação mínima (valor mínimo: 0.01€)"
431 type="number"
432 step="0.01"
433 tabIndex={1}
434 required
435 />
436 <button name="submit" id="auction-submit">
437 Editar
438 </button>
439 </div>
440 );
441 ReactDOM.render(element1, document.getElementById("root_upper"));
442 ReactDOM.render(element2, document.getElementById("root"));
443}
444
445function editAuction() {
446 const element1 = (
447 <div className="header-container">
448 <h1 className="w3-jumbo" id="h_editAuction">
449 <b>Editar leilão</b>
450 </h1>
451 </div>
452 );
453
454 const element2 = (
455 <div id="edit-auction" className="create_auction">
456 <fieldset>
457 <input
458 id="auction-title"
459 placeholder="Título aqui"
460 type="text"
461 tabIndex={1}
462 required
463 autoFocus
464 />
465 </fieldset>
466 <fieldset>
467 <input
468 id="auction_minbid"
469 placeholder="Licitação mínima (valor mínimo: 0.01€)"
470 type="number"
471 step="0.01"
472 tabIndex={2}
473 required
474 />
475 </fieldset>
476 <fieldset>
477 <input
478 id="auction_date"
479 className="form-control"
480 style={{ borderRightStyle: "none" }}
481 type="date"
482 max="9999-12-12T00:00:00.00"
483 required
484 />
485 <input
486 id="auction_time"
487 className="form-control"
488 style={{ borderLeftStyle: "none" }}
489 type="time"
490 max="9999-12-12T00:00:00.00"
491 required
492 />
493 </fieldset>
494 <fieldset>
495 <textarea
496 id="auction_desc"
497 placeholder="A descrição aqui"
498 tabIndex={4}
499 required
500 defaultValue={""}
501 />
502 </fieldset>
503 <fieldset>
504 <button name="submit" id="auction-submit">
505 Editar
506 </button>
507 </fieldset>
508 </div>
509 );
510 ReactDOM.render(element1, document.getElementById("root_upper"));
511 ReactDOM.render(element2, document.getElementById("root"));
512}
513
514function viewAuction(x) {
515 var date = allAuctions[x].deadline.slice(0, 10);
516 var time = allAuctions[x].deadline.slice(10, 16);
517
518 const element1 = (
519 <div className="header-container">
520 <h1 className="w3-jumbo" id="h_viewAuction">
521 <b>Visualizar leilão</b>
522 </h1>
523 </div>
524 );
525
526 const element2 = (
527 <div id="view-auction" className="create_auction">
528 <fieldset>
529 <input
530 id="auction-title"
531 value={allAuctions[x].title}
532 placeholder="Título aqui"
533 type="text"
534 tabIndex={1}
535 disabled
536 />
537 </fieldset>
538 <fieldset>
539 <input
540 value={allAuctions[x].min_bid}
541 id="auction_minbid"
542 placeholder="Licitação mínima (valor mínimo: 0.01€)"
543 type="number"
544 step="0.01"
545 tabIndex={2}
546 disabled
547 />
548 </fieldset>
549 <fieldset>
550 <input
551 value={allAuctions[x].deadline.slice(0, 10)}
552 id="auction_date"
553 className="form-control"
554 style={{ borderRightStyle: "none" }}
555 type="date"
556 max="9999-12-12T00:00:00.00"
557 disabled
558 />
559 <input
560 value={allAuctions[x].deadline.slice(10, 16)}
561 id="auction_time"
562 className="form-control"
563 style={{ borderLeftStyle: "none" }}
564 type="time"
565 max="9999-12-12T00:00:00.00"
566 disabled
567 />
568 </fieldset>
569 <fieldset>
570 <textarea
571 id="auction_desc"
572 rows="10"
573 placeholder="A descrição aqui"
574 disabled
575 >
576 {allAuctions[x].description}
577 </textarea>
578 </fieldset>
579 <fieldset>
580 <button name="submit" id="auction-submit">
581 TBD
582 </button>
583 </fieldset>
584 </div>
585 );
586 ReactDOM.render(element1, document.getElementById("root_upper"));
587 ReactDOM.render(element2, document.getElementById("root"));
588}
589
590function auctions() {
591 const element1 = (
592 <div className="header-container">
593 <h1 className="w3-jumbo" id="h_auctions">
594 <b>Leilões</b>
595 </h1>
596 </div>
597 );
598
599 const element2 = (
600 <div id="auctions" className="center-auctions" style={{ display: "flex" }}>
601 <button className="flex-item" onClick={all}>
602 Consultar lista de leilões
603 </button>
604 <button className="flex-item">Consultar leilões que venceu</button>
605 <button className="flex-item" onClick={getAuctionsOwned}>
606 Consultar leilões que lhe pertencem
607 </button>
608 <button className="flex-item">Consultar leilões onde licitou</button>
609 </div>
610 );
611 ReactDOM.render(element1, document.getElementById("root_upper"));
612 ReactDOM.render(element2, document.getElementById("root"));
613}
614
615function bids() {
616 const element1 = (
617 <div className="header-container">
618 <h1 className="w3-jumbo" id="h_bids">
619 <b>Licitações</b>
620 </h1>
621 </div>
622 );
623
624 const element2 = (
625 <div id="bids" className="center-auctions">
626 <button className="flex-item">Consultar licitações de um leilão</button>
627 <button className="flex-item">Licitar num leilão a decorrer</button>
628 <button className="flex-item">Remover licitação</button>
629 </div>
630 );
631
632 ReactDOM.render(element1, document.getElementById("root_upper"));
633 ReactDOM.render(element2, document.getElementById("root"));
634}
635
636function management() {
637 const element1 = (
638 <div className="header-container">
639 <h1 className="w3-jumbo" id="h_management">
640 <b>Gestão de leilões</b>
641 </h1>
642 </div>
643 );
644
645 const element2 = (
646 <div id="management" className="center-auctions">
647 <button className="flex-item" onClick={create_auction}>
648 Criar um leilão
649 </button>
650 <button className="flex-item">Alterar leilão</button>
651 <button className="flex-item">Cancelar leilão</button>
652 </div>
653 );
654
655 ReactDOM.render(element1, document.getElementById("root_upper"));
656 ReactDOM.render(element2, document.getElementById("root"));
657}
658
659function bookmarks() {
660 const element1 = (
661 <div className="header-container">
662 <h1 className="w3-jumbo" id="h_bookmarks">
663 <b>Favoritos</b>
664 </h1>
665 </div>
666 );
667
668 const element2 = (
669 <div id="bookmarks" className="center-auctions">
670 <button className="flex-item">Adicionar leilão à lista</button>
671 <button className="flex-item">Remover leilão da lista</button>
672 <button className="flex-item">Consultar lista de favoritos</button>
673 </div>
674 );
675
676 ReactDOM.render(element1, document.getElementById("root_upper"));
677 ReactDOM.render(element2, document.getElementById("root"));
678}
679
680function welcome_page() {
681 document.getElementById("root_upper").style = "margin-left: 300px";
682 const element1 = (
683 <div className="header-container">
684 <h1 className="w3-jumbo" id="h_bookmarks">
685 <b>Seja bem vindo à Auctions'R'Us!</b>
686 </h1>
687 </div>
688 );
689
690 const element2 = <div id="bookmarks" className="center-auctions"></div>;
691
692 navbar();
693 ReactDOM.render(element1, document.getElementById("root_upper"));
694 ReactDOM.render(element2, document.getElementById("root"));
695}
696
697function create_auction() {
698 const element1 = (
699 <div className="header-container">
700 <h1 className="w3-jumbo" id="h_create_auction">
701 <b>Criar um leilão</b>
702 </h1>
703 </div>
704 );
705 const element2 = (
706 <div id="create-auction" className="create_auction">
707 <fieldset>
708 <input
709 id="auction-title"
710 placeholder="Título aqui"
711 type="text"
712 tabIndex={1}
713 required
714 autoFocus
715 />
716 </fieldset>
717 <fieldset>
718 <input
719 id="auction_minbid"
720 placeholder="Licitação mínima (valor mínimo: 0.01€)"
721 type="number"
722 step="0.01"
723 tabIndex={2}
724 required
725 />
726 </fieldset>
727 <fieldset>
728 <input
729 id="auction_date"
730 className="form-control"
731 style={{ borderRightStyle: "none" }}
732 type="date"
733 max="9999-12-12T00:00:00.00"
734 required
735 />
736 <input
737 id="auction_time"
738 className="form-control"
739 style={{ borderLeftStyle: "none" }}
740 type="time"
741 max="9999-12-12T00:00:00.00"
742 required
743 />
744 </fieldset>
745 <fieldset>
746 <textarea
747 id="auction_desc"
748 placeholder="A descrição aqui"
749 tabIndex={4}
750 required
751 defaultValue={""}
752 />
753 </fieldset>
754 <fieldset>
755 <button name="submit" id="auction-submit" onClick={verificaAuction}>
756 Criar
757 </button>
758 </fieldset>
759 </div>
760 );
761
762 ReactDOM.render(element1, document.getElementById("root_upper"));
763 ReactDOM.render(element2, document.getElementById("root"));
764}
765
766function landingpage() {
767 userJson.email = "";
768 userJson.username = "";
769 userJson.token = "";
770 userJson.password = "";
771 document.getElementById("root_upper").style = "";
772
773 const element1 = (
774 <div className="header-container">
775 <h1 className="w3-jumbo" id="h_landing_page">
776 <b>Página de login/registo</b>
777 </h1>
778 </div>
779 );
780
781 const element2 = (
782 <div id="welcome-options" className="center-login">
783 <button className="flex-item" onClick={landinglogin}>
784 Login
785 </button>
786 <button className="flex-item" onClick={landingregister}>
787 Registo
788 </button>
789 </div>
790 );
791 const element3 = <div></div>;
792
793 ReactDOM.render(element1, document.getElementById("root_upper"));
794 ReactDOM.render(element2, document.getElementById("root"));
795 ReactDOM.render(element3, document.getElementById("root_nav"));
796}
797
798function navbar() {
799 const element = (
800 <nav
801 className="w3-sidebar w3-green w3-collapse w3-top w3-large w3-padding"
802 style={{ zIndex: 3, width: "300px", fontWeight: "bold" }}
803 id="mySidebar"
804 >
805 <br />
806 <div className="w3-container">
807 <h3 className="w3-padding-64">
808 <b>Auctions'R'Us!</b>
809 </h3>
810 <br />
811 </div>
812 <div className="w3-bar-block">
813 <a onClick={auctions} className="w3-bar-item w3-button w3-hover-white">
814 Lista de leilões
815 </a>
816 <a onClick={bids} className="w3-bar-item w3-button w3-hover-white">
817 Licitações
818 </a>
819 <a
820 onClick={management}
821 className="w3-bar-item w3-button w3-hover-white"
822 >
823 Gestão de leilões
824 </a>
825 <a onClick={bookmarks} className="w3-bar-item w3-button w3-hover-white">
826 Favoritos
827 </a>
828 <br />
829 <br />
830 <br />
831 <a
832 onClick={landingpage}
833 className="w3-bar-item w3-button w3-hover-white"
834 >
835 Logout
836 </a>
837 </div>
838 </nav>
839 );
840
841 ReactDOM.render(element, document.getElementById("root_nav"));
842}
843
844function landinglogin() {
845 const element1 = (
846 <div className="header-container">
847 <h1 className="w3-jumbo" id="h_login">
848 <b>Login</b>
849 </h1>
850 </div>
851 );
852 const element2 = (
853 <div id="login-form" className="create_login">
854 <button
855 name="close"
856 id="close-button"
857 className="form-close"
858 onClick={landingpage}
859 >
860 ×
861 </button>
862 <fieldset>
863 <input
864 id="userLogin"
865 name="username"
866 placeholder="username"
867 type="text"
868 tabIndex={1}
869 required
870 autoFocus
871 />
872 </fieldset>
873 <fieldset>
874 <input
875 id="passLogin"
876 name="password"
877 placeholder="password"
878 type="password"
879 tabIndex={2}
880 required
881 />
882 </fieldset>
883 <fieldset>
884 <button name="submit" id="login-button" onClick={checkLogin}>
885 Login
886 </button>
887 </fieldset>
888 </div>
889 );
890
891 ReactDOM.render(element1, document.getElementById("root_upper"));
892 ReactDOM.render(element2, document.getElementById("root"));
893}
894
895function preferredOrder(obj, order) {
896 var newObject = {};
897 for (var i = 0; i < order.length; i++) {
898 if (obj.hasOwnProperty(order[i])) {
899 newObject[order[i]] = obj[order[i]];
900 }
901 }
902 return newObject;
903}
904
905function ordenaTabela(data) {
906 for (i = 0; i < data.length; i++)
907 data[i] = preferredOrder(data[i], [
908 "id",
909 "title",
910 "description",
911 "min_bid",
912 "deadline",
913 ]);
914 var col = [];
915 for (var i = 0; i < data.length; i++) {
916 for (var key in data[i]) {
917 if (col.indexOf(key) === -1) {
918 col.push(key);
919 }
920 }
921 }
922}
923
924class Table extends React.Component {
925 constructor(props) {
926 super(props);
927 }
928
929 openHandleClick = (e) => {
930 e.preventDefault();
931 const { id } = e.target;
932 viewAuction(id);
933 };
934
935 render() {
936 let rows = [];
937 for (var i = 0; i < allAuctions.length; i++) {
938 let rowID = `row${i}`;
939 rows.push(
940 <tr key={i} id={rowID}>
941 <td>{allAuctions[i].title}</td>
942 <td>{allAuctions[i].description}</td>
943 <td>{allAuctions[i].min_bid}</td>
944 <td>{allAuctions[i].deadline}</td>
945 <td>
946 <button id={i} onClick={this.openHandleClick}>
947 Click me!
948 </button>
949 </td>
950 </tr>
951 );
952 }
953 return (
954 <table
955 id="simple-board"
956 className="w3-table w3-bordered w3-border w3-striped"
957 style={{ marginLeft: "300px" }}
958 >
959 <tbody>
960 <tr className="w3-green">
961 <td>Título</td>
962 <td>Descrição</td>
963 <td>Licitação mínima</td>
964 <td>Deadline</td>
965 <td></td>
966 </tr>
967 </tbody>
968 <tbody>{rows}</tbody>
969 </table>
970 );
971 }
972}
973
974var rows;
975
976function calculaRows() {
977 rows = [];
978 for (var i = 0; i < allAuctions.length; i++) {
979 let rowID = `row${i}`;
980 rows.push(
981 <tr key={i} id={rowID}>
982 <td>{allAuctions[i].title}</td>
983 <td>{allAuctions[i].description}</td>
984 <td>{allAuctions[i].min_bid}</td>
985 <td>{allAuctions[i].deadline}</td>
986 <td>
987 <button onClick={() => console.log()}>Click me!</button>
988 </td>
989 </tr>
990 );
991 }
992}
993
994function drawAllAuctions() {
995 calculaRows();
996
997 const element = (
998 <table
999 id="simple-board"
1000 className="w3-table w3-bordered w3-border w3-striped"
1001 style={{ marginLeft: "300px" }}
1002 >
1003 <tbody>
1004 <tr className="w3-green">
1005 <td>Título</td>
1006 <td>Descrição</td>
1007 <td>Licitação mínima</td>
1008 <td>Deadline</td>
1009 <td></td>
1010 </tr>
1011 </tbody>
1012 <tbody>{rows}</tbody>
1013 </table>
1014 );
1015
1016 ReactDOM.render(<Table />, document.getElementById("root"));
1017}
1018
1019function adminDashboard() {
1020 /*for (int i = 0; i < auctions.length; i++)
1021if auctions[i].highestbid > highest bid
1022*/
1023
1024 //CRIAR TABELA PARA MOSTRAR ESTATÍSTICAS
1025
1026 const element = (
1027 <table
1028 id="simple-board"
1029 className="w3-table w3-bordered w3-border w3-striped"
1030 style={{ marginLeft: "300px" }}
1031 >
1032 <tbody>
1033 <tr className="w3-green">
1034 <td>Leilões abertos</td>
1035 <td>{stats.openAuctions}</td>
1036 </tr>
1037 <tr className="w3-green">
1038 <td>Leilões fechados</td>
1039 <td>{stats.closedAuctions}</td>
1040 </tr>
1041 <tr className="w3-green">
1042 <td>Licitação Recorde</td>
1043 <td>{stats.max_bid}</td>
1044 </tr>
1045 <tr className="w3-green">
1046 <td>Total de Licitações</td>
1047 <td>{stats.totalBids}</td>
1048 </tr>
1049 <tr className="w3-green">
1050 <td>Utilizadores Activos</td>
1051 <td>{stats.totalBidders}</td>
1052 </tr>
1053 </tbody>
1054 </table>
1055 );
1056
1057 const data1 = [
1058 {
1059 id: "novos utilizadores",
1060 color: "hsl(283, 70%, 50%)",
1061 data: [
1062 {
1063 x: "há 6 dias",
1064 y: 5,
1065 },
1066 {
1067 x: "há 5 dias",
1068 y: 12,
1069 },
1070 {
1071 x: "há 4 dias",
1072 y: 16,
1073 },
1074 {
1075 x: "há 3 dias",
1076 y: 22,
1077 },
1078 {
1079 x: "há 2 dias",
1080 y: 24,
1081 },
1082 {
1083 x: "há 1 dia",
1084 y: 36,
1085 },
1086 {
1087 x: "hoje",
1088 y: 55,
1089 },
1090 ],
1091 },
1092 ];
1093
1094 const data2 = [
1095 {
1096 id: "novos leilões",
1097 color: "hsl(79, 70%, 50%)",
1098 data: [
1099 {
1100 x: "há 6 dias",
1101 y: 22,
1102 },
1103 {
1104 x: "há 5 dias",
1105 y: 63,
1106 },
1107 {
1108 x: "há 4 dias",
1109 y: 95,
1110 },
1111 {
1112 x: "há 3 dias",
1113 y: 122,
1114 },
1115 {
1116 x: "há 2 dias",
1117 y: 166,
1118 },
1119 {
1120 x: "há 1 dia",
1121 y: 201,
1122 },
1123 {
1124 x: "hoje",
1125 y: 252,
1126 },
1127 ],
1128 },
1129 {
1130 id: "leilões fechados",
1131 color: "hsl(219, 70%, 50%)",
1132 data: [
1133 {
1134 x: "há 6 dias",
1135 y: 15,
1136 },
1137 {
1138 x: "há 5 dias",
1139 y: 53,
1140 },
1141 {
1142 x: "há 4 dias",
1143 y: 82,
1144 },
1145 {
1146 x: "há 3 dias",
1147 y: 111,
1148 },
1149 {
1150 x: "há 2 dias",
1151 y: 155,
1152 },
1153 {
1154 x: "há 1 dia",
1155 y: 187,
1156 },
1157 {
1158 x: "hoje",
1159 y: 221,
1160 },
1161 ],
1162 },
1163 ];
1164
1165 const MyResponsiveLine = ({ data1 /* see data tab */ }) => (
1166 <ResponsiveLine
1167 data={data1}
1168 margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
1169 xScale={{ type: "point" }}
1170 yScale={{
1171 type: "linear",
1172 min: "auto",
1173 max: "auto",
1174 stacked: true,
1175 reverse: false,
1176 }}
1177 axisTop={null}
1178 axisRight={null}
1179 axisBottom={{
1180 orient: "bottom",
1181 tickSize: 5,
1182 tickPadding: 5,
1183 tickRotation: 0,
1184 legend: "Novos Utilizadores",
1185 legendOffset: 36,
1186 legendPosition: "middle",
1187 }}
1188 axisLeft={{
1189 orient: "left",
1190 tickSize: 5,
1191 tickPadding: 5,
1192 tickRotation: 0,
1193 legend: "count",
1194 legendOffset: -40,
1195 legendPosition: "middle",
1196 }}
1197 colors={{ scheme: "nivo" }}
1198 pointSize={10}
1199 pointColor={{ theme: "background" }}
1200 pointBorderWidth={2}
1201 pointBorderColor={{ from: "serieColor" }}
1202 pointLabel="y"
1203 pointLabelYOffset={-12}
1204 useMesh={true}
1205 legends={[
1206 {
1207 anchor: "bottom-right",
1208 direction: "column",
1209 justify: false,
1210 translateX: 100,
1211 translateY: 0,
1212 itemsSpacing: 0,
1213 itemDirection: "left-to-right",
1214 itemWidth: 80,
1215 itemHeight: 20,
1216 itemOpacity: 0.75,
1217 symbolSize: 12,
1218 symbolShape: "circle",
1219 symbolBorderColor: "rgba(0, 0, 0, .5)",
1220 effects: [
1221 {
1222 on: "hover",
1223 style: {
1224 itemBackground: "rgba(0, 0, 0, .03)",
1225 itemOpacity: 1,
1226 },
1227 },
1228 ],
1229 },
1230 ]}
1231 />
1232 );
1233
1234 const MyResponsiveLine2 = ({ data2 /* see data tab */ }) => (
1235 <ResponsiveLine
1236 data={data2}
1237 margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
1238 xScale={{ type: "point" }}
1239 yScale={{
1240 type: "linear",
1241 min: "auto",
1242 max: "auto",
1243 stacked: true,
1244 reverse: false,
1245 }}
1246 axisTop={null}
1247 axisRight={null}
1248 axisBottom={{
1249 orient: "bottom",
1250 tickSize: 5,
1251 tickPadding: 5,
1252 tickRotation: 0,
1253 legend: "Info Leilões",
1254 legendOffset: 36,
1255 legendPosition: "middle",
1256 }}
1257 axisLeft={{
1258 orient: "left",
1259 tickSize: 5,
1260 tickPadding: 5,
1261 tickRotation: 0,
1262 legend: "count",
1263 legendOffset: -40,
1264 legendPosition: "middle",
1265 }}
1266 colors={{ scheme: "nivo" }}
1267 pointSize={10}
1268 pointColor={{ theme: "background" }}
1269 pointBorderWidth={2}
1270 pointBorderColor={{ from: "serieColor" }}
1271 pointLabel="y"
1272 pointLabelYOffset={-12}
1273 useMesh={true}
1274 legends={[
1275 {
1276 anchor: "bottom-right",
1277 direction: "column",
1278 justify: false,
1279 translateX: 100,
1280 translateY: 0,
1281 itemsSpacing: 0,
1282 itemDirection: "left-to-right",
1283 itemWidth: 80,
1284 itemHeight: 20,
1285 itemOpacity: 0.75,
1286 symbolSize: 12,
1287 symbolShape: "circle",
1288 symbolBorderColor: "rgba(0, 0, 0, .5)",
1289 effects: [
1290 {
1291 on: "hover",
1292 style: {
1293 itemBackground: "rgba(0, 0, 0, .03)",
1294 itemOpacity: 1,
1295 },
1296 },
1297 ],
1298 },
1299 ]}
1300 />
1301 );
1302
1303 ReactDOM.render(element, document.getElementById("root_upper"));
1304 ReactDOM.render(MyResponsiveLine, document.getElementById("root"));
1305 ReactDOM.render(MyResponsiveLine2, document.getElementById("root_nav"));
1306}
1307
1308window.onload = landingpage();