dialtone_yew 0.1.0

Dialtone Yew Webapp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

use crate::app_types::AppSiteConnection;
use crate::components::common::site_name::*;
use crate::components::pages::account::AccountRoute;
use crate::components::pages::register::RegisterRoute;
use crate::MainRoute;
use bounce::use_atom;
use dialtone_common::utils::make_acct::make_acct;
use yew::prelude::*;
use yew_router::prelude::*;

#[derive(Properties, Debug, PartialEq)]
pub struct MainLayoutProps {
    #[prop_or_default]
    pub children: Children,
}

#[function_component(MainLayout)]
pub fn main_layout(props: &MainLayoutProps) -> Html {
    let logo_svg = html! {
    <svg
            width="133.26295mm"
            height="94.757332mm"
            viewBox="0 0 133.26295 94.757332"
            version="1.1"
            id="svg8"
            class="dt-logo">
        <defs
                id="defs2" />
        <g
                id="layer1"
                transform="translate(-20.212842,-59.113652)">
            <rect
                    style="stroke-width:3.76499;stroke-linejoin:round;image-rendering:auto"
                    id="rect833"
                    width="129.49797"
                    height="90.99234"
                    x="22.095337"
                    y="60.996147"
                    ry="4.9131541"
                    class="logo-border" />
            <path
                    style="stroke-width:4.91396;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                    d="M 33.871577,116.84568 76.98863,70.043132"
                    id="path839"
                    class="logo-color-action" />
            <path
                    style="stroke-width:7.30413;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                    d="M 37.164318,140.93297 101.27819,71.392271"
                    id="path854"
                    class="logo-color-action" />
            <path
                    style="stroke-width:7.38753;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                    d="M 64.569415,143.3627 129.39139,73.00204"
                    id="path856"
                    class="logo-color-primary" />
            <path
                    style="stroke-width:5.58259;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                    d="M 90.885366,143.64697 140.05432,90.676453"
                    id="path858"
                    class="logo-color-primary" />
            <path
                    style="stroke-width:3.04679;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                    d="m 116.90006,142.91526 26.55086,-29.21867"
                    id="path860"
                    class="logo-color-action" />
            <path
                    style="stroke-width:2.88811;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                    d="M 31.313973,97.123117 57.070038,70.188029"
                    id="path862"
                    class="logo-color-primary" />
        </g>
    </svg>
    };
    let h = html! {
        <dt-main-layout>
            <div class="site_header_bar">
                <dt-site-name><SiteName short={false}/></dt-site-name>
                <dt-site-logo>{logo_svg}</dt-site-logo>
            </div>
            <div class="site_nav_bar">
                <div><Link<MainRoute> classes={classes!("in_page_action")} to={MainRoute::Home}>{"Home"}</Link<MainRoute>></div>
                <div><Link<MainRoute> classes={classes!("in_page_action")} to={MainRoute::About}>{"About"}</Link<MainRoute>></div>
                <div><Link<MainRoute> classes={classes!("in_page_action")} to={MainRoute::Themes}>{"Themes"}</Link<MainRoute>></div>
                <DtNavLogin/>
            </div>
            <dt-main-content>
                {props.children.clone()}
            </dt-main-content>
        </dt-main-layout>
    };
    h
}

#[function_component(DtNavLogin)]
fn site_login() -> Html {
    let user_name: UseStateHandle<Option<String>> = use_state_eq(|| None);
    let sc_atom = use_atom::<AppSiteConnection>();
    if let Some(n) = &sc_atom.0.user_name {
        user_name.set(Some(n.to_string()));
    } else {
        user_name.set(None);
    }
    match *user_name {
        Some(ref user_name) => {
            let acct = make_acct(user_name, sc_atom.0.host_name());
            html! {
                <>
                <div>{"("}<Link<AccountRoute> classes={classes!("in_page_action")} to={AccountRoute::Index{acct}}>{user_name}</Link<AccountRoute>>{")"}</div>
                <div><Link<MainRoute> classes={classes!("in_page_action")} to={MainRoute::Logout}>{"Logout"}</Link<MainRoute>></div>
                </>
            }
        }
        None => {
            html! {
                <>
                <div><Link<MainRoute> classes={classes!("in_page_action")} to={MainRoute::Login}>{"Login"}</Link<MainRoute>></div>
                <div><Link<RegisterRoute> classes={classes!("in_page_action")} to={RegisterRoute::Index}>{"Register"}</Link<RegisterRoute>></div>
                </>
            }
        }
    }
}