Geen omschrijving

index.html 4.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  6. <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  7. <script src="components/loader.js"></script>
  8. <script src="lib/onsenui/js/onsenui.min.js"></script>
  9. <script src="extra.js"></script>
  10. <script>
  11. function onBodyLoad() {
  12. // ons.notification.alert("onload");
  13. document.addEventListener("deviceready", onDeviceReady, false);
  14. bindEvents();
  15. doOpenDatabase();
  16. createStudentTable();
  17. createButtonsMainScreen();
  18. }
  19. function onDeviceReady() {
  20. // ons.notification.alert("Cordova is ready");
  21. // navigator.notification.alert("Cordova is ready!");
  22. }
  23. </script>
  24. <link rel="stylesheet" href="components/loader.css">
  25. <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  26. <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  27. <link rel="stylesheet" href="css/style.css">
  28. <script
  29. src="https://code.jquery.com/jquery-3.4.1.js"
  30. integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  31. crossorigin="anonymous"></script>
  32. <script>
  33. document.addEventListener('init', function(event) {
  34. var page = event.target;
  35. // ons.notification.alert('target:' + page.id);
  36. if (page.id === 'attendanceSheet') {
  37. // ons.notification.alert('yup:' + page.id);
  38. page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  39. var studList = page.data.students;
  40. for (var i = 0; i < studList.length ; i++) {
  41. $('#studentList').append('<ons-list-item tappable><label class="left"><ons-checkbox value="' + studList[i].id + '" input-id="check-' + studList[i].id + '"></ons-checkbox></label><label for="check-' + studList[i].id + '" class="center">' + studList[i].name + '</label></ons-list-item>');
  42. }
  43. }
  44. if (page.id === 'page1') {
  45. page.querySelector('#push-button').onclick = function() {
  46. document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
  47. };
  48. } else if (page.id === 'page2') {
  49. page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
  50. }
  51. });
  52. const login = () => {
  53. const username = document.querySelector('#username').value;
  54. const password = document.querySelector('#password').value;
  55. if (username === 'user' && password === 'pass') {
  56. // call the navigator to move to the new page
  57. const navigator = document.querySelector('#navigator');
  58. navigator.resetToPage('home.html');
  59. } else {
  60. ons.notification.alert('Wrong username/password combination');
  61. }
  62. }
  63. function bindEvents () {
  64. // ons.notification.alert('bind events');
  65. //document.getElementById('btnReadCheckboxes').addEventListener('click', this.readCheckboxes);
  66. }
  67. </script>
  68. </head>
  69. <body onload="onBodyLoad()">
  70. <ons-navigator id="navigator">
  71. <ons-page>
  72. <div style="text-align: center; margin-top: 200px">
  73. <div id="courses"></div>
  74. <p id="buttonSection">
  75. <!-- <ons-button onclick="addSection()">Add Course</ons-button>
  76. <ons-button onclick="readTables()">dbg</ons-button> -->
  77. </p>
  78. <p id="dbg" style="font-size: 9px;"></p>
  79. </div>
  80. <textarea class="textarea" id="txtDebug" style="width: 100%; height: 100px; font-size:10px; font-family: Courier New; "></textarea>
  81. </ons-page>
  82. <template id="dialog.html">
  83. <ons-dialog id="my-dialog">
  84. <div style="text-align: center; padding: 10px;">
  85. <p>
  86. Please enter Course-Section
  87. </p>
  88. <p>
  89. <ons-input id="sectionName" modifier="underbar" placeholder="Course-Section" float></ons-input>
  90. </p>
  91. <p>
  92. <ons-button onclick="hideDialog('my-dialog')">Save</ons-button>
  93. <ons-button onclick="killDialog('my-dialog')">Cancel</ons-button>
  94. </p>
  95. <p id="sectionDialogError" style="color:red;"></p>
  96. </div>
  97. </ons-dialog>
  98. </template>
  99. </body>
  100. </html>