ot_typo3/ot_templating/Resources/Private/Layouts/Classic/Structures.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ot=Opentalent\OtTemplating\ViewHelpers}

<f:comment><!-- Special layout for the Members page --></f:comment>
<f:layout name="Structures" />

<f:comment><!-- Render the header defined in partial/header.html--></f:comment>
<f:render partial="Classic/Header" arguments="{_all}" />

<div class="main">
    <f:comment><!-- Central column --></f:comment>
    <div class="content">
        <f:comment><!-- All members --></f:comment>

        <ot:organizations.getFederationStructures as="structuresCollection"
                                                  parentId="{settings.organizationId}"
                                                  itemsPerPage="all">

            <f:comment><!-- The data is stored as an attribute, then templated with JS for performance reasons --></f:comment>
            <div class="ot-structures map-view" data-structures="{v:format.json.encode(value:structuresCollection.members)}">

                <div class="structure-col structure-col-map">
                    <div id="structure-map-wrapper">
                        <div id="structure-map">
                        </div>
                    </div>

                    <div id="structure-map-bar">
                        <div class="btn">{f:translate(key: 'click-on-land-to-go-there')}</div>
                        <ul id="overseas-provinces-list">
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/metropole.png" alt="Metropole" data="{map-fit: '51.03,-5.78;41.2,9.70'}"/></li>
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/guadeloupe.png" alt="Guadeloupe" data="{map-fit: '16.62,-62.03;15.74,-60.97'}"/></li>
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/martinique.png" alt="Martinique" data="{map-fit: '14.95,-61.43;14.28,-60.60'}"/></li>
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/mayotte.png" alt="Mayotte" data="{map-fit: '-12.51,44.86;-13.19,45.45'}"/></li>
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/la_reunion.png" alt="La Réunion" data="{map-fit: '-20.65,54.92;-21.65,56.15'}"/></li>
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/guyane.png" alt="Guyane" data="{map-fit: '6.24,-54.62;1.87,-50.59'}"/></li>
                        </ul>
                    </div>
                </div>

                <div class="structure-col structure-col-results">
                    <header>
                        <h2><f:translate key="member-companies"/></h2>
                        <a href="#" class="activate-map-view"><f:translate key="map"/></a>
                        <a href="#" class="activate-list-view"><f:translate key="list"/></a>
                    </header>
                    <div class="structure-search">
                        <form>
                            <div class="search-loc-wrapper">
                                <input type="text"
                                       name="search-loc"
                                       value="{ot:request.getArgument(argument: 'search-loc')}"/>
                                <button type="submit" class="search-submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>

                            <div class="filters">
                                <select class="search-type">
                                    <option value="-1">Type</option>
                                    <option value="0">Harmonie</option>
                                    <option value="0">Orchestre</option>
                                    <option value="0">Chorale</option>
                                    <option value="0">Ecole de musique</option>
                                </select>
                                <select class="search-province">
                                    <option value="-1">Région</option>
                                    <option value="0">Alsace</option>
                                </select>
                                <select class="search-federation">
                                    <option value="-1">Fédération</option>
                                    <option value="0">CMF</option>
                                </select>
                                <select class="search-distance-max">
                                    <option value="-1">Distance</option>
                                    <option value="0">100</option>
                                </select>

                                <button class="reset-search">Réinitialiser</button>
                            </div>

                            <f:comment><!--
                            Important: if the cache is not disabled,
                             then the results won't be updated even after submitting this form
                             --></f:comment>
                            <input type="hidden" name="no_cache" value="1">
                        </form>
                    </div>

                    <div class="structure-results">
                        <f:if condition="{structuresCollection.totalItems} == 0">
                            <span><f:translate key="no-result"/></span>
                        </f:if>

                        <v:variable.set name="pagedStructures" value="{ot:utilities.paginateArray(array:structuresCollection.members)}" />

                        <f:for each="{pagedStructures}" as="page_items" iteration="it">

                            <div class="structures-page"
                                 style="{f:if(condition: '{it.cycle}!=1', then: 'display:none;')}"
                                 data-page="{it.cycle}"
                            >
                                <f:for each="{page_items}" as="structure">
                                    <div class="structure-card" data-id="{structure.id}">

                                        <div class="structure-poster">
                                            <f:if condition="{structure.logoId}">
                                                <f:then>
                                                    <img src='{structure.logoId}' alt="poster" />
                                                </f:then>
                                                <f:else>
                                                    <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
                                                </f:else>
                                            </f:if>
                                        </div>

                                        <div class="structure-details">
                                            <f:comment>
                                                <!--                                    <div class="structure-categories">-->
        <!--                                        <f:for each="{structure.categories}" as="category">-->
        <!--                                            <span class="structure-category">-->
        <!--                                                <f:translate key="{category}"/>-->
        <!--                                            </span>-->
        <!--                                        </f:for>-->
        <!--                                    </div>--></f:comment>

                                            <div class="structure-name">
                                                {structure.name}
                                            </div>
                                            <table class="structure-details-table">
                                                <tr class="structure-details-entry structure-address">
                                                    <td><i class="fas fa-map-marker-alt"></i></td>
                                                    <td>
                                                        <f:if condition="{structure.streetAddress}">
                                                            {structure.streetAddress} -
                                                        </f:if>
                                                        {structure.postalCode} {structure.addressCity}
                                                    </td>
                                                </tr>
                                                <tr class="structure-details-entry structure-federation">
                                                    <td><i class="fas fa-project-diagram"></i></td>
                                                    <td>{structure.parentName}</td>
                                                </tr>
                                            </table>
                                        </div>

                                        <div class="spacer"></div>

                                        <a target="_blank" class="btn structure-see" href="https://{structure.subdomain}.opentalent.fr">
                                            <span><f:translate key="see-more"/></span>
                                            <i class="fa fa-caret-right" style="margin-left: 5px;"></i>
                                        </a>
                                    </div>
                                </f:for>
                            </div>
                        </f:for>

                        <div class="pagination-bar">
                            <v:variable.set name="lastPage" value="{ot:utilities.count(array:pagedStructures)}" />

                            <a class="goto-page" data-page="1" href="#page-1" title="{f:translate(key:'go-to-first-page')}">
                                <i class="fa fa-angle-double-left"></i>
                            </a>

                            <ul>
                            <f:for each="{pagedStructures}" as="_" iteration="it">
                                <li class="{f:if(condition:'{it.cycle}==1',then:'current',else:'')}"
                                    style="{f:if(condition:'{it.cycle}>10',then:'display:none;',else:'')}"
                                    data-page="{it.cycle}"
                                >
                                    <a class="goto-page" data-page="{it.cycle}" href="#page-{it.cycle}" title="{f:translate(key:'go-to-page')}{it.cycle}">
                                        {it.cycle}
                                    </a>
                                </li>
                            </f:for>
                            </ul>

                            <a class="goto-page" data-page="{lastPage}" href="#page-{lastPage}" title="{f:translate(key:'go-to-last-page')}">
                                <i class="fa fa-angle-double-right"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </ot:organizations.getFederationStructures>
    </div>
</div>

<f:comment><!-- Render the footer defined in partial/footer.html--></f:comment>
<f:render partial="Classic/Footer" />