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

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

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

<f:render partial="Classic/Assets" />

<v:asset.script name="classic-structures"
                path="EXT:ot_templating/Resources/Public/assets/Classic/script/structures.js"
                dependencies="classic-jquery,classic-datepicker,classic-slick,classic-leaflet,classic-main"
                standalone="1"
                defer="1"/>

<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-frame 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 method="get" id="structure-search-form">
                            <div class="search-bar-wrapper">
                                <input type="text"
                                       name="search-query"
                                       class="search-bar"
                                       value="{ot:request.getArgument(argument: 'search-loc')}"/>
                                <button class="search-submit"
                                        name="search-submit"
                                >
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>

                            <div class="filters">
                                <f:form.select name="search-category"
                                               value="{ot:request.getArgument(argument: 'search-category')}">
                                    <f:form.select.option value="">Type</f:form.select.option>
                                    <f:form.select.option value="1MC">{f:translate(key: '1MC')}</f:form.select.option>
                                    <f:form.select.option value="2TH">{f:translate(key: '2TH')}</f:form.select.option>
                                    <f:form.select.option value="3DA">{f:translate(key: '3DA')}</f:form.select.option>
                                    <f:form.select.option value="5FA">{f:translate(key: '5FA')}</f:form.select.option>
                                    <f:form.select.option value="OTAR">{f:translate(key: 'OTAR')}</f:form.select.option>
                                    <f:form.select.option value="OTCI">{f:translate(key: 'OTCI')}</f:form.select.option>
                                    <f:form.select.option value="6AR">{f:translate(key: '6AR')}</f:form.select.option>
                                    <f:form.select.option value="8CI">{f:translate(key: '8CI')}</f:form.select.option>
                                    <f:form.select.option value="OTAU">{f:translate(key: 'OTAU')}</f:form.select.option>
                                </f:form.select>
                                <f:form.select class="search-province">
                                    <f:form.select.option value="">Région</f:form.select.option>
                                    <f:form.select.option value="0">Alsace</f:form.select.option>
                                </f:form.select>
                                <f:form.select class="search-federation">
                                    <f:form.select.option value="">Fédération</f:form.select.option>
                                    <f:form.select.option value="0">CMF</f:form.select.option>
                                </f:form.select>
                                <select class="search-distance-max">
                                    <option value="">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">
                        <span class="please-wait"><f:translate key="please-wait"/></span>
                        <span class="no-result" style="display: none"><f:translate key="no-result"/></span>

                        <div class="structures-page">
                            <div class="structure-card-model" data-id="" style="display: none">

                                <div class="structure-poster">
                                    <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
                                </div>

                                <div class="structure-details">
                                     <div class="structure-categories">
                                        <span class="structure-category-model" style="display: none">{category}</span>
                                     </div>

                                    <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 class="structure-details-address">
                                                {structure.streetAddress}
                                                {structure.postalCode} {structure.addressCity}
                                            </td>
                                        </tr>
                                        <tr class="structure-details-entry structure-federation">
                                            <td><i class="fas fa-project-diagram"></i></td>
                                            <td class="structure-details-federation">{structure.parentName}</td>
                                        </tr>
                                    </table>
                                </div>

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

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

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

                            <ul class="pagination-list">
                                <li class="goto-page-li-model" style="display: none;">
                                    <a class="goto-page" data-page="1" href="#" title="{f:translate(key:'go-to-page')}">
                                        1
                                    </a>
                                </li>
                            </ul>

                            <a class="goto-page goto-last-page" data-page="-1" href="#" 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>