def app_information():
return html.Div(
[
dbc.Button("About us", id="open-modal-btn-in-about-us-modal"),
dbc.Modal(
[
dbc.ModalHeader("About us"),
dbc.ModalBody([
html.P(
["Cora is an applicaiton program that can quantify the soil cover by processing/analyzing an image input from the user. The appliation can quantify the soil cover on the basis of soil,residue and canopy. ",
html.Br(),html.Br(),
"Soil residues are stems and stalks that remain on soil from previous crops. Residue cover is utilized in farming techniques such as no-till farming. This farming technique uses residue as a cover to the soil layer. It acts as a barrier to the soil by deflecting energy from the raindrops that can wash away the soil particles and the nutrients in the soil. It also reduce the soil erosion and preserve water level drying out from sun.",
html.Br(),html.Br(),
"Identify the residue cover in the soil has higher importance. There percentages of soil cover that maintain throughout farming process. Moreover it also useful research purposes.",
html.Br(),html.Br(),
"Technology improvement world has have major impact in many fields. We uses a latest computer models to analyse the image data. Our effort is to minimize and save the time and energy in calculating soil cover. "
"Hope this app will make your life easier.",
html.Br(),html.Br(),
#"References",
html.Br(),html.Br(),
]),
]
),
dbc.ModalFooter(
dbc.Button("Close", id="close-modal-btn-in-about-us-modal", className="ml-auto")
),
],
id="modal_about_us",
),
]
)
def get_input():
inputFeed = html.Div(children=[
dbc.Input(id='username',
placeholder='Enter feedback here!',
bs_size="lg",
type='text'),
html.Br(),
dbc.Button(id='submit-button',
children='Submit',
style={
'text-align': 'center',
'width': '460px'
}),
html.Div(id='output_div')
],
style={'width': '460px'})
modal = html.Div(children=[
dbc.Button("Give us feedback!", id="open"),
dbc.Modal(
[
dbc.ModalHeader("Enter your feedback down below!"),
dbc.ModalBody(inputFeed),
dbc.ModalFooter(
dbc.Button("Close", id="close", className="ml-auto")),
],
id="modal",
),
],
style={'width': '150px'})
return modal
def layout(self):
return html.Div(
[
dbc.Button(self.button_text, id=self.name+'modal-open', size=self.button_size, outline=self.button_outline),
dbc.Modal([
dbc.ModalHeader(self.title),
dcc.Graph(id=self.name+'-modal-graph', style={"max-height": "none", "height": "80%"}),
dbc.ModalFooter([
html.Div([
html.Div([
html.Div([
dbc.Button(html.Small("Description"),
id=self.name+'-show-description',
color='link', className="text-muted ml-auto"),
dbc.Fade([
html.Small(self.description, className="text-muted")],
id=self.name+'-fade',
is_in=True,
appear=True),
], style=dict(display="none" if not self.description else None))
], className="text-left"),
html.Div([
dbc.Button("Close", id=self.name+'-modal-close', className="mr-auto")
], className="text-right", style=dict(float='right')),
], style={"display":"flex"}),
], className="justify-content-between")
], id=self.name+'-modal', style={"max-width": "none", "width": "80%"})
], style={"display":"flex", "justify-content":"flex-end"})
def update_figure(article_type):
print(article_type)
title = 'Today\'s Top News Articles in {x}'.format(
x=article_type.capitalize())
df = dfs[index_conversion[article_type]]
#info = df.iloc[0]
#hret=c['url']
# add a button
# create a pattern matched button
# give each button a id that's a dictionary
html_lines = []
modal_content = []
for i, c in enumerate(df.iloc):
#index = i+index_conversion[article_type]
index = i
#modal_type = 'modal-' + str(article_type)
button_id = {'type': 'button-preview', 'index': index}
modal_id = {'type': 'modal-popup', 'index': index}
#modal_id = {'type': modal_type, 'index': index}
close_id = {'type': 'modal-close', 'index': index}
description = c['description']
if isinstance(description, float):
description = 'No preview available'
line = html.Div([
html.A(html.P(c['title']), href=c['url'], target='_blank'),
html.Button('Preview', id=button_id, n_clicks=0)
],
id='article-container')
html_lines.append(html.A(line))
source = 'Source: ' + str(c['source_name'])
modal = dbc.Modal([
dbc.ModalHeader(html.H1(c['title'])),
dbc.ModalBody(
[html.H3(description), html.H3(source)], id='modal-content'),
dbc.ModalFooter(children=[
html.
A(html.H4('Link to article'), href=c['url'], target='_blank'),
dbc.Button(
"Close", id=close_id, className="ml-auto", n_clicks=0)
]),
],
id=modal_id,
size="lg",
is_open=False)
#modal.
modal_content.append(modal)
article_html = html.Div(html_lines)
#article_html = html.Div([html.A(html.P(c['title']), href=c['url'], target='_blank') for c in df.iloc],[])
#article_html = html.Div([html.A(html.P(children=info['title']), id="preview-link")])
return [article_html, title, modal_content]
def get(id):
table_content = html.Div(
[
dt.DataTable(
id = id + '-data-table',
data = [{}],
)
],
className = 'data-table-container',
id = id + '-table-container',
)
modal = html.Div([
dbc.Modal(
[
dbc.ModalHeader(
dbc.Button("Close", id=id + "-table-close", className="ml-auto")
),
dbc.ModalBody(table_content),
],
id= id + "-table-modal",
size = 'lg',
scrollable = True,
backdrop='static',
is_open = True # This ensures that the table will render (will close modal on page loading)
),
])
return modal
def get_uninstall(product):
return dbc.FormGroup([
dbc.Col([
dbc.Button(
'Uninstall', color='danger', id=f'uninstall-image-{product}'),
html.Span('',
id=f'span-uninstall-{product}',
className='align-middle',
style={'color': 'red'}),
dbc.Modal(
[
dbc.ModalHeader('Uninstall'),
dbc.ModalBody(
'Are you sure you want to uninstall an image?'),
dbc.ModalFooter([
dbc.Button(
'OK', color='danger', id=f'ok-uninstall-{product}'),
dbc.Button('Cancel', id=f'cancel-uninstall-{product}')
]),
],
id=f'modal-uninstall-{product}',
centered=True,
),
],
width=1),
dcc.Loading(type='circle',
children=html.Div(id=f'loading-uninstall-{product}')),
dbc.Label(
'Remove the Docker image and mark the product as uninstalled.',
html_for=f'uninstall-image-{product}',
width=11),
],
row=True,
style=NONE,
id=f'uninstall-{product}')
def well_points_tab_layout(self) -> html.Div:
return html.Div([
dbc.Button("Table Settings",
id=self.ids("button-open-table-settings")),
dbc.Modal(
children=[
dbc.ModalHeader("Table Settings"),
dbc.ModalBody(children=[
html.Label(
style={
"font-weight": "bold",
"textAlign": "Left",
},
children="Select Table Columns",
),
dcc.Checklist(
id=self.ids("columns-checklist"),
options=[{
"label": name,
"value": column_name
} for name, column_name in zip(
self.df_well_target_points.get_wellpoints_df().
keys().values,
self.df_well_target_points.get_wellpoints_df(
).keys().values,
)],
value=[
"Surface",
"Well",
"TVD",
"MD",
"Outlier",
"Deleted",
"Residual",
],
persistence=True,
persistence_type="session",
),
], ),
dbc.ModalFooter(children=[
dbc.Button(
"Close",
id=self.ids("button-close-table-settings"),
className="ml-auto",
),
dbc.Button(
"Apply",
id=self.ids("button-apply-columnlist"),
className="ml-auto",
),
]),
],
id=self.ids("modal-table-settings"),
size="sm",
centered=True,
backdrop=False,
fade=False,
),
html.Div(id=self.ids("well-points-table-container")),
])
def get_sidebar_layout():
return dbc.Container(
[
dbc.Modal(
[
dbc.ModalHeader("St Louis DSA Open Data Project"),
dbc.ModalBody([
html.P([
"On ",
html.B("March 2,"),
"""
St Louis City will have primary elections for a number of municipal offices,
including mayor, comptroller, and more than half of the Board of Alders.
""",
]),
html.P([
html.A(
"St Louis DSA",
href="https://stldsa.org",
style={
"color": "red",
"font": "Roboto",
"textDecoration": "underline",
},
),
"""
is proud to provide this tool to the voters of St Louis.
You can use the options below to view campaign contributions for candidates
in the upcoming municipal elections. We hope that in democratizing access to
this information, voters will be best able to decide who they would like to represent them.
""",
]),
html.P(
html.
I("St Louis DSA has endorsed Megan Green for 15th Ward Alderperson."
), ),
], ),
dbc.ModalFooter(
dbc.Button("Close", id="close", className="ml-auto")),
],
id="modal",
is_open=True,
size="lg",
style={
"padding": "20px",
"fontSize": "1em",
"lineHeight": "1.2em"
},
),
dbc.Row(
[
dbc.Col(get_side_panel_layout(), md=5, lg=4),
dbc.Col(mapping.get_map_panel_layout(), md=7, lg=8),
],
no_gutters=True,
),
],
fluid=True,
className="remove-padding",
)
def bundle_modal_bundles():
return html.Div([
dbc.Button(
'Edit Bundles',
id='bundle-button-openmodal',
style={
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.6rem",
"width": "8rem"
},
),
dbc.Modal([
dbc.ModalHeader(html.H2('Bundles', style={"font-size": "2rem"}), ),
dbc.ModalBody(bundle_modal_bundles_body()),
dbc.ModalFooter(dbc.Button('Submit',
id='bundle-button-closemodal'))
],
id='bundle-modal-bundles',
size='xl',
backdrop='static')
],
style={"padding": "1rem"})
def generate_graph_component(name, titel=''):
"""
Generates html code for a graph, including expand button and expand modal
:param name:
:param title:
:return:
"""
graph_html = [
dcc.Graph(id=name, config={'displayModeBar': False}),
dbc.Modal(
[
dbc.ModalHeader(titel, style={'margin': '0'}),
dbc.ModalBody([
dcc.Graph(id=f'expanded_{name}',
config={'displayModeBar': False},
style={'height': '75vh'}),
html.Img(src='assets/images/config.png',
id=f'config_{name}',
className='config-graph')
]),
# dbc.ModalFooter(),
],
id=f'modal_expanded_{name}',
centered=True,
style={
"max-width": "none",
"width": "90%"
}),
]
return graph_html
def modal_self_recording_review(app):
return html.Div([
html.H6("Review", style={
"font-size": "0.7rem",
"padding-top": "10px"
}),
dbc.Button(children=[
html.Img(src=app.get_asset_url("icon-laptop-play-video-100.png"),
style={
"height": "1.5rem",
"padding-top": "0px"
})
],
color="light",
style={"border-radius": "10rem"},
id='video-modal-review-button-open'),
dbc.Modal([
dbc.ModalHeader(id="video-modal-review-header"),
dbc.ModalBody(id="video-modal-review-body"),
dbc.ModalFooter(
dbc.Button("close",
id="video-modal-review-button-submit",
className="mr-2"), )
],
id="modal-selfrecording-review",
size='xl',
backdrop="static")
],
style={"text-align": "center"})
def render():
return dbc.Modal(
[
dbc.ModalHeader([
html.H4("Deader", id=MODAL_HEADER_ID),
dbc.Button("CITY", id=OPEN_CITY_EVENT_MODAL),
dbc.Button("ROAD", id=OPEN_ROAD_EVENT_MODAL)
]),
dbc.ModalBody("This is the content of the modal",
id=MODAL_BODY_ID),
dbc.ModalFooter([
dbc.Button("Close", id=CLOSE_MODAL_ID, color="info"),
html.Div([
dbc.Button("Fail",
id=FAIL_SCENARIO_ID, color="danger"),
dbc.Button(DEFAULT_PROGRESS_TEXT % 1, id=PROGRESS_SCENARIO_ID,
color="secondary"),
dbc.Button("Complete",
id=COMPLETE_SCENARIO_ID, color="success")
])],
className="d-flex justify-content-between",
id=MODAL_FOOTER_ID
),
],
id=MODAL_ID,
size="lg",
# centered=True,
)
def manager_modal_alldrivers(app):
return html.Div([
dbc.Button(
"See All Drivers",
id='manager-button-openmodal-alldriver',
style={
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.6rem"
},
),
dbc.Modal([
dbc.ModalHeader("All Drivers"),
dbc.ModalBody(
children=html.Div(["contents"], style={"padding": "1rem"})),
dbc.ModalFooter(
dbc.Button(
"Close",
id='manager-button-closemodal-alldriver',
style={
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.8rem"
},
))
],
id='manager-modal-alldriver',
size="lg",
backdrop='static')
], )
def modal_kccq_questionaire_answer(app):
return html.Div([
html.H6("Review", style={
"font-size": "0.7rem",
"padding-top": "10px"
}),
dbc.Button(children=[
html.Img(src=app.get_asset_url("icon-inspection-100.png"),
style={
"height": "1.5rem",
"padding-top": "0px"
})
],
color="light",
style={"border-radius": "10rem"},
id='kccq-modal-answer-button-open'),
dbc.Modal([
dbc.ModalHeader(id="kccq-modal-answer-header"),
dbc.ModalBody(modal_kccq_questionaire_body_answer(),
style={
"padding": "40px",
"margin-top": "-20px"
}),
dbc.ModalFooter(dbc.Button("Close",
id="kccq-modal-answer-button-submit",
className="mr-2",
style={"width": "160px"}),
style={"padding-right": "42%"})
],
id="kccq-modal-answer",
size='xl',
backdrop="static")
],
style={"text-align": "center"})
def render_modal(button_clicked, df):
print(df)
if df is None or button_clicked is None:
bucket_id = "TEST"
else:
bucket_id = df['bucket id'][button_clicked]
return [
dbc.ModalHeader(f"Merge '{bucket_id}'"),
dbc.ModalBody([
dbc.Row([
dbc.Col(
dbc.FormGroup([
dbc.Label("Old Bucket ID"),
dbc.Input(type="text", disabled=True, value=bucket_id)
])),
dbc.Col(
dbc.FormGroup([
dbc.Label("Merge Into"), new_bucket_id,
dbc.FormText(
"Press Enter to validate that this is a Bucket ID."
)
]))
])
]), modal_footer, state, database_update
]
def manager_modal_bundle_performance_details(app):
return html.Div([
dbc.Button(
"Result Details",
id = 'manager-button-openmodal-bundle-performance-details',
className="mb-3",
style={"background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Regular", "font-size":"0.6rem"},
),
dbc.Modal([
dbc.ModalHeader(
[
html.H1("Result Details", style={"font-size":"0.8rem"}),
html.H2("TOTAL COST", style={"font-size":"1.6rem","color":"#1357DD","background-color":"#c6d9ff","padding":"0.5rem","border-radius":"0.5rem"})
],
),
dbc.ModalBody([
html.Div('Bundle Total'),
table_bundle_dtls(df_bundle_performance_details),
html.Div('Bundle Average'),
table_bundle_dtls(df_bundle_performance_details_pmpm),
], style={"padding":"2rem"}),
dbc.ModalFooter(dbc.Button('Close', style={"border-radius":"10rem"}, id = 'manager-button-closemodal-bundle-performance-details')),
], id = 'manager-modal-bundle-performance-details'),
])
def layer_selection_intro():
return html.Div(children=[
html.Div([
html.Div(children=[
html.P('Main Visualization Map',
className="title-with-helper"),
html.A(className="far fa-question-circle helper-icon",
id="layer-helper"),
],
className="title"),
dbc.Modal(
[
dbc.ModalHeader("Introduction to the Visualization Types"),
dbc.ModalBody(
dcc.Markdown(texts.layer_selection_helper_text)),
dbc.ModalFooter(
dbc.Button("Close",
id="layer-helper-close",
className="ml-auto")),
],
id="layer-helper-modal",
centered=True,
),
html.Div(dcc.Markdown(texts.layer_selection_intro_text)),
],
id="layer-help")
],
className="layer-selection-intro")
def card_key_driver_drilldown_crhr(app):
return dbc.Card(
dbc.CardBody(
[
dbc.Row(
[
dbc.Col(html.Img(src=app.get_asset_url("bullet-round-blue.png"), width="10px"), width="auto", align="start", style={"margin-top":"-4px"}),
dbc.Col(html.H4("Key Drivers", style={"font-size":"1rem", "margin-left":"10px"}), width=8),
dbc.Col([dbc.Button("See All Drivers", id = 'button-all-driver-crhr',
style={"background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Regular", "font-size":"0.6rem"},
),
dbc.Modal([
dbc.ModalHeader("All Drivers"),
dbc.ModalBody(children = html.Div([table_driver_all(df_driver_all_crhr)], style={"padding":"1rem"})),
dbc.ModalFooter(
dbc.Button("Close", id = 'close-all-driver-crhr',
style={"background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Regular", "font-size":"0.8rem"},
)
)
], id = 'modal-all-driver-crhr', size="lg")],
width=3,
),
],
no_gutters=True,
),
dbc.Row(
[
dbc.Col(
[
html.Div([gaugegraph(df_driver_crhr,0)], style={"padding-top":"1.5rem"}),
html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][0]*100)),style={"color":"#ff4d17"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#ffeb78"}),
],
width=6),
dbc.Col(
[
html.Div([gaugegraph(df_driver_crhr,1)], style={"padding-top":"1.5rem"}),
html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][1]*100)),style={"color":"#ff4d17"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#aeff78"}),
],
width=6),
dbc.Col(
[
html.Div([gaugegraph(df_driver_crhr,2)], style={"padding-top":"1.5rem"}),
html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][2]*100)),style={"color":"#ff4d17"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#39db44"}),
],
width=6),
dbc.Col(
[
html.Div([gaugegraph(df_driver_crhr,3)], style={"padding-top":"1.5rem"}),
html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][3]*100)),style={"color":"#18cc75"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#39db44"}),
],
width=6),
],
),
]
),
className="mb-3",
style={"box-shadow":"0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05)", "border":"none", "border-radius":"0.5rem"}
)
def create_modal(self):
return html.Div([
dbc.Button(
"⇱ ",
id=f"{self.graph.id}open-centered",
className="border rounded-circle",
outline=True,
),
dbc.Modal([
dbc.ModalHeader(
dbc.Row([
dbc.Col(html.H2(self.title),
width="auto",
className="border",
align="center"),
dbc.Col(
dbc.Button(
"x",
id=f"{self.graph.id}close-centered",
outline=True,
className="border rounded-circle ml-auto"))
],
justify="end")),
dbc.ModalBody(self),
],
id=f"{self.graph.id}modal-centered",
centered=True),
])
def edit_tags_modal(id_prefix: str):
return dbc.Modal(
[
dbc.ModalHeader("Edit tags"),
dbc.ModalBody(
[
dcc.Dropdown(
id=f"{id_prefix}-edit-tags-dropdown",
multi=True,
options=[{"label": t, "value": t} for t in get_all_tags()],
)
]
),
dbc.ModalFooter(
[
dbc.Button("Save", id=f"{id_prefix}-edit-tags-save", color="info"),
dbc.Button(
"Close",
id=f"{id_prefix}-edit-tags-modal-close",
className="ml-auto",
),
]
),
],
id=f"{id_prefix}-edit-tags-modal",
)
def get_layout(self):
layout = dbc.Col(
dbc.Modal(
[
dbc.ModalHeader("How to use the tool"),
dbc.ModalBody([
html.Img(
src=self.image,
style={
"width": "auto",
"height": "600px"
},
),
html.Br(),
html.P(self.text)
], ),
dbc.ModalFooter(
dbc.Button("Close",
id="info-pane__close",
className="ml-auto")),
],
id="info-pane",
centered=True,
size="xl",
))
return layout
def build_modal(map_type, loc_mode):
return html.Div(
[
html.Div(
html.Span(
html.Span("GeoJSON Options",
style=dict(whiteSpace="pre-line")),
className="input-group-addon d-block pt-1 pb-0 pointer",
),
className="input-group mr-3",
id="open-geojson-modal",
),
dbc.Modal(
[
dbc.ModalHeader("Custom GeoJSON Options"),
dbc.ModalBody(build_geojson_upload(loc_mode)),
dbc.ModalFooter(
dbc.Button("Close",
id="close-geojson-modal",
className="ml-auto")),
],
id="geojson-modal",
size="lg",
centered=True,
),
],
className="col-auto",
style={} if map_type == "choropleth" and loc_mode == "geojson-id" else
{"display": "none"},
id="custom-geojson-input",
)
def modal_drilldown_tableview():
return html.Div(
[
dbc.Button("OPEN TABLE VIEW", id="drilldown-open-centered-kccq", color="light", block=True, style={"color":"#1357DD","border":"1.8px dotted","border-radius":"0.5rem","font-family":"NotoSans-CondensedBlack"}),
dbc.Modal(
[
dbc.ModalHeader(
html.Div(
[
html.H2("TABLE VIEW", style={"font-size":"2rem", "color":"#1357DD"})
],
style={"color":"#1357DD"}
)
),
dbc.ModalBody(
tableview()
),
dbc.ModalFooter(
dbc.Button(
"CLOSE", id="drilldown-close-centered-kccq", className="ml-auto",
style={"margin-right":"20px", "background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Black", "font-size":"1rem"}
)
),
],
id="drilldown-modal-centered-kccq",
size='xl',
scrollable=False,
backdrop = 'static',
),
]
)
def manager_modal_metricsdetail(app):
return html.Div([
dbc.Button(
"Result Details",
id='manager-button-openmodal-metricsdetail',
className="mb-3",
style={
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.6rem"
},
),
dbc.Modal([
dbc.ModalHeader([
html.H1("Result Details", style={"font-size": "0.8rem"}),
html.H2("TOTAL COST",
style={
"font-size": "0.8rem",
"color": "#1357DD"
})
], ),
dbc.ModalBody(children=table_result_dtls(df_result_details),
style={"padding": "2rem"}),
dbc.ModalFooter(
dbc.Button('Close',
style={"border-radius": "10rem"},
id='manager-button-closemodal-metricsdetail')),
],
id='manager-modal-metricsdetail',
backdrop='static'),
])
def build_init_modal(id_modal, slider_id, generate_id, text, min, max, step,
value):
return dbc.Modal([
dbc.ModalHeader('Initialize'),
dbc.ModalBody([
html.Div([
html.Div(text,
id=f'{slider_id}-value',
style={'padding-left': '30px'}),
dcc.Slider(
id=slider_id, min=min, max=max, step=step, value=value),
],
style={'width': '200px'})
]),
dbc.ModalFooter([
dbc.Button('Close',
id=f'modal-{id_modal}-close',
className='ml-auto',
style={'width': '10em'}),
dbc.Button('Generate',
id=generate_id,
className='ml-auto',
style={'width': '10em'})
],
style={
'margin-left': 'auto',
'margin-right': '0'
}),
],
id=f'modal-{id_modal}')
def __vector_calculator_modal_layout(
get_uuid: Callable,
vector_data: list,
predefined_expressions: List[ExpressionInfo],
) -> dbc.Modal:
return dbc.Modal(
style={"marginTop": "20vh", "width": "1300px"},
children=[
dbc.ModalHeader("Vector Calculator"),
dbc.ModalBody(
html.Div(
children=[
wsc.VectorCalculator(
id=get_uuid(LayoutElements.VECTOR_CALCULATOR),
vectors=vector_data,
expressions=predefined_expressions,
)
],
),
),
],
id=get_uuid(LayoutElements.VECTOR_CALCULATOR_MODAL),
size="lg",
centered=True,
)
def make_modal(plot_config, stations):
camera_header = dbc.CardHeader("camera access",
style={
"textAlign": "center",
"padding": "0px",
"border": "0px",
"color": plot_config['textcolor'],
"borderRadius": "0px"
})
camera_text = html.P([
"Montreal also provides realtime feed of traffic cameras that update at approximately 5 minute intervals. "
"Select to view feed of traffic cameras located at detector locations.",
],
style={
"margin": "16px",
"textAlign": "justify",
"color": "#7a7a7a"
})
btn = dbc.Button("view traffic cam",
id="open-modal",
style={"marginTop": "16px"})
modal = dbc.Modal([
dbc.ModalHeader(id="modal-header"),
dbc.ModalBody(
dbc.Row([
dbc.Col(dbc.Button(
"previous", id="prev-camera", style={"marginTop": "55%"}),
width=3,
style={"height": "100%"}),
dbc.Col(id="modal-body", width=6),
dbc.Col(dbc.Button(
"next", id="next-camera", style={"marginTop": "55%"}),
width=3,
style={"height": "100%"})
],
style={"textAlign": "center"})),
dbc.ModalFooter(
dbc.Button("Close", id="close-modal", className="ml-auto")),
],
id="camera-modal",
centered=True,
size="lg")
dropdown = dcc.Dropdown(id="station-camera-dropdown",
value="station 1",
options=[{
"label": o,
'value': o
} for o in stations],
clearable=False)
modal_layout = html.Div([
html.Div([camera_header, dropdown, modal, btn],
style={"textAlign": "center"}), camera_text
], )
return modal_layout
def create_submit_modal(pet_id):
modal = html.Div([
dbc.Button("Забрать",
id=f"open_submit_{pet_id}",
style={'margin': '0px 0px 0px 20px'},
size='lg',
color='dark',
outline=True),
dbc.Modal(
[
dbc.ModalHeader(f"Готовы взять питомца"),
dbc.ModalBody(
dbc.Form(
[
dbc.FormGroup(
[
dbc.Label("Имя", className="mr-2"),
dbc.Input(type="text",
placeholder="Введите Ваше имя"),
],
className="mr-3",
),
dbc.FormGroup(
[
dbc.Label("e-mail", className="mr-2"),
dbc.Input(type="email",
placeholder="Введите e-mail"),
],
className="mr-3",
),
dbc.FormGroup(
[
dbc.Label("Комментарий", className="mr-2"),
dbc.Input(type="text"),
],
className="mr-3",
),
dbc.Button("Отправить", color="primary"),
],
inline=True,
)),
dbc.ModalFooter(
dbc.Button("Закрыть",
id=f"close_submit_{pet_id}",
className="ml-auto")),
],
id=f"modal_submit_{pet_id}",
is_open=False, # True, False
size="xl", # "sm", "lg", "xl"
backdrop=
True, # True, False or Static for modal to not be closed by clicking on backdrop
scrollable=True, # False or True if modal has a lot of text
centered=True, # True, False
fade=True # True, False
),
])
return modal
def make_pulsar_display_modal(pulsar_name):
print("Pulsar NAME: ", pulsar_name)
record = records[pulsar_name]
generator = PulsarDetailGenerator(record)
header = dbc.ModalHeader([dbc.ModalTitle(pulsar_name)])
body = dbc.ModalBody(children=generator.generate())
footer = dbc.ModalFooter([])
children = [header, body, footer]
return children
def _generate_reset_event_modal():
return dbc.Modal(id='reset-hours-modal', children=[
dbc.ModalHeader('Reset Weekly Hours'),
dbc.ModalBody('Do you want to reset your weekly hours?'),
dbc.ModalFooter([
dbc.Button('Yes',id='yes-reset'),
dbc.Button('No',id='no-reset')
])
])
