def radio_test():
wp = jp.WebPage()
genders = ["male", "female", "other"]
ages = [(0, 30), (31, 60), (61, 100)]
outer_div = jp.Div(classes="border m-2 p-2 w-64", a=wp)
# Create div to show radio button selection but don't add yet to page. It will be added at the end
# It is created here so that it could be assigned to the radio button attribute result_div
result_div = jp.Div(
text="Click radio buttons to see results here", classes="m-2 p-2 text-xl"
)
jp.P(a=outer_div, text="Please select your gender:")
gender_list = []
for gender in genders:
label = jp.Label(classes="inline-block mg-1 p-1", a=outer_div)
radio_btn = jp.Input(
type="radio",
name="gender",
value=gender,
a=label,
btn_list=gender_list,
result_div=result_div,
change=radio_changed,
)
gender_list.append(radio_btn)
jp.Span(classes="ml-1", a=label, text=gender.capitalize())
jp.Div(a=outer_div, classes="m-2") # Add spacing and line break
jp.P(a=outer_div, text="Please select your age:")
age_list = []
for age in ages:
label = jp.Label(classes="inline-block mb-1 p-1", a=outer_div)
radio_btn = jp.Input(
type="radio",
name="age",
value=age[0],
a=label,
btn_list=age_list,
result_div=result_div,
change=radio_changed,
)
age_list.append(radio_btn)
jp.Span(classes="ml-1", a=label, text=f"{age[0]} - {age[1]}")
jp.Br(a=outer_div)
wp.add(result_div)
return wp
def check_test():
wp = jp.WebPage(data={'checked': True})
label = jp.Label(a=wp, classes='m-2 p-2 inline-block')
c = jp.Input(type='checkbox', classes='m-2 p-2 form-checkbox', a=label, model=[wp, 'checked'])
caption = jp.Span(text='Click to get stuff', a=label)
in1 = jp.Input(model=[wp, 'checked'], a=wp, classes='border block m-2 p-2')
return wp
def form_test():
wp = jp.WebPage()
wp.display_url = '/fill_form'
form1 = jp.Form(a=wp, classes='border m-1 p-1 w-64')
user_label = jp.Label(
text='User Name',
classes=
'block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2',
a=form1)
in1 = jp.Input(placeholder='User Name', a=form1, classes='form-input')
user_label.for_component = in1
password_label = jp.Label(
classes=
'block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2',
a=form1)
jp.Div(
text='Password',
classes=
'block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2',
a=password_label)
jp.Input(placeholder='Password',
a=password_label,
classes='form-input',
type='password')
check_label = jp.Label(classes='text-sm block', a=form1)
jp.Input(type='checkbox',
a=check_label,
classes='form-checkbox text-blue-500')
jp.Span(text='Send me stuff', a=check_label, classes='ml-2')
submit_button = jp.Input(value='Submit Form',
type='submit',
a=form1,
classes=button_classes)
def submit_form(self, msg):
print(msg)
msg.page.redirect = '/form_submitted'
session_data[msg.session_id] = msg.form_data
form1.on('submit', submit_form)
return wp
def focus_test():
wp = jp.WebPage()
d = jp.Div(classes = 'flex flex-col m-2', a=wp, style='width: 600 px')
input_list = []
number_of_fields = 5
for i in range(1, number_of_fields + 1):
label = jp.Label(a=d, classes = 'm-2 p-2')
jp.Span(text=f'Field {i}', a=label)
in1 = jp.Input(classes = jp.Styles.input_classes, placeholder=f'{i} Type here', a=label, keydown=key_down, spellcheck='false')
in1.on('blur', my_blur)
in1.input_list = input_list
in1.num = i-1
input_list.append(in1)
print(input_list)
return wp
async def text_confirm(request):
sid = request.session_id
sesspath = "/static/"+sid
file_list = session_data[sid]
texts = [tf.loadtext(f'{sesspath}/{f}',sesspath) for f in file_list]
tc = jp.WebPage()
tc += title
jp.P(text="For each file, pick a version to turn into speech", classes=subtitle_style)
form = jp.Form(a=tc,classes='border m-1 p-1 w-64')
labels = [[] for txt in texts]
for textz,f,ls in zip(texts,file_list,labels):
ts = jp.Div(text=f,a=form,classes="grid grid-flow-col auto-cols-max md:auto-cols-min")
for txt in textz:
if txt is not None:
l = jp.Label(a=ts,classes=input_class)
jp.P(text=txt,a=l,classes=p_class)
jp.Input(a=l,type='radio')
ls += l
confirm_button = jp.Input(value='Confirm', type='submit',a=form,classes='border m-2 p-2')
def confirm(self,msg):
print(msg)
form.on('submit',confirm)
def photo_browser():
all_container_classes = 'm-1 p-4'
small_img_container_classes = 'm-1 p-1 bg-gray-700'
default_combobox_classes = 'block bg-gray-200 border border-gray-200 text-gray-700 ' \
'py-3 px-4 pr-8 rounded leading-tight focus:outline-none ' \
'focus:bg-white focus:border-gray-500 w-full'
settings_button_classes = 'm-2 p-2'
dropdown_menu_classes = 'm-2 p-2 bg-gray-400'
settings_div_classes = 'w-full'
input_classes = "bg-gray-200 border border-gray-200 rounded py-3 px-4 pr-8 text-gray-700 " \
"focus:outline-none focus:bg-white focus:border-purple-500 w-full"
main_container_style = 'position: absolute; top: 500px; width: 100%; margin: 0;'
images_container_style = 'display:flex; justify-content:center; flex-wrap: wrap;'
main_img_style = 'width: 800px; display: block; margin-left: auto; margin-right: auto;' \
'z-index: 2; left: 0; right: 0; margin: 2% auto;'
small_img_style = 'width: 200px;'
settings_button_style = 'position: absolute;'
dropdown_menu_style = 'position: absolute; top: 55px; z-index: 3;'
settings_div_style = 'position: absolute;'
def small_container_mouseenter(self, msg):
msg.page.main_img.src = self.child.src
self.child.style += ' transform: scale(.85);'
def small_container_mouseleave(self, msg):
if not isinstance(self.child, jp.P):
self.child.style = small_img_style
else:
self.child.style = ''
msg.page.main_img.src = msg.page.main_img_src
def select_default_img(self, msg):
msg.page.main_img_src = self.child.src
for img_cont in msg.page.all_image_containers:
img_cont.set_class('bg-gray-700')
self.set_class('bg-red-700')
def change_images(self, msg):
msg.page.images_container.delete_components()
msg.page.small_images = glob(self.value + '*.*')
msg.page.small_images = natsorted(msg.page.small_images)
msg.page.main_img.src = 'static/' + msg.page.small_images[0]
msg.page.main_img_src = msg.page.main_img.src
msg.page.other_settings_container.show = True
if msg.page.small_images_content_display_combobox.value == "text":
if msg.page.pattern_recognize_checkbox.checked and msg.page.pattern_recognize_input.value:
load_images(mode=2, pattern=msg.page.pattern_recognize_input.value)
else:
load_images(mode=2)
else:
load_images()
if msg.page.main_img_position_checkbox.checked:
msg.page.main_img.style = main_img_style
msg.page.main_img.style += ' position: fixed;'
def toggle_show(self, msg):
self.dropdown_menu.show = not self.dropdown_menu.show
def set_main_img_position(self, msg):
msg.page.main_img.style = main_img_style
if self.checked:
msg.page.main_img.style += ' position: fixed;'
else:
msg.page.main_img.style += ' position: absolute;'
def change_small_images_content_display(self, msg):
msg.page.images_container.delete_components()
if self.value == "photo":
load_images(mode=1)
elif self.value == "text":
load_images(mode=2)
def set_pattern_recognize(self, msg):
msg.page.pattern_recognize_input.show = not msg.page.pattern_recognize_input.show
msg.page.pattern_refresh_button.show = not msg.page.pattern_refresh_button.show
msg.page.pattern_recognize_input.value = ''
pattern_refresh(self, msg)
def pattern_refresh(self, msg):
msg.page.images_container.delete_components()
if wp.small_images_content_display_combobox.value == "text":
load_images(mode=2, pattern=msg.page.pattern_recognize_input.value)
else:
load_images(mode=1)
wp = jp.WebPage()
wp.body_classes = 'bg-gray-600'
small_images_folders = glob('photos/*/')
try:
wp.small_images = glob(small_images_folders[0] + '*.*')
wp.small_images = natsorted(wp.small_images)
main_img_src = 'static/' + wp.small_images[0]
except IndexError:
jp.P(text='Directory photos/ is empty', a=wp, classes='text-5xl m-2 p-2')
return wp
main_img = jp.Img(src='', a=wp, style=main_img_style)
main_img.show = False
main_container = jp.Div(a=wp, style=main_container_style)
settings_div = jp.Div(a=wp, style=settings_div_style, classes=settings_div_classes)
dropdown_menu = jp.Div(a=settings_div, classes=dropdown_menu_classes, style=dropdown_menu_style)
images_dir_location_combobox_container = jp.Div(a=dropdown_menu)
jp.Label(a=images_dir_location_combobox_container, text='Dir for image src*')
images_dir_location_combobox = jp.Select(a=images_dir_location_combobox_container, classes=default_combobox_classes)
other_settings_container = jp.Div(a=dropdown_menu)
other_settings_container.show = False
jp.Label(a=other_settings_container, text='Main img pos fixed?')
main_img_position_checkbox = jp.Input(a=other_settings_container, type='checkbox', classes='m-1 form-checkbox')
main_img_position_checkbox.on("change", set_main_img_position)
jp.Br(a=other_settings_container)
jp.Label(a=other_settings_container, text='Small images content display')
small_images_content_display_combobox = jp.Select(a=other_settings_container, classes=default_combobox_classes)
jp.Option(a=small_images_content_display_combobox, value="photo", text='Photo')
jp.Option(a=small_images_content_display_combobox, value="text", text='Image name')
small_images_content_display_combobox.on('change', change_small_images_content_display)
small_images_content_display_combobox.value = "photo"
jp.Label(a=other_settings_container, text="Pattern recognize?")
pattern_recognize_checkbox = jp.Input(a=other_settings_container, type='checkbox', classes='m-1 form-checkbox')
pattern_recognize_checkbox.on("change", set_pattern_recognize)
pattern_refresh_button = jp.Button(a=other_settings_container)
jp.I(a=pattern_refresh_button, classes='fas fa-sync')
pattern_refresh_button.on('click', pattern_refresh)
pattern_refresh_button.show = False
jp.Br(a=other_settings_container)
pattern_recognize_input = jp.Input(a=other_settings_container, classes=input_classes, placeholder='Type pattern '
'here')
pattern_recognize_input.show = False
pattern_refresh_button.pattern_recognize_input = pattern_recognize_input
settings_button = jp.Button(a=settings_div, classes=settings_button_classes, style=settings_button_style)
settings_button.dropdown_menu = dropdown_menu
jp.I(a=settings_button, classes='fas fa-cogs fa-2x')
settings_button.on('click', toggle_show)
for image_folder in small_images_folders:
jp.Option(value=image_folder, text=image_folder, a=images_dir_location_combobox)
images_dir_location_combobox.on('change', change_images)
images_container = jp.Div(a=main_container, classes='m-1', style=images_container_style)
wp.main_img = main_img
wp.main_img_src = main_img_src
wp.images_container = images_container
wp.pattern_recognize_input = pattern_recognize_input
wp.pattern_refresh_button = pattern_refresh_button
wp.small_images_content_display_combobox = small_images_content_display_combobox
wp.pattern_recognize_checkbox = pattern_recognize_checkbox
wp.main_img_position_checkbox = main_img_position_checkbox
wp.other_settings_container = other_settings_container
def load_images(mode=1, pattern=''):
wp.all_image_containers = []
small_img = ''
for i in range(len(wp.small_images)):
small_img_container = jp.Div(a=images_container, classes=small_img_container_classes,
click=select_default_img, mouseenter=small_container_mouseenter,
mouseleave=small_container_mouseleave, )
if mode == 1:
small_img = jp.Img(src=f'/static/{wp.small_images[i]}', a=small_img_container, style=small_img_style, )
elif mode == 2:
if pattern:
filename_text = basename(wp.small_images[i]).replace(pattern, '')
filename_text = filename_text.replace(filename_text[filename_text.find('.'):], '')
small_img = jp.P(src=f'/static/{wp.small_images[i]}', a=small_img_container,
text=filename_text)
else:
small_img = jp.P(src=f'/static/{wp.small_images[i]}', a=small_img_container,
text=basename(wp.small_images[i]))
small_img_container.child = small_img
wp.all_image_containers.append(small_img_container)
wp.main_img.style = main_img_style
wp.main_img.style += 'position: absolute;'
wp.all_image_containers[0].set_class('bg-red-700')
main_img.show = True
# load_images() # uncomment it if you want to image load automatically
return wp
result_display = jp.Div(
name='result_display', classes='font-bold '
) # 'flex-col m-2 flex-shrink-0 align-top inline-block text-align-right flex-row'
espacios = jp.Space(num=3)
## input elements
fee_inbox = jp.Input(
name="fee_in",
type='number',
title=
'Indique el costo por jornada acordado en el convernio colectivo o en el contrato\nNo utilizar decimales ni fracciones!',
placeholder='honorarios',
tabindex=1,
classes=inbox_style,
delete_flag=False) #
fee_label = jp.Label(text='Valor de la jornada regular =',
classes=label_item_clas)
factor_mult_extras_inbox = jp.Input(
type='number',
title='porcentaje de incremento por hora extra.\nUsualmente es 50%',
value=50,
tabindex=2,
classes=inbox_style,
delete_flag=False)
factor_mult_extras_label = jp.Label(text='Porcentaje por hora extra =',
classes=label_item_clas)
start_workday_label = jp.Label(text='Inicio del trabajo =',
classes=label_item_clas)
end_workday_label = jp.Label(text='Final del trabajo =',
classes=label_item_clas)
start_workday_inbox = jp.Input(name='start_work',
type='datetime-local',