main.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <html>
  2. <head>
  3. <title>Master service</title>
  4. <style>
  5. html, body {
  6. color: #333;
  7. padding: 20px;
  8. }
  9. .block {
  10. flex-grow: 1;
  11. max-width: 100%;
  12. padding-right: 40px;
  13. }
  14. .container {
  15. display: flex;
  16. justify-content: space-between;
  17. max-width: 1200px;
  18. flex-wrap: wrap;
  19. }
  20. .table {
  21. padding: 20px;
  22. border: 1px solid #dadada;
  23. }
  24. .table__header,
  25. .table__row {
  26. display: flex;
  27. }
  28. .table__header {
  29. padding-bottom: 10px;
  30. font-weight: bold;
  31. }
  32. .form-error {
  33. color: #FF3333;
  34. }
  35. .table__col-narrow {
  36. width: 100px;
  37. }
  38. .table__col-wide {
  39. width: 200px;
  40. }
  41. .table__col-actions {
  42. width: 120px;
  43. display: flex;
  44. justify-content: space-between;
  45. }
  46. .table__col-narrow:last-child,
  47. .table__col-wide:last-child {
  48. width: auto;
  49. }
  50. .form__input {
  51. width: 200px;
  52. padding: 5px;
  53. }
  54. .form__submit {
  55. padding: 5px;
  56. }
  57. .form__select {
  58. padding: 5px;
  59. min-width: 200px;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <h1>CQRS Demo: master service</h1>
  65. <div class="container">
  66. <div class="block">
  67. <h2>Users:</h2>
  68. <div class="table">
  69. <div class="table__header">
  70. <div class="table__col-narrow">ID</div>
  71. <div class="table__col-wide">Username</div>
  72. <div class="table__col-wide">Actions</div>
  73. </div>
  74. <div class="table__body">
  75. {% for user in users %}
  76. <div class="table__row">
  77. <div class="table__col-narrow">{{ user.id }}</div>
  78. <div class="table__col-wide">{{ user.username }}</div>
  79. <div class="table__col-actions">
  80. <form action="/users/{{ user.id }}/update/" method="POST">
  81. <input type="submit" value="Update" />
  82. {% csrf_token %}
  83. </form>
  84. <form action="/users/{{ user.id }}/delete/" method="POST">
  85. <input type="submit" value="Delete" />
  86. {% csrf_token %}
  87. </form>
  88. </div>
  89. </div>
  90. {% endfor %}
  91. </div>
  92. </div>
  93. <br />
  94. <form method="POST" action="/users/">
  95. <input type="text" name="username" placeholder="username" class="form__input" required />
  96. <input type="submit" value="Create" class="form__submit" />
  97. {% csrf_token %}
  98. </form>
  99. <div class="form-error">
  100. {{ user_error }}
  101. </div>
  102. </div>
  103. <div class="block">
  104. <h2>Products:</h2>
  105. <div class="table">
  106. <div class="table__header">
  107. <div class="table__col-narrow">ID</div>
  108. <div class="table__col-wide">Type</div>
  109. <div class="table__col-wide">Name</div>
  110. <div class="table__col-wide">Actions</div>
  111. </div>
  112. <div class="table__body">
  113. {% for product in products %}
  114. <div class="table__row">
  115. <div class="table__col-narrow">{{ product.id }}</div>
  116. <div class="table__col-wide">{{ product.product_type.name }}</div>
  117. <div class="table__col-wide">{{ product.name }}</div>
  118. <div class="table__col-wide">
  119. <form action="/products/{{ product.id }}/delete/" method="POST">
  120. <input type="submit" value="Delete" />
  121. {% csrf_token %}
  122. </form>
  123. </div>
  124. </div>
  125. {% endfor %}
  126. </div>
  127. </div>
  128. <br />
  129. <form method="POST" action="/products/">
  130. <select class="form__select" name="product_type" required>
  131. <option value="" disabled selected>Select product type</option>
  132. {% for product_type in product_types %}
  133. <option value="{{ product_type.id }}">
  134. {{ product_type.id }} {{ product_type.name }}
  135. </option>
  136. {% endfor %}
  137. </select>
  138. <input type="text" name="name" placeholder="name" class="form__input" required />
  139. <input type="submit" value="Create" class="form__submit" />
  140. {% csrf_token %}
  141. </form>
  142. </div>
  143. <div class="block">
  144. <h2>User purchases:</h2>
  145. <div class="table">
  146. <div class="table__header">
  147. <div class="table__col-narrow">ID</div>
  148. <div class="table__col-narrow">User ID</div>
  149. <div class="table__col-wide">Product</div>
  150. <div class="table__col-wide">Time</div>
  151. <div class="table__col-wide">Actions</div>
  152. </div>
  153. <div class="table__body">
  154. {% for purchase in purchases %}
  155. <div class="table__row">
  156. <div class="table__col-narrow">{{ purchase.id }}</div>
  157. <div class="table__col-narrow">{{ purchase.user_id }}</div>
  158. <div class="table__col-wide">{{ purchase.product.name }}</div>
  159. <div class="table__col-wide">{{ purchase.action_time }}</div>
  160. <div class="table__col-wide">
  161. <form action="/purchases/{{ purchase.id }}/delete/" method="POST">
  162. <input type="submit" value="Delete" />
  163. {% csrf_token %}
  164. </form>
  165. </div>
  166. </div>
  167. {% endfor %}
  168. </div>
  169. </div>
  170. <br />
  171. <form method="POST" action="/purchases/">
  172. <select class="form__select" name="product" required>
  173. <option value="" disabled selected>Select product</option>
  174. {% for product in products %}
  175. <option value="{{ product.id }}">{{ product.id }} {{ product.name }}</option>
  176. {% endfor %}
  177. </select>
  178. <select class="form__select" name="user" required>
  179. <option value="" disabled selected>Select user</option>
  180. {% for user in users %}
  181. <option value="{{ user.id }}">{{ user.id }} {{ user.username }}</option>
  182. {% endfor %}
  183. </select>
  184. <input type="submit" value="Buy" class="form__submit" />
  185. {% csrf_token %}
  186. </form>
  187. <div class="form-error">
  188. {{ purchase_error }}
  189. </div>
  190. </div>
  191. </div>
  192. </body>
  193. </html>