info.html.twig 6.39 KB
Newer Older
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
{% extends 'base.html.twig' %}

{% block title %}{{ name }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('/public/leaflet/leaflet.css') }}"/>
    <link rel="stylesheet" href="{{ asset('/public/leaflet/easy-button.css') }}"/>
    <link rel="stylesheet" href="{{ asset('/public/css/tabs.css') }}"/>
    <style>
        .route {
            width: 100%;
            background-color: white;
            border-left: 0;
            border-top: 0;
            border-bottom: 0;
            border-right: 20px solid white;
            padding: 10px 5px;
            margin-bottom: 2px;
            font-size: 14px;
            cursor: pointer;
            color: var(--primary);
        }

        .table th, td {
            text-align: center;
        }
    </style>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('/public/javascript/addCourse.js') }}"></script>
32
    <script src="{{ asset('/public/javascript/showMap.js') }}?0.0.1"></script>
33
34
35
36
37
38
    <script src="{{ asset('/public/leaflet/leaflet.js') }}"></script>
    <script src="{{ asset('/public/leaflet/ImageOverlay.rotated.js') }}"></script>
    <script src="{{ asset('/public/leaflet/easy-button.js') }}"></script>

    <script>
        let divLeaflet, map, overlay;
39
40
        let overlayOpacity = 100;
        let imageURL;
41
42
43
44
45
46

        function showMap() {
            let xhr = new XMLHttpRequest();
            xhr.open("GET", "{{ route_map }}");
            xhr.onload = function () {
                let data = JSON.parse(xhr.response);
47
                imageURL = data.image;
48
49
50
51
52
                previewMap(data, document.getElementById("map-div"), divLeaflet, map, overlay, new Image(0, 0));
            };
            xhr.send()
        }

53
        function printMap() { //see library printJS for further print options.
54
55
56
57
            let printableMap = window.open(window.location.origin + "/" + imageURL);
            printableMap.print();
        }

58
        function switchMapDisplay() { // TODO new
59
60
            let hideButton = document.getElementById("hide-map");
            let showButton = document.getElementById("show-map");
Clouard Regis's avatar
Clouard Regis committed
61
62
63
64
65
66
67
68
69
            if (overlayOpacity === 100) {
                overlayOpacity = 0;
                hideButton.style.display = "block";
                showButton.style.display = "none";
            } else {
                overlayOpacity = 100;
                hideButton.style.display = "none";
                showButton.style.display = "block";
            }
70
71
72
            overlay.setOpacity(overlayOpacity);
        }

73
74
75
76
77
78
79
80
81
82
83
84
85
        window.addEventListener("load", function () {
            divLeaflet = document.createElement("div");
            map = generateMap(divLeaflet);
            overlay = L.imageOverlay.rotated("/none", L.latLng([-5, -5]), L.latLng([5, 5]), L.latLng([-5, 5]));
            overlay.addTo(map);
            showMap();
        });
    </script>

{% endblock %}

{% block body %}
    <div class="container-fluid" style="margin-top:20pt">
86
        <h2 class="text-center">{{ name }}</h2>
87
        <div class="row align-items-start" style="">
88
89
            <div class="col" style="width:100%">
                <div class="tab">
Clouard Regis's avatar
Clouard Regis committed
90
91
                    <button class="tab-links" onclick="openTab('tab1', 'map-tab')" id="tab1">{% trans %}course.menu.map{% endtrans %}</button>
                    <button class="tab-links" onclick="openTab('tab2', 'description-tab')" id="tab2">{% trans %}course.menu.info{% endtrans %}</button>
92
                </div>
93

94
                <!-- Tab content -->
95
                <div id="map-tab" class="tab-content">
Clouard Regis's avatar
Clouard Regis committed
96
97
                    <button class="btn btn-primary" id="show-map" onclick="switchMapDisplay(overlay, 100)" style="position: absolute; z-index: 9999; top: 60px; right: 35px">{% trans %}course.description.mask.map{% endtrans %}</button>
                    <button class="btn btn-primary" id="hide-map" onclick="switchMapDisplay(overlay, 0)" style="display:none; position: absolute; z-index: 9999; top: 60px; right: 35px">{% trans %}course.description.show.map{% endtrans %}</button>
98
                    {% if isPrintable %}
Clouard Regis's avatar
Clouard Regis committed
99
                        <button class="btn btn-primary" onclick="downloadMap(imageURL)" style="position: absolute; z-index: 9999; top: 105px; right: 35px">{% trans %}course.description.download{% endtrans %}</button>
100
                    {% endif %}
101
102
                    <div id="map-div" style="min-width: 300px">
                    </div>
103
                    <p id="map-not-found" class="alert alert-danger" style="display : none">{% trans %}course.error.map.not.found{% endtrans %}</p>
104
                </div>
105

106
                <div id="description-tab" class="tab-content list-group">
107
                    <div class="d-flex">
108
                        <div class="">
Clouard Regis's avatar
Clouard Regis committed
109
                            <p>{% trans %}course.description.author{% endtrans %}{{ creator }}</p>
110
                            {% if club != null %}
Clouard Regis's avatar
Clouard Regis committed
111
                                <p>{% trans %}course.description.club.name{% endtrans %}{{ club }}</p>
112
                            {% endif %}
113
                            {% if app.request.locale == 'fr' %}
Clouard Regis's avatar
Clouard Regis committed
114
                                <p>{% trans %}course.description.date{% endtrans %}{{ day }}/{{ month }}/{{ year }}</p>
115
                            {% else %}
Clouard Regis's avatar
Clouard Regis committed
116
                                <p>{% trans %}course.description.date{% endtrans %}{{ month }}/{{ day }}/{{ year }}</p>
117
                            {% endif %}
Clouard Regis's avatar
Clouard Regis committed
118
119
                            <p>{% trans %}course.description.control.point.number{% endtrans %}{{ control_point_number }}</p>
                            <p>{% trans %}course.description.length{% endtrans %}{{ length }} m</p>
120
                        </div>
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function openTab(tabTitle, tabId) {
            let i, tabContent, tabLinks;
            tabContent = document.getElementsByClassName("tab-content");
            for (i = 0; i < tabContent.length; i++) {
                tabContent[i].style.display = "none";
            }
            tabLinks = document.getElementsByClassName("tab-links");
            for (i = 0; i < tabLinks.length; i++) {
                tabLinks[i].className = tabLinks[i].className.replace(" active", "");
            }
            document.getElementById(tabId).style.display = "block";
            document.getElementById(tabTitle).className += " active";
        }

141
        document.getElementById("tab1").click();
142
143
    </script>
{% endblock %}