<html> <head> <title>Master service</title> <style> html, body { color: #333; padding: 20px; } .block { flex-grow: 1; max-width: 100%; padding-right: 40px; } .container { display: flex; justify-content: space-between; max-width: 1200px; flex-wrap: wrap; } .table { padding: 20px; border: 1px solid #dadada; } .table__header, .table__row { display: flex; } .table__header { padding-bottom: 10px; font-weight: bold; } .form-error { color: #FF3333; } .table__col-narrow { width: 100px; } .table__col-wide { width: 200px; } .table__col-actions { width: 120px; display: flex; justify-content: space-between; } .table__col-narrow:last-child, .table__col-wide:last-child { width: auto; } .form__input { width: 200px; padding: 5px; } .form__submit { padding: 5px; } .form__select { padding: 5px; min-width: 200px; } </style> </head> <body> <h1>CQRS Demo: master service</h1> <div class="container"> <div class="block"> <h2>Users:</h2> <div class="table"> <div class="table__header"> <div class="table__col-narrow">ID</div> <div class="table__col-wide">Username</div> <div class="table__col-wide">Actions</div> </div> <div class="table__body"> {% for user in users %} <div class="table__row"> <div class="table__col-narrow">{{ user.id }}</div> <div class="table__col-wide">{{ user.username }}</div> <div class="table__col-actions"> <form action="/users/{{ user.id }}/update/" method="POST"> <input type="submit" value="Update" /> {% csrf_token %} </form> <form action="/users/{{ user.id }}/delete/" method="POST"> <input type="submit" value="Delete" /> {% csrf_token %} </form> </div> </div> {% endfor %} </div> </div> <br /> <form method="POST" action="/users/"> <input type="text" name="username" placeholder="username" class="form__input" required /> <input type="submit" value="Create" class="form__submit" /> {% csrf_token %} </form> <div class="form-error"> {{ user_error }} </div> </div> <div class="block"> <h2>Products:</h2> <div class="table"> <div class="table__header"> <div class="table__col-narrow">ID</div> <div class="table__col-wide">Type</div> <div class="table__col-wide">Name</div> <div class="table__col-wide">Actions</div> </div> <div class="table__body"> {% for product in products %} <div class="table__row"> <div class="table__col-narrow">{{ product.id }}</div> <div class="table__col-wide">{{ product.product_type.name }}</div> <div class="table__col-wide">{{ product.name }}</div> <div class="table__col-wide"> <form action="/products/{{ product.id }}/delete/" method="POST"> <input type="submit" value="Delete" /> {% csrf_token %} </form> </div> </div> {% endfor %} </div> </div> <br /> <form method="POST" action="/products/"> <select class="form__select" name="product_type" required> <option value="" disabled selected>Select product type</option> {% for product_type in product_types %} <option value="{{ product_type.id }}"> {{ product_type.id }} {{ product_type.name }} </option> {% endfor %} </select> <input type="text" name="name" placeholder="name" class="form__input" required /> <input type="submit" value="Create" class="form__submit" /> {% csrf_token %} </form> </div> <div class="block"> <h2>User purchases:</h2> <div class="table"> <div class="table__header"> <div class="table__col-narrow">ID</div> <div class="table__col-narrow">User ID</div> <div class="table__col-wide">Product</div> <div class="table__col-wide">Time</div> <div class="table__col-wide">Actions</div> </div> <div class="table__body"> {% for purchase in purchases %} <div class="table__row"> <div class="table__col-narrow">{{ purchase.id }}</div> <div class="table__col-narrow">{{ purchase.user_id }}</div> <div class="table__col-wide">{{ purchase.product.name }}</div> <div class="table__col-wide">{{ purchase.action_time }}</div> <div class="table__col-wide"> <form action="/purchases/{{ purchase.id }}/delete/" method="POST"> <input type="submit" value="Delete" /> {% csrf_token %} </form> </div> </div> {% endfor %} </div> </div> <br /> <form method="POST" action="/purchases/"> <select class="form__select" name="product" required> <option value="" disabled selected>Select product</option> {% for product in products %} <option value="{{ product.id }}">{{ product.id }} {{ product.name }}</option> {% endfor %} </select> <select class="form__select" name="user" required> <option value="" disabled selected>Select user</option> {% for user in users %} <option value="{{ user.id }}">{{ user.id }} {{ user.username }}</option> {% endfor %} </select> <input type="submit" value="Buy" class="form__submit" /> {% csrf_token %} </form> <div class="form-error"> {{ purchase_error }} </div> </div> </div> </body> </html>