main.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <html>
  2. <head>
  3. <title>Replica service</title>
  4. <style>
  5. html, body {
  6. color: #333;
  7. padding: 20px;
  8. }
  9. .table {
  10. padding: 20px;
  11. border: 1px solid #dadada;
  12. }
  13. .table__header,
  14. .table__row {
  15. display: flex;
  16. padding: 2px 0;
  17. }
  18. .table__header {
  19. padding-bottom: 10px;
  20. font-weight: bold;
  21. }
  22. .container {
  23. display: flex;
  24. justify-content: space-between;
  25. max-width: 1200px;
  26. flex-wrap: wrap;
  27. }
  28. .block {
  29. flex-grow: 1;
  30. max-width: 100%;
  31. padding-right: 40px;
  32. }
  33. .table__col-narrow {
  34. width: 100px;
  35. }
  36. .table__col-wide {
  37. width: 200px;
  38. }
  39. .table__col-narrow:last-child,
  40. .table__col-wide:last-child {
  41. width: auto;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <h1>CQRS Demo: replica service</h1>
  47. <div class="container">
  48. <div class="block">
  49. <h2>Users:</h2>
  50. <p>
  51. Model with default synchroniaztion mechanish
  52. </p>
  53. <div class="table">
  54. <div class="table__header">
  55. <div class="table__col-narrow">ID</div>
  56. <div class="table__col-wide">Username</div>
  57. </div>
  58. <div class="table__body">
  59. {% for user in users %}
  60. <div class="table__row">
  61. <div class="table__col-narrow">{{ user.id }}</div>
  62. <div class="table__col-wide">{{ user.username }}</div>
  63. </div>
  64. {% endfor %}
  65. </div>
  66. </div>
  67. </div>
  68. <div class="block">
  69. <h2>Products:</h2>
  70. <p>
  71. Model with custom serializer and relation control.
  72. </p>
  73. <div class="table">
  74. <div class="table__header">
  75. <div class="table__col-narrow">ID</div>
  76. <div class="table__col-wide">Type</div>
  77. <div class="table__col-wide">Name</div>
  78. </div>
  79. <div class="table__body">
  80. {% for product in products %}
  81. <div class="table__row">
  82. <div class="table__col-narrow">{{ product.id }}</div>
  83. <div class="table__col-wide">{{ product.product_type.name }}</div>
  84. <div class="table__col-wide">{{ product.name }}</div>
  85. </div>
  86. {% endfor %}
  87. </div>
  88. </div>
  89. </div>
  90. <div class="block">
  91. <h2>Purchases:</h2>
  92. <p>
  93. Custom storage (redis cache)
  94. </p>
  95. <div class="table">
  96. <div class="table__header">
  97. <div class="table__col-narrow">ID</div>
  98. <div class="table__col-narrow">User ID</div>
  99. <div class="table__col-wide">Product</div>
  100. <div class="table__col-wide">Time</div>
  101. </div>
  102. <div class="table__body">
  103. {% for purchase in purchases %}
  104. <div class="table__row">
  105. <div class="table__col-narrow">{{ purchase.id }}</div>
  106. <div class="table__col-narrow">{{ purchase.user_id }}</div>
  107. <div class="table__col-wide">{{ purchase.product_name }}</div>
  108. <div class="table__col-wide">{{ purchase.action_time }}</div>
  109. </div>
  110. {% endfor %}
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </body>
  116. </html>