letsblockit/data/pages/view-filter.hbs at main · androidkotlindev/letsblockit · GitHub

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
<div class="row">
    <div class="col-12 col-lg-2 order-last pt-5 pt-lg-0">
        <hr class="d-lg-none"/>
        <a href="{{href "list-filters" ""}}">← Back to list</a>
        <div class="card-body">
            <h5 class="card-title">Tags</h5>
            <p class="card-text">{{#each filter.tags}}{{{tag this}}}{{/each}}</p>
        </div>
        <div class="card-body">
            <h5 class="card-title">Contribute</h5>
            <p class="card-text">
                <a href="https://github.com/xvello/letsblockit/issues/new?labels=filter-data&template=update-filter.yaml
&what_filter_does_this_issue_target={{filter.name}}">Suggest a change</a>
            </p>
            <p class="card-text">
                <a href="https://github.com/xvello/letsblockit/blob/main/data/filters/{{filter.name}}.yaml">Filter
                    source</a>
            </p>
        </div>
    </div>
    <div class="col col-lg-10">
        <h2>{{filter.title}}</h2>
        {{{ filter.description }}}

        {{#if filter.params}}
            <div class="mt-4 card shadow-sm">
                <div class="card-header">Build your customized content filter:</div>
                <form id="filter_input" class="card-body" method="POST" action="#output-card"
                      hx-trigger="input delay:250ms"
                      hx-post="{{href "view-filter-render" filter.name}}"
                      hx-target="#output-card"
                      hx-swap="outerHTML">

                    {{{csrf @root}}}
                    {{#each filter.params}}
                        {{~>view-filter-param}}
                    {{/each}}
                    <div class="d-flex align-items-center">
                        {{#if @root.UserLoggedIn}}
                            <input type="hidden" name="__logged_in" value="true">
                            <button type="submit" name="__render" class="btn btn-secondary me-2">
                                <i class="ti ti-eye me-2"></i>
                                Preview
                            </button>
                            <button type="submit" name="__save" class="ms-2 me-2 btn btn-primary"
                                    hx-vals='{"__save": ""}'
                                    hx-post="{{href "view-filter" filter.name}}"
                                    hx-select="#main" hx-target="#main" hx-swap="outerHTML">
                                {{#if has_instance}}
                                    <i class="ti ti-edit text-white me-1"></i>
                                    Update filter
                                {{else}}
                                    <i class="ti ti-circle-plus text-white me-1"></i>
                                    Add filter
                                {{/if}}
                            </button>
                        {{else}}
                            <button type="submit" name="__render" class="btn btn-primary">Render</button>
                        {{/if}}
                        <div class="ms-2 htmx-indicator spinner-border text-secondary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        {{#if has_instance}}
                            <button type="submit" name="__disable" class="btn btn-dark ms-auto"
                                    hx-confirm="Remove filter and delete its configuration?"
                                    hx-vals='{"__disable": ""}'
                                    hx-post="{{href "view-filter" filter.name}}"
                                    hx-select="#main" hx-target="#main" hx-swap="outerHTML">
                                <i class="ti ti-trash text-white me-1"></i>
                                Remove filter
                            </button>
                        {{/if}}
                    </div>
                </form>
            </div>
        {{else}}
            <div class="mt-4 d-flex align-items-center">
                <form id="filter_input" class="container form-inline" method="POST" action="#output-card"
                      hx-post="{{href "view-filter" filter.name}}"
                      hx-select="#main" hx-target="#main" hx-swap="outerHTML">
                    {{{csrf @root}}}
                    {{#if has_instance}}
                        <button class="btn btn-primary me-2" disabled>Filter already in your list.</button>
                        <button type="submit" name="__disable" class="ms-2 btn btn-dark ms-auto"
                                hx-confirm="Remove filter and delete its configuration?"
                                hx-vals='{"__disable": ""}'
                                hx-post="{{href "view-filter" filter.name}}"
                                hx-select="#main" hx-target="#main" hx-swap="outerHTML">
                            <i class="ti ti-trash text-white me-1"></i>
                            Remove filter
                        </button>
                    {{else if @root.UserLoggedIn}}
                        <button type="submit" name="__save" class="btn btn-primary">
                            <i class="ti ti-circle-plus text-white me-1"></i>
                            Add filter
                        </button>
                    {{else}}
                        <div role="alert" class="alert alert-secondary has-background-secondary-light mt-3 ms-3 me-3">
                            <span class="align-middle">This filter does not have any parameters.</span>
                            <button type="submit" class="btn btn-link p-0"
                                    formaction="{{href "start-flow" "loginOrRegistration"}}"
                                    hx-post="{{href "start-flow" "loginOrRegistration"}}">
                                {{#if @root.UserHasAccount}}
                                    Login to save this filter to your list.
                                {{else}}
                                    Create an account and start building your list.
                                {{/if}}
                            </button>
                        </div>
                    {{/if}}
                </form>
            </div>
        {{/if}}
        {{>view-filter-render}}
    </div>
</div>