index.html 3.88 KB
Newer Older
Sylvain Le Bon's avatar
Sylvain Le Bon committed
1 2 3 4 5
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
Sylvain Le Bon's avatar
Sylvain Le Bon committed
6 7 8
        <link rel="import" href="https://cdn.happy-dev.fr/sib-core/sib-display.html" />
        <link rel="import" href="https://cdn.happy-dev.fr/sib-core/sib-form.html" />
        <link rel="import" href="sib-router.html" />
Sylvain Le Bon's avatar
Sylvain Le Bon committed
9
        <style>
Sylvain Le Bon's avatar
Sylvain Le Bon committed
10
            sib-display {
Sylvain Le Bon's avatar
Sylvain Le Bon committed
11 12 13 14 15 16 17 18 19 20 21 22 23
                display: flex;
            }
            #detail {
                float: right;
                border: solid blue;
            }
            .set1 {
                display: flex;
                color: orange;
            }
            .text {
                font-weight: bold;
            }
24 25 26
            [active] {
                color: orange;
            }
Sylvain Le Bon's avatar
Sylvain Le Bon committed
27 28 29 30
        </style>
    </head>
    <body>
        <div id="loader" style="display:none">Chargement...</div>
Sylvain Le Bon's avatar
Sylvain Le Bon committed
31 32 33 34
        <sib-router default-route="list">
            <sib-route name="list">Voir la liste</sib-route>
            <sib-route name="form">Voir le formulaire</sib-route>
        </sib-router>
Sylvain Le Bon's avatar
Sylvain Le Bon committed
35
        <main>
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
            <div id="list">
                <sib-router>
                    <sib-route name="detail" id-prefix="http://localhost:8000/members/">Voir le détail</sib-route>
                </sib-router>
                
                <div id="detail">
                    <sib-router>
                        <sib-route name="detail-red" id-prefix="http://localhost:8000/members/">en rouge</sib-route>
                        <sib-route name="detail-blue" id-prefix="http://localhost:8000/members/">en bleu</sib-route>
                    </sib-router>
                    <sib-display
                        id="detail-red"
                        style="color:red"
                        bind-resources
                        loader-id="loader"
                        data-src="http://localhost:8000/members/3/"
                        data-fields="firstname, author, text, assignees"
                        value-text="Ceci est un détail"
                        widget-assignees="sib-display-list"
                    ></sib-display>
                    <sib-display
                        id="detail-blue"
                        style="color:blue"
                        bind-resources
                        loader-id="loader"
                        data-src="http://localhost:8000/members/3/"
                        data-fields="firstname, author, text, assignees"
                        value-text="Ceci est un détail"
                        widget-assignees="sib-display-list"
                    ></sib-display>
                </div>
                <sib-display 
                    id="list"
                    data-src="http://localhost:8000/members/"
                    data-fields="set1, author"
                    set-set1="firstname, lastname"
                    value-text="youpi"
                    search-fields="firstname, lastname"
                    next="detail"
Sylvain Le Bon's avatar
Sylvain Le Bon committed
75
                ></sib-display>
Sylvain Le Bon's avatar
Sylvain Le Bon committed
76 77
            </div>
            <div id="form">
78
                <sib-router default-route="create">
Sylvain Le Bon's avatar
Sylvain Le Bon committed
79 80 81
                    <sib-route name="create">Nouveau</sib-route>
                    <sib-route name="edit">Modifier</sib-route>
                </sib-router>
Sylvain Le Bon's avatar
Sylvain Le Bon committed
82
                <section id="form-root">
Sylvain Le Bon's avatar
Sylvain Le Bon committed
83 84
                    <sib-form id="create" data-src="http://localhost:8000/members/"></sib-form>
                    <sib-form
Sylvain Le Bon's avatar
Sylvain Le Bon committed
85
                        id="edit"
Sylvain Le Bon's avatar
Sylvain Le Bon committed
86
                        data-src="http://localhost:8000/members/3/"
Sylvain Le Bon's avatar
Sylvain Le Bon committed
87
                        next="list"
Sylvain Le Bon's avatar
Sylvain Le Bon committed
88
                        widget-done="sib-form-checkbox"
Sylvain Le Bon's avatar
Sylvain Le Bon committed
89
                        label-name="What's your name, honey?"
Sylvain Le Bon's avatar
Sylvain Le Bon committed
90 91
                        range-author="http://localhost:8000/members/"
                    ></sib-form>
Sylvain Le Bon's avatar
Sylvain Le Bon committed
92 93 94 95 96
                </section>
            </div>
        </main>
    </body>
</html>