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",
        ),
    ]
    )
Beispiel #2
0
 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"})
Beispiel #3
0
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
Beispiel #4
0
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'),

        ])
Beispiel #5
0
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",
    )
Beispiel #6
0
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}')
Beispiel #7
0
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"})
Beispiel #8
0
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 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'),
    ])
Beispiel #10
0
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",
    )
Beispiel #11
0
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"})
Beispiel #12
0
def modal(name, is_graph=False):
    return dbc.Modal(
        [
            html.Div(html.Section(
                [
                    html.Div(id=name + '-title'),
                    html.Div(
                        dbc.Button("×", id=name + '-close1',
                                   className='close'))
                ],
                style={
                    'display': 'flex',
                    'width': '100%',
                    'justify-content': 'space-between'
                }),
                     className='modal-header'),

            # dbc.ModalBody(dcc.Graph(figure=fig)),
            dcc.Graph(id=name + '-children', config=graph_config)
            if is_graph else dbc.ModalBody(html.Div(id=name + '-children')),
            dbc.ModalFooter(dbc.Button("Закрыть", id=name + '-close')),
        ],
        id=name,
        size="xl",
        fade=False
        # className='fade'
    )
Beispiel #13
0
 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 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,
    )
Beispiel #15
0
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 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 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 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')
    ], )
Beispiel #19
0
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")
Beispiel #20
0
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",
    )
Beispiel #21
0
 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
Beispiel #22
0
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 make_configuration_modal(self, activity: Activity,
                              config: UserConfig) -> html:
     config_modal = html.Div([
         dbc.Button("Configuration",
                    id="btn_open_configuration",
                    color="link",
                    n_clicks=0),
         dbc.Modal(
             [
                 dbc.ModalTitle("Configuration"),
                 dbc.ModalBody(self.make_charts_selector(activity, config)),
                 dbc.ModalFooter([
                     dbc.Button("Save",
                                id="btn_save_configuration",
                                color="link",
                                n_clicks=0),
                     dbc.Button("Close",
                                id="btn_close_configuration",
                                color="link",
                                n_clicks=0)
                 ])
             ],
             id="configuration_modal_centered",
             centered=True,
             is_open=False,
         )
     ])
     return config_modal
Beispiel #24
0
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
Beispiel #25
0
def footer():
    save_button = dbc.Button(
        "Save",
        id="save_info_modal",
        color="dark",
        className="ml-auto",
        outline=True,
    )
    return dbc.ModalFooter(save_button)
Beispiel #26
0
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
Beispiel #27
0
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
Beispiel #28
0
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')
		])
	])
Beispiel #29
0
def build_modal(ext_aggs, chart_type, y):
    return [
        build_hoverable(
            html.I(
                className="ico-settings pointer",
                id="open-extended-agg-modal",
                style=show_style(chart_type not in NON_EXT_AGGREGATION
                                 and len(y)),
            ),
            html.Div(html.Span(text("ext_agg_desc")),
                     id="extended-aggregation-tooltip"),
            hover_class="saved-chart-config",
            top="100%",
            additional_classes="mb-auto mt-auto",
        ),
        dcc.Store(id="extended-aggregations", data=ext_aggs),
        dcc.Store(id="prev-open-extended-agg-modal", data=0),
        dcc.Store(id="prev-close-extended-agg-modal", data=0),
        dcc.Store(id="prev-clear-extended-agg-modal", data=0),
        dcc.Store(id="prev-apply-extended-agg-modal", data=0),
        dbc.Modal(
            [
                dbc.ModalHeader(
                    html.Div(
                        [
                            html.Div(
                                text("Extended Aggregations"),
                                className="col mt-auto mb-auto",
                            ),
                            html.Button(
                                html.Span("X"),
                                className="close mr-5",
                                id="close-extended-agg-modal",
                            ),
                        ],
                        className="row",
                    )),
                dbc.ModalBody(build_body(ext_aggs)),
                dbc.ModalFooter([
                    dbc.Button(
                        text("Clear"),
                        id="clear-extended-agg-modal",
                        className="ml-auto",
                    ),
                    dbc.Button(
                        text("Apply"),
                        id="apply-extended-agg-modal",
                    ),
                ]),
            ],
            id="extended-agg-modal",
            size="lg",
            centered=True,
        ),
    ]
Beispiel #30
0
def get_infoBox1(pathname):
    infobox = dbc.Row(
        [
            html.P(
                "Information Box", className="lead", style={'width': '100%'}),
            dbc.Button("Object",
                       id="patent_open1",
                       style={
                           'margin': '10px',
                           'width': '95%'
                       }),
            dbc.Modal([
                dbc.ModalHeader("Object"),
                dcc.Markdown(children=markdown_text1,
                             style={'padding': '15px'}),
                dbc.ModalFooter(
                    dbc.Button(
                        "Close", id="patent_close1", className="ml-auto"))
            ],
                      id="patent_modal1",
                      scrollable=True),
            dbc.Button("Data Source",
                       id="patent_open2",
                       style={
                           'margin': '10px',
                           'width': '95%'
                       }),
            dbc.Modal([
                dbc.ModalHeader("Data Source"),
                dcc.Markdown(children=markdown_text2,
                             style={'padding': '15px'}),
                dbc.ModalFooter(
                    dbc.Button(
                        "Close", id="patent_close2", className="ml-auto"))
            ],
                      id="patent_modal2",
                      scrollable=True),
        ],
        style={'margin': 0},
    )
    if pathname == "/page1":
        return infobox