Index.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
  2. <f:layout name="Backend" />
  3. <f:section name="main">
  4. <h1>Dashboard</h1>
  5. <hr style="width: 100%; border: 1px solid black; margin: 20px 0;">
  6. <h2>List of terms</h2>
  7. <style>
  8. th {
  9. cursor: pointer;
  10. }
  11. th:hover {
  12. background-color: #f1f1f1;
  13. }
  14. </style>
  15. <table id="termsTable" style="width: 100%">
  16. <thead>
  17. <tr>
  18. <th onclick="sortTable('termsTable',0)" additionalAttributes="{style: 'width: 10px;'}">ID</th>
  19. <th onclick="sortTable('termsTable',1)" additionalAttributes="{style: 'width: 200px;'}">Term</th>
  20. <th onclick="sortTable('termsTable',2)" additionalAttributes="{style: 'width: 200px;'}">Type</th>
  21. <th onclick="sortTable('termsTable',3)" additionalAttributes="{style: 'width: 200px;'}">Category</th>
  22. <th onclick="sortTable('termsTable',4)" additionalAttributes="{style: 'width: 400px;'}">URL</th>
  23. <th additionalAttributes="{style: 'width: 100px;'}">Action</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <f:for each="{terms}" as="term">
  28. <tr>
  29. <td>{term.uid}</td>
  30. <td>{term.term}</td>
  31. <td>{term.type.title}</td>
  32. <td>{term.category.title}</td>
  33. <td>{term.url.title}</td>
  34. <td>
  35. <f:link.action action="deleteTerm" arguments="{termId: term.uid}" class="btn" title="Delete" onclick="return confirm('Are you sure you want to delete this term?');">Delete</f:link.action>
  36. </td>
  37. </tr>
  38. </f:for>
  39. </tbody>
  40. </table>
  41. <hr style="width: 100%; border: 1px solid black; margin: 20px 0;">
  42. <h2>Add words (semicolon-separated) with a type</h2>
  43. <f:flashMessages />
  44. <f:form action="create">
  45. <div class="form-group" additionalAttributes="{style: 'margin-bottom: 1rem;'}">
  46. <label for="termList">Terms:</label>
  47. <f:form.textfield name="termList" additionalAttributes="{style: 'width: 100%; height: 30px; display: block;'}" /><br>
  48. </div>
  49. <div class="form-group">
  50. <label for="typeTitle">Type:</label>
  51. <f:form.select name="typeTitle" additionalAttributes="{style: 'width: 150px; height: 30px; display: block;'}">
  52. <f:form.select.option value="direct">direct</f:form.select.option>
  53. <f:form.select.option value="medical">medical</f:form.select.option>
  54. <f:form.select.option value="bewerbung">bewerbung</f:form.select.option>
  55. <f:form.select.option value="studiumWords">studium</f:form.select.option>
  56. <f:form.select.option value="ausbildungWords">ausbildung</f:form.select.option>
  57. <f:form.select.option value="weiterbildung">weiterbildung</f:form.select.option>
  58. <f:form.select.option value="middleWords">middlewords</f:form.select.option>
  59. <f:form.select.option value="blacklist">blacklist</f:form.select.option>
  60. </f:form.select><br>
  61. </div>
  62. <div class="form-group">
  63. <label for="categoryTitle">Category:</label>
  64. <f:form.select name="categoryTitle" additionalAttributes="{style: 'width: 150px; height: 30px; display: block;'}">
  65. <f:form.select.option value="Allgemein">Allgemein</f:form.select.option>
  66. <f:form.select.option value="Verben">Verben</f:form.select.option>
  67. <f:form.select.option value="Nomen">Nomen</f:form.select.option>
  68. <f:form.select.option value="Adjektive">Adjektive</f:form.select.option>
  69. <f:form.select.option value="Artikel">Artikel</f:form.select.option>
  70. <f:form.select.option value="Numerale">Numerale</f:form.select.option>
  71. <f:form.select.option value="Konjunktionen">Konjunktionen</f:form.select.option>
  72. <f:form.select.option value="Personalpronomen">Personalpronomen</f:form.select.option>
  73. <f:form.select.option value="Relativpronomen">Relativpronomen</f:form.select.option>
  74. <f:form.select.option value="Indefinitpronomen">Indefinitpronomen</f:form.select.option>
  75. <f:form.select.option value="Praepositionen">Präpositionen</f:form.select.option>
  76. <f:form.select.option value="Adverbien">Adverbien</f:form.select.option>
  77. <f:form.select.option value="Partikel">Partikel</f:form.select.option>
  78. </f:form.select><br>
  79. </div>
  80. <div class="form-group">
  81. <label for="urlTitle">URL:</label>
  82. <f:form.textfield name="urlTitle" additionalAttributes="{style: 'width: 400px; height: 30px; display: block;'}" /><br>
  83. </div>
  84. <f:form.submit value="Save" />
  85. </f:form>
  86. <script>
  87. function sortTable(tableId, columnIndex) {
  88. var table, rows, switching, i, x, y, shouldSwitch, direction, switchCount = 0;
  89. table = document.getElementById(tableId);
  90. switching = true;
  91. direction = "asc";
  92. while (switching) {
  93. switching = false;
  94. rows = table.rows;
  95. for (i = 1; i < (rows.length - 1); i++) {
  96. shouldSwitch = false;
  97. x = rows[i].getElementsByTagName("TD")[columnIndex];
  98. y = rows[i + 1].getElementsByTagName("TD")[columnIndex];
  99. if (direction == "asc") {
  100. if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
  101. shouldSwitch = true;
  102. break;
  103. }
  104. } else if (direction == "desc") {
  105. if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
  106. shouldSwitch = true;
  107. break;
  108. }
  109. }
  110. }
  111. if (shouldSwitch) {
  112. rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
  113. switching = true;
  114. switchCount++;
  115. } else {
  116. if (switchCount == 0 && direction == "asc") {
  117. direction = "desc";
  118. switching = true;
  119. }
  120. }
  121. }
  122. }
  123. </script>
  124. </f:section>
  125. </html>