| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 | <html>    <head>        <title>Replica service</title>        <style>            html, body {                color: #333;                padding: 20px;            }            .table {                padding: 20px;                border: 1px solid #dadada;            }            .table__header,            .table__row {                display: flex;                padding: 2px 0;            }            .table__header {                padding-bottom: 10px;                font-weight: bold;            }            .container {                display: flex;                justify-content: space-between;                max-width: 1200px;                flex-wrap: wrap;            }            .block {                flex-grow: 1;                max-width: 100%;                padding-right: 40px;            }            .table__col-narrow {                width: 100px;            }            .table__col-wide {                width: 200px;            }            .table__col-narrow:last-child,            .table__col-wide:last-child {                width: auto;            }        </style>    </head>    <body>        <h1>CQRS Demo: replica service</h1>        <div class="container">            <div class="block">                <h2>Users:</h2>                <p>                    Model with default synchroniaztion mechanish                </p>                <div class="table">                    <div class="table__header">                        <div class="table__col-narrow">ID</div>                        <div class="table__col-wide">Username</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>                        {% endfor %}                    </div>                </div>            </div>            <div class="block">                <h2>Products:</h2>                <p>                    Model with custom serializer and relation control.                </p>                <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>                    <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>                        {% endfor %}                    </div>                </div>            </div>            <div class="block">                <h2>Purchases:</h2>                <p>                    Custom storage (redis cache)                </p>                <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>                    <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>                        {% endfor %}                    </div>                </div>            </div>        </div>    </body></html>
 |