Index.html 6.0 KB

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