You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

158 lines
3.7 KiB

4 years ago
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Kostenerstattungsforumlar</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- Kube CSS -->
  8. <link rel="stylesheet" href="kube/dist/css/kube.min.css">
  9. <link rel="stylesheet" href="kube/dist/addons/kube-addons.min.css" />
  10. </head>
  11. <body>
  12. <h1>Antrag auf Kostenerstattung</h1>
  13. <p>Bitte beachte beim Ausfüllen die
  14. <a href="https://www.wikimedia.de/wiki/
  15. Gesch%C3%A4ftsordnung#Reisekostenordnung">
  16. Reisekostenordnung</a>.
  17. </p>
  18. <h2>Bitte fülle die allgemeinen Daten für die Erstattung aus.</h2>
  19. <form method="POST">
  20. <label>Dein Projekt / Zweck der Reise</label>
  21. <input type="text" name="projekt"/>
  22. </form>
  23. <h2>Bitte trage deine einzelnen Kostenpositionen ein.</h2>
  24. <span data-kube="datepicker" data-format="%F %d, %Y">July 10, 2018</span>
  25. <p>
  26. Bitte trage nur eine Ausgabe pro Zeile ein, lege den
  27. Originalbeleg dem Antrag bei und kennzeichne den Beleg
  28. mit der entsprechenden Zeilennummer. Aus der Beschreibung
  29. soll zu ersehen sein, ob es sich um Transport, Dienstleistung,
  30. Materialien, Verpflegung oder ähnliches handelt.
  31. </p>
  32. <input type="date"/>
  33. <br><br>
  34. <span data-kube="datepicker" data-format="%F %d, %Y">July 10, 2018</span>
  35. <br><br>
  36. <table class="is-bordered">
  37. <thead>
  38. <tr>
  39. <th>Pos.</th>
  40. <th>Beschreibung</th>
  41. <th>Belegdatum</th>
  42. <th>Betrag</th>
  43. <th>Beleg</th>
  44. </tr>
  45. </thead>
  46. <tbody>
  47. <tr id="row0">
  48. <td>1</td>
  49. <td>
  50. <textarea rows="2"> </textarea>
  51. <td style="overflow:visible;" >
  52. <input type="date"/>
  53. </td>
  54. <td style="overflow:visible;" >
  55. <input type="num"/>
  56. </td>
  57. <td style="overflow:visible;" >
  58. <div class="form-item">
  59. <div class="upload" data-kube="upload" data-type="file"
  60. data-target="#my-upload-target"
  61. data-url="/upload/" data-url-remove="/upload-remove/">
  62. </div>
  63. <div id="my-upload-target" class="upload-target">
  64. <div class="upload-item" data-id="3746">
  65. <span class="close"></span>
  66. <span>My file.txt <em>10 Kb</em></span>
  67. <input type="hidden" name="file-uploaded[]" value="3746">
  68. </div>
  69. </div>
  70. </div>
  71. </td>
  72. </tr>
  73. </tbody>
  74. </table>
  75. <h3 data-kube="editable" placeholder="Enter text here...">hello world</h3>
  76. <div class="alert">Heho!</div>
  77. <div data-kube="tube">
  78. Kube Data
  79. </div>
  80. <input type="text" data-kube="tube"/>
  81. <!-- Kube JS (optional if you are using Kube CSS only) -->
  82. <script src="kube/dist/js/kube.min.js"></script>
  83. <script src="kube/dist/addons/kube-addons.min.js"></script>
  84. <script>
  85. $K.add('module','tube', {
  86. init: function(app,context){
  87. this.app = app;
  88. // getting context and the module element
  89. this.context = context;
  90. this.$element = context.getElement();
  91. },
  92. start: function()
  93. {
  94. /* this.$element.on('keydown.kube.editable', this._hui.bind(this));
  95. this.$element.on('paste.kube.editable', this._hui.bind(this));
  96. this.$element.on('blur.kube.editable', this._hui.bind(this));
  97. */
  98. this.$element.on('click', this._hui.bind(this));
  99. this._build();
  100. },
  101. // public
  102. myMethod: function()
  103. {
  104. },
  105. _hui: function(e)
  106. {
  107. alert(e);
  108. },
  109. // private
  110. _build: function()
  111. {
  112. },
  113. onmessage: {
  114. alert: {
  115. closed: function(sender)
  116. {
  117. alert(sender);
  118. // caught
  119. }
  120. }
  121. }
  122. });
  123. $K.init();
  124. </script>
  125. </body>
  126. </html>