trhgquan/app.py

## app.py
from flask import Flask, render_template

app = Flask(__name__)

orders = [
    {
        'order_id': 221,
        'items': [{'name': 'Noodle', 'quantity': 3},
                  {'name': 'coke', 'quantity': 2}],
        'table_num': 1
    },
    {
        'order_id': 222,
        'items': [{'name': 'Bingsu', 'quantity': 10},
                  {'name': 'Cola', 'quantity': 6}],
        'table_num': 1
    },
    {
        'order_id': 121,
        'items': [{'name': 'Noodle', 'quantity': 0},
                  {'name': 'coke', 'quantity': 1}],
        'table_num': 2
    },
    {
        'order_id': 234,
        'items': [{'name': 'Noodle', 'quantity': 10},
                  {'name': 'coke', 'quantity': 5}],
        'table_num': 3
    },
    {
        'order_id': 984,
        'items': [{'name': 'Noodle', 'quantity': 10},
                  {'name': 'coke', 'quantity': 5}],
        'table_num': 4
    },
    {
        'order_id': 701,
        'items': [{'name': 'Noodle', 'quantity': 10},
                  {'name': 'coke', 'quantity': 5}],
        'table_num': 5
    }
]

# I'm grouping orders by table_num, since it's the original request
tables = {}
for order in orders:
    if order["table_num"] not in tables:
        tables[order["table_num"]] = {
            "orders": [order],
        }
    else:
        tables[order["table_num"]]["orders"].append(order)

@app.route("/")
def index():
    # So now I'm just simply parsing tables into the frontend
    # Note that I'll not use Pandas either, only Python dicts and lists
    return render_template("main.html", tables = tables)

######################################################################################################################

if __name__ == "__main__":
    app.run(debug=True)

## main.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/*Create four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
height: 350px; /Should be removed. Only for demonstration/
}

.yellow {
  background-color: #FEFF86;
}

.blue {
  background-color: #B9E9FC;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>

<h2>Customer Order List</h2>
<div class="row">
  <!--
  You can access the table dictionary inside the Flask frontend, too
  -->
  {% for table_id, table in tables.items() %}
  <div class="column {{'yellow' if table_id % 2 == 1 else 'blue'}}">
    <h2>Table ID: {{ table_id }}</h2><br/>

    <!--
    For easy, I'm just gonna use a list instead of a table.
    You can try placing these into a Boostrap Table later.

    https://getbootstrap.com/docs/4.6/content/tables/
    -->
    {% for order in table["orders"] %}
      <p>Order ID: {{ order["order_id"] }}<p>
      <ul>
        {% for item in order["items"] %}
        <li>{{ item["name"] }} - quantity: {{ item["quantity"] }}</li>
        {% endfor %}
      </ul>

    {% endfor %}
  </div>
  {% endfor %}
</div>

</body>
</html>
	from flask import Flask, render_template

	app = Flask(__name__)

	orders = [
	{
	'order_id': 221,
	'items': [{'name': 'Noodle', 'quantity': 3},
	{'name': 'coke', 'quantity': 2}],
	'table_num': 1
	},
	{
	'order_id': 222,
	'items': [{'name': 'Bingsu', 'quantity': 10},
	{'name': 'Cola', 'quantity': 6}],
	'table_num': 1
	},
	{
	'order_id': 121,
	'items': [{'name': 'Noodle', 'quantity': 0},
	{'name': 'coke', 'quantity': 1}],
	'table_num': 2
	},
	{
	'order_id': 234,
	'items': [{'name': 'Noodle', 'quantity': 10},
	{'name': 'coke', 'quantity': 5}],
	'table_num': 3
	},
	{
	'order_id': 984,
	'items': [{'name': 'Noodle', 'quantity': 10},
	{'name': 'coke', 'quantity': 5}],
	'table_num': 4
	},
	{
	'order_id': 701,
	'items': [{'name': 'Noodle', 'quantity': 10},
	{'name': 'coke', 'quantity': 5}],
	'table_num': 5
	}
	]

	# I'm grouping orders by table_num, since it's the original request
	tables = {}
	for order in orders:
	if order["table_num"] not in tables:
	tables[order["table_num"]] = {
	"orders": [order],
	}
	else:
	tables[order["table_num"]]["orders"].append(order)

	@app.route("/")
	def index():
	# So now I'm just simply parsing tables into the frontend
	# Note that I'll not use Pandas either, only Python dicts and lists
	return render_template("main.html", tables = tables)

	######################################################################################################################

	if __name__ == "__main__":
	app.run(debug=True)
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	* {
	box-sizing: border-box;
	}

	/Create four equal columns that floats next to each other /
	.column {
	float: left;
	width: 20%;
	padding: 10px;
	height: 350px; /Should be removed. Only for demonstration/
	}

	.yellow {
	background-color: #FEFF86;
	}

	.blue {
	background-color: #B9E9FC;
	}

	/* Clear floats after the columns */
	.row:after {
	content: "";
	display: table;
	clear: both;
	}
	</style>
	</head>
	<body>

	<h2>Customer Order List</h2>
	<div class="row">
	<!--
	You can access the table dictionary inside the Flask frontend, too
	-->
	{% for table_id, table in tables.items() %}
	<div class="column {{'yellow' if table_id % 2 == 1 else 'blue'}}">
	<h2>Table ID: {{ table_id }}</h2><br/>

	<!--
	For easy, I'm just gonna use a list instead of a table.
	You can try placing these into a Boostrap Table later.

	https://getbootstrap.com/docs/4.6/content/tables/
	-->
	{% for order in table["orders"] %}
	<p>Order ID: {{ order["order_id"] }}<p>
	<ul>
	{% for item in order["items"] %}
	<li>{{ item["name"] }} - quantity: {{ item["quantity"] }}</li>
	{% endfor %}
	</ul>

	{% endfor %}
	</div>
	{% endfor %}
	</div>

	</body>
	</html>