[Python] How do i create a movie booking feature to add movies to a section then can remove...

For my assignment, I need to create a feature where people can add different movies to a booking section (the browser does not need to store the information in the system, just visually). For this, we are only allowed to use Brython, HTML, CSS, and Vue (specifically Vue2)(no JavaScript is allowed). I am not sure how exactly to write this code. I thought about using a toggle function on submit (form onsubmit), but I don't know how this could work, as each movie has different showing times. The form might work best if the radio options have a Vue function, when the radio options are pressed, this can create can show the booking under the manage movie booking section

For the User experience, I am trying to make it so that when the user clicks submit on a preferred movie session, it would be added to the manage booking session. Here, under the watch later section, if the user decides to change their mind, they can click remove to remove the movie from this watch later section.

Below is some of the code I've created. Thanks for any help. What would be the best way to tackle this code?

<!doctype HTML>
<html>

<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="lib/style.css" />
<script src="https://unpkg.com/vue@2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/brython@3/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brython@3/brython_stdlib.js"></script>
</head>

<body onload="brython(1)">

<h2>Movie 1</h2>
<form @submit.prevent="bookSession">
<h4>Available Sessions:</h4>
<div id="times">
<label v-model="booking">
Monday - 3:45 PM - <br>
<input type="radio" v-model="selectedSession" value="Mon-3:45pm">
</label><br>

<label v-model="booking">
Thursday - 5:15 PM - <br>
<input type="radio" v-model="selectedSession" value="Thu-6:15pm">
</label><br>

<label v-model="booking">Friday - 8:30 PM - <br>
<input type="radio" v-model="selectedSession" value="Fri-8:30pm">
</label><br>
</div>

<div id="moviebuttons">
<button type="submit" id="booksubmit">Book Now</button>
<button type="reset" id="bookreset">Reset</button>
</div>
</form>

<h2>Movie 2</h2>
<form @submit.prevent="bookSession">
<h4>Available Sessions:</h4>
<div id="times">
<label v-model="booking">
Monday - 3:45 PM - <br>
<input type="radio" v-model="selectedSession" value="Mon-3:45pm">
</label><br>

<label v-model="booking">
Thursday - 5:15 PM - <br>
<input type="radio" v-model="selectedSession" value="Thu-6:15pm">
</label><br>

<label v-model="booking">Friday - 8:30 PM - <br>
<input type="radio" v-model="selectedSession" value="Fri-8:30pm">
</label><br>
</div>

<div id="moviebuttons">
<button type="submit" id="booksubmit">Book Now</button>
<button type="reset" id="bookreset">Reset</button>
</div>
</form>

<h2>Movie 3</h2>
<form @submit.prevent="bookSession">
<h4>Available Sessions:</h4>
<div id="times">
<label v-model="booking">
Monday - 3:45 PM - <br>
<input type="radio" v-model="selectedSession" value="Mon-3:45pm">
</label><br>

<label v-model="booking">
Thursday - 5:15 PM - <br>
<input type="radio" v-model="selectedSession" value="Thu-6:15pm">
</label><br>

<label v-model="booking">Friday - 8:30 PM - <br>
<input type="radio" v-model="selectedSession" value="Fri-8:30pm">
</label><br>
</div>

<div id="moviebuttons">
<button type="submit" id="booksubmit">Book Now</button>
<button type="reset" id="bookreset">Reset</button>
</div>
</form>


<div id="manage">
<h2>Manage Bookings:</h2>
<div id="manage-bookings">
<table>
<tr>
<th>Booking ID</th>
<th>Member Name</th>
<th>Movie</th>
<th>Session</th>
<th>Action</th>
</tr>
<tr v-for="booking">
<th>{{ bookid }}</th>
<th>{{ name }}</th>
<th>{{ movie-title }}</th>
<th>{{ booking }}</th>
<th>
<button type="remove" id="remove">Remove</button></th>
</tr>
</table>
</div>
</div>

<script type="text/python">
from browser import window

app = window.Vue.new({
'el': '#app',
'data': {
'managebooking': []
},
</script>

</body>
</html>

Continue reading...