# Assuming parse_time is already defined and works
class_start_time = parse_time(st.session_state.instructor_class_start)
class_end_time = parse_time(st.session_state.instructor_class_end)
class_attendance_time = parse_time(st.session_state.instructor_class_attendance)
# Format times as 'HH:MM' (24-hour format) for HTML input fields
class_start_formatted = class_start_time.strftime('%H:%M')
class_end_formatted = class_end_time.strftime('%H:%M')
class_attendance_formatted = class_attendance_time.strftime('%H:%M')
# Define the HTML with embedded JavaScript
html_code = f'''
<h1 style="text-align:center; font-size:32px; font-weight:bold; color:white;">DASHBOARD SYSTEM</h1>
<div style="float:right; background-color:rgb(146, 141, 141); border-radius: 30px; padding: 10px;">
<h4 for="cls-start" style='text-align:center; font-weight:900; color:white;'>CLASS SCHEDULE</h4>
<p style="text-align:center; margin-bottom:0px; font-size:11px; color:white;" for="cls-start">CLASS START</p>
<div id="cls-start" style="float: right; margin-bottom:10px;">
<input type="time" id="cls-start01" value="{class_start_formatted}" style="width:250px; border-radius: 10px;">
</div>
<p style="text-align:center; margin-bottom:0px; font-size:11px; color:white;" for="cls-end">CLASS END</p>
<div id="cls-end" style="float: right; margin-bottom:10px;">
<input type="time" id="cls-start02" value="{class_end_formatted}" style="width:250px; border-radius: 10px;">
</div>
<p style="text-align:center; margin-bottom:0px; font-size:11px; color:white;" for="cls-att-end">CLASS ATTENDANCE END</p>
<div id="cls-att-end" style="float: right; margin-bottom:10px;">
<input type="time" id="cls-start03" value="{class_attendance_formatted}" style="width:250px; border-radius: 10px;">
</div>
<div style="text-align:center; margin-top:20px;">
<button id="save-button" style="align-items:center; margin-top:10px;">SAVE</button>
</div>
</div>
<script>
let classStart = document.getElementById('cls-start01').value;
let classEnd = document.getElementById('cls-start02').value;
let attendanceEnd = document.getElementById('cls-start03').value;
var data = {{
action: 'save_class_schedule',
classStart: classStart,
classEnd: classEnd,
attendanceEnd: attendanceEnd,
insFname: 'Tony Stark'
}};
// Send the JSON object to the parent
window.parent.postMessage({{
type: 'streamlit:render',
key: 'stream_msg',
data: data
}}, '*');
</script>
'''
# Render HTML with JavaScript using Streamlit's component
components.html(html_code, height=400)
# Capture the data sent by JavaScript using Streamlit's JS eval function
data_received = streamlit_js_eval(
js_expressions=f"""
new Promise((resolve) => {{
console.log("👂 Listening for messages...");
window.addEventListener('message', (event) => {{
console.log("📥 Received Message:", event.data);
resolve(event.data); // Ensure data is resolved properly
}}, {{ once: true }});
}})
""",
key="stream_msg"
)
# Show the received data
st.write("🔍 Debug:", data_received)
Please help me get the data to my backend streamlit python; I’m newbie to this streamlit; I already search everywhere