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.

269 lines
12 KiB

  1. {% extends "base.html" %} {% load static %} {% block header %} {% endblock %} {% block content %}
  2. <section class="container" id="root">
  3. <div class="columns">
  4. <div class="column is-8">
  5. <div class="box content">
  6. <article class="post">
  7. <h4>Learning Curve</h4>
  8. <div class="media">
  9. <div class="media-content">
  10. <div class="content">
  11. <canvas id="myChart"></canvas>
  12. </div>
  13. </div>
  14. </div>
  15. </article>
  16. </div>
  17. </div>
  18. <div class="column is-4">
  19. <div class="box content">
  20. <article class="post">
  21. <h4>Stats</h4>
  22. <div class="media">
  23. <div class="media-content">
  24. <div class="content">
  25. <canvas id="myPie"></canvas>
  26. </div>
  27. </div>
  28. </div>
  29. </article>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="columns" style="margin-top:-1rem;">
  34. <div class="column is-8">
  35. <div class="box content">
  36. <article class="post">
  37. <h4>Label Management</h4>
  38. <div class="media">
  39. <div class="media-content">
  40. <div class="content">
  41. <div class="field is-horizontal">
  42. <div class="field-label is-normal">
  43. <label class="label">Label name</label>
  44. </div>
  45. <div class="field-body">
  46. <div class="field">
  47. <p class="control is-expanded has-icons-left">
  48. <input class="input" type="text" placeholder="Label name" required>
  49. <span class="icon is-small is-left">
  50. <i class="fas fa-tag"></i>
  51. </span>
  52. </p>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="field is-horizontal">
  57. <div class="field-label is-normal">
  58. <label class="label">Shortcut</label>
  59. </div>
  60. <div class="field-body">
  61. <div class="field is-narrow">
  62. <div class="control">
  63. <div class="select is-fullwidth">
  64. <select>
  65. <option>Business development</option>
  66. <option>Marketing</option>
  67. <option>Sales</option>
  68. </select>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="field is-horizontal">
  75. <div class="field-label is-normal">
  76. <label class="label">Background Color</label>
  77. </div>
  78. <div class="field-body">
  79. <div class="field">
  80. <div class="control">
  81. <input type="color" value="#209cee">
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="field is-horizontal">
  87. <div class="field-label is-normal">
  88. <label class="label">Text Color</label>
  89. </div>
  90. <div class="field-body">
  91. <div class="field">
  92. <div class="control">
  93. <input type="color" value="#ffffff">
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="field is-horizontal">
  99. <div class="field-label">
  100. <!-- Left empty for spacing -->
  101. </div>
  102. <div class="field-body">
  103. <div class="field">
  104. <div class="control">
  105. <button class="button is-primary">
  106. Add
  107. </button>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. <div class="field is-grouped">
  113. <p class="control is-expanded">
  114. <input class="input" type="text" placeholder="Label name" v-model="newLabel" required>
  115. </p>
  116. <p class="control">
  117. <input class="input" type="text" placeholder="Shortcut key" v-model="newShortcut" required>
  118. </p>
  119. <p class="control">
  120. <a class="button is-primary" v-on:click="addLabel()">
  121. Add
  122. </a>
  123. </p>
  124. </div>
  125. <table class="table">
  126. <thead>
  127. <tr>
  128. <th>
  129. Id
  130. </th>
  131. <th>Label name</th>
  132. <th>Shortcut key</th>
  133. <th>Deletion</th>
  134. </tr>
  135. </thead>
  136. <tbody>
  137. <tr v-for="(label, index) in labels">
  138. <th>[[ index + 1 ]]</th>
  139. <td>[[ label.text ]]</td>
  140. <td>[[ label.shortcut ]]</td>
  141. <td><a class="button is-danger is-small" v-on:click="removeLabel(index)">Delete</a></td>
  142. </tr>
  143. </tbody>
  144. </table>
  145. </div>
  146. </div>
  147. </div>
  148. </article>
  149. </div>
  150. </div>
  151. <div class="column is-4">
  152. <div class="box content">
  153. <article class="post">
  154. <h4>Data Management</h4>
  155. <div class="media">
  156. <div class="media-content">
  157. <div class="content">
  158. <p>Data upload</p>
  159. <div class="file has-name is-right is-fullwidth">
  160. <label class="file-label">
  161. <input class="file-input" type="file" name="resume" ref="file" v-on:change="handleFileUpload()" />
  162. <span class="file-cta">
  163. <span class="file-icon">
  164. <i class="fas fa-upload"></i>
  165. </span>
  166. <span class="file-label">
  167. Upload
  168. </span>
  169. </span>
  170. <span class="file-name">
  171. [[ file_name ]]
  172. </span>
  173. </label>
  174. </div>
  175. <br>
  176. <p>Data Download</p>
  177. <a class="button" href="{% url 'download' project.id %}">
  178. <span class="icon">
  179. <i class="fas fa-download"></i>
  180. </span>
  181. <span>Download</span>
  182. </a>
  183. </div>
  184. </div>
  185. </div>
  186. </article>
  187. </div>
  188. </div>
  189. </div>
  190. </section>
  191. <script type="text/javascript" src="{% static 'js/project_admin.js' %}"></script>
  192. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  193. <script type="text/javascript">
  194. var ctx = document.getElementById('myChart').getContext('2d');
  195. var ctx1 = document.getElementById('myPie');
  196. var pie = new Chart(ctx1, {
  197. type: 'doughnut',
  198. data: {
  199. datasets: [{
  200. data: [10, 20],
  201. backgroundColor: ["#50dc64", "#3399ff"],
  202. }],
  203. labels: [
  204. 'Labeled',
  205. 'Unlabeled'
  206. ]
  207. }
  208. });
  209. var chart = new Chart(ctx, {
  210. // The type of chart we want to create
  211. type: 'line',
  212. // The data for our dataset
  213. data: {
  214. labels: [50, 100, 150, 200, 250, 300],
  215. datasets: [{
  216. label: "training",
  217. backgroundColor: 'rgb(80, 220, 100)',
  218. borderColor: 'rgb(80, 220, 100)',
  219. //data: [72, 83, 86, 87, 88, 88.5],
  220. data: [94, 93.5, 93, 93, 93, 92.5],
  221. fill: false,
  222. },
  223. {
  224. label: "validation",
  225. backgroundColor: 'rgb(51, 153, 255)',
  226. borderColor: 'rgb(51, 153, 255)',
  227. data: [72, 80, 83, 85, 86, 86.5],
  228. fill: false,
  229. }
  230. ]
  231. },
  232. // Configuration options go here
  233. options: {
  234. legend: {
  235. display: true,
  236. position: 'right'
  237. },
  238. scales: {
  239. yAxes: [{
  240. scaleLabel: {
  241. display: true,
  242. labelString: 'Accuracy'
  243. }
  244. }],
  245. xAxes: [{
  246. scaleLabel: {
  247. display: true,
  248. labelString: 'Number of training samples'
  249. }
  250. }],
  251. }
  252. }
  253. });
  254. </script>
  255. {% endblock %}