feat: add WAPC map

application/controllers/Awards.php

@@ -200,6 +200,10 @@ class Awards extends CI_Controller {
 
 	public function wapc ()	{
 		$footerData = [];
+		$footerData['scripts'] = [
+			'assets/js/sections/wapcmap.js?' . filemtime(realpath(__DIR__ . "/../../assets/js/sections/wapcmap.js")),
+			'assets/js/leaflet/L.Maidenhead.js',
+		];
 
 		$this->load->model('wapc');
 		$this->load->model('modes');
@@ -1705,6 +1709,58 @@ class Awards extends CI_Controller {
         echo json_encode($prefectures);
     }
 
+    /*
+        function wapc_map
+    */
+    public function wapc_map() {
+        $this->load->model('wapc');
+        $this->load->model('bands');
+
+        $bands[] = $this->security->xss_clean($this->input->post('band'));
+
+        $postdata['qsl'] = $this->input->post('qsl') == 0 ? NULL: 1;
+        $postdata['lotw'] = $this->input->post('lotw') == 0 ? NULL: 1;
+        $postdata['eqsl'] = $this->input->post('eqsl') == 0 ? NULL: 1;
+        $postdata['qrz'] = $this->input->post('qrz') == 0 ? NULL: 1;
+        $postdata['worked'] = $this->input->post('worked') == 0 ? NULL: 1;
+        $postdata['clublog'] = $this->input->post('clublog') == 0 ? NULL: 1;
+        $postdata['confirmed'] = $this->input->post('confirmed')  == 0 ? NULL: 1;
+        $postdata['notworked'] = $this->input->post('notworked')  == 0 ? NULL: 1;
+        $postdata['band'] = $this->security->xss_clean($this->input->post('band'));
+        $postdata['mode'] = $this->security->xss_clean($this->input->post('mode'));
+
+        $wapc_array = $this->wapc->get_wapc_array($bands, $postdata);
+
+        $provinces = array();
+
+        $wapcArray = array_keys($this->wapc->cnProvinces);
+        foreach ($wapcArray as $state) {
+            $provinces[$state] = '-';
+        }
+
+        foreach ($wapc_array as $wapc => $value) {
+            foreach ($value  as $key) {
+                if($key != "") {
+                    if (strpos($key, '>W<') !== false) {
+                        $provinces[$wapc] = 'W';
+                        break;
+                    }
+                    if (strpos($key, '>C<') !== false) {
+                        $provinces[$wapc] = 'C';
+                        break;
+                    }
+                    if (strpos($key, '-') !== false) {
+                        $provinces[$wapc] = '-';
+                        break;
+                    }
+                }
+            }
+        }
+
+        header('Content-Type: application/json');
+        echo json_encode($provinces);
+    }
+
     /*
         function dxcc_map
         This displays the DXCC map

application/views/awards/wapc/index.php

@@ -1,3 +1,18 @@
+<script>
+	var tileUrl="<?php echo $this->optionslib->get_option('option_map_tile_server');?>";
+    var lang_china_province = "<?= _pgettext("China Province", "Province"); ?>";
+    var lang_hover_over_a_province = "<?= __("Hover over a province"); ?>";
+</script>
+<script>
+	let user_map_custom = JSON.parse('<?php echo $user_map_custom; ?>');
+</script>
+
+<style>
+    #wapcmap {
+	height: calc(100vh - 500px) !important;
+	max-height: 900px !important;
+}
+</style>
 <div class="container">
         <!-- Award Info Box -->
         <br>
@@ -103,12 +118,35 @@
                 <div class="col-md-10">
                     <button id="button2id" type="reset" name="button2id" class="btn btn-sm btn-warning"><?= __("Reset"); ?></button>
                     <button id="button1id" type="submit" name="button1id" class="btn btn-sm btn-primary"><?= __("Show"); ?></button>
+                    <?php if ($wapc_array) {
+                        ?><button type="button" onclick="load_wapc_map();" class="btn btn-info btn-sm"><i class="fas fa-globe-americas"></i><?= __("Show WAPC Map"); ?></button>
+                    <?php }?>
                 </div>
             </div>
 
         </fieldset>
     </form>
 
+    <ul class="nav nav-tabs" id="myTab" role="tablist">
+        <li class="nav-item">
+            <a class="nav-link active" id="table-tab" data-bs-toggle="tab" href="#table" role="tab" aria-controls="table" aria-selected="true"><?= __("Table"); ?></a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" id="map-tab" onclick="load_wapc_map();" data-bs-toggle="tab" href="#wapcmaptab" role="tab" aria-controls="home" aria-selected="false"><?= __("Map"); ?></a>
+        </li>
+    </ul>
+    <br />
+
+    <div class="tab-content" id="myTabContent">
+        <div class="tab-pane fade" id="wapcmaptab" role="tabpanel" aria-labelledby="home-tab">
+    <br />
+
+    <div id="wapcmap" class="map-leaflet" ></div>
+
+    </div>
+
+        <div class="tab-pane fade show active" id="table" role="tabpanel" aria-labelledby="table-tab">
+
     <?php
     $i = 1;
     if ($wapc_array) {
@@ -168,4 +206,6 @@
         echo '<div class="alert alert-danger" role="alert">' . __("Nothing found!") . '</div>';
     }
     ?>
+        </div>
+    </div>
 </div>

assets/js/sections/wapcmap.js

@@ -0,0 +1,183 @@
+let osmUrl = tileUrl;
+let provinces;
+let geojson;
+let map;
+let info;
+
+let confirmedColor = 'rgba(144,238,144)';
+if (typeof(user_map_custom.qsoconfirm) !== 'undefined') {
+      confirmedColor = user_map_custom.qsoconfirm.color;
+}
+let workedColor = 'rgba(229, 165, 10)';
+if (typeof(user_map_custom.qso) !== 'undefined') {
+      workedColor = user_map_custom.qso.color;
+}
+let unworkedColor = 'rgba(204, 55, 45)';
+if (typeof(user_map_custom.unworked) !== 'undefined') {
+   unworkedColor = user_map_custom.unworked.color;
+}
+
+function load_wapc_map() {
+    $('.nav-tabs a[href="#wapcmaptab"]').tab('show');
+    $.ajax({
+        url: base_url + 'index.php/awards/wapc_map',
+        type: 'post',
+        data: {
+            band: $('#band2').val(),
+            mode: $('#mode').val(),
+            worked: +$('#worked').prop('checked'),
+            confirmed: +$('#confirmed').prop('checked'),
+            notworked: +$('#notworked').prop('checked'),
+            qsl: +$('#qsl').prop('checked'),
+            lotw: +$('#lotw').prop('checked'),
+            eqsl: +$('#eqsl').prop('checked'),
+            qrz: +$('#qrz').prop('checked'),
+            clublog: +$('#clublog').prop('checked'),
+        },
+        success: function(data) {
+            provinces = data;
+            load_wapc_map2(data);
+        },
+        error: function() {
+
+        },
+    });
+}
+
+function load_wapc_map2(data) {
+    $.getJSON(base_url + 'assets/json/geojson/states_318.geojson', function(mapcoordinates) {
+        
+        var container = L.DomUtil.get('wapcmap');
+
+        if(container != null){
+            container._leaflet_id = null;
+            container.remove();
+            $("#wapcmaptab").append('<div id="wapcmap" class="map-leaflet"></div>');
+        }
+
+        map = new L.Map('wapcmap', {
+            fullscreenControl: true,
+            fullscreenControlOptions: {
+                position: 'topleft'
+            },
+        });
+
+        L.tileLayer(
+            osmUrl,
+            {
+                attribution: option_map_tile_server_copyright,
+                maxZoom: 18
+            }
+        ).addTo(map);
+
+        var notworked = mapcoordinates.features.length;
+        var confirmed = 0;
+        var workednotconfirmed = 0;
+
+        for(var k in data) {
+            var mapColor = unworkedColor;
+
+            if (data[k] == 'C') {
+                mapColor = confirmedColor;
+                confirmed++;
+                notworked--;
+            }
+            if (data[k] == 'W') {
+                mapColor = workedColor;
+                workednotconfirmed++;
+                notworked--;
+            }
+        }
+
+        var legend = L.control({ position: "topright" });
+
+        legend.onAdd = function(map) {
+            var div = L.DomUtil.create("div", "legend");
+            div.innerHTML += "<h4>" + lang_general_word_colors + "</h4>";
+            div.innerHTML += "<i style='background: " + confirmedColor + "'></i><span>" + lang_general_word_confirmed + " (" + confirmed + ")</span><br>";
+            div.innerHTML += "<i style='background: " + workedColor + "'></i><span>" + lang_general_word_worked_not_confirmed + " (" + workednotconfirmed + ")</span><br>";
+            div.innerHTML += "<i style='background: " + unworkedColor + "'></i><span>" + lang_general_word_not_worked + " (" + notworked + ")</span><br>";
+            return div;
+        };
+
+        legend.addTo(map);
+
+        info = L.control();
+
+        info.onAdd = function (map) {
+            this._div = L.DomUtil.create('div', 'info');
+            this.update();
+            return this._div;
+        };
+
+        info.update = function (props) {
+            this._div.innerHTML = '<h4>' + lang_china_province + '</h4>' +  (props ?
+                '<b>' + props.code + ' - ' + props.name + '</b><br />' : lang_hover_over_a_province);
+        };
+
+        info.addTo(map);
+
+        geojson = L.geoJson(mapcoordinates, {style: style, onEachFeature: onEachFeature}).addTo(map);
+
+        map.setView([35, 105], 4);
+
+        var layerControl = new L.Control.Layers(null, { [lang_general_gridsquares]: maidenhead = L.maidenhead() }).addTo(map);
+        maidenhead.addTo(map);
+
+    });
+}
+
+function getColor(d) {
+    return provinces[d] == 'C' ? confirmedColor :
+           provinces[d] == 'W' ? workedColor :
+           unworkedColor;
+}
+
+function highlightFeature(e) {
+    var layer = e.target;
+
+    layer.setStyle({
+        weight: 3,
+        color: 'white',
+        dashArray: '',
+        fillOpacity: 0.8
+    });
+
+    layer.bringToFront();
+    info.update(layer.feature.properties);
+}
+
+function onEachFeature(feature, layer) {
+    layer.on({
+        mouseover: highlightFeature,
+        mouseout: resetHighlight,
+        click: onClick
+    });
+}
+
+function zoomToFeature(e) {
+    map.fitBounds(e.target.getBounds());
+}
+
+function resetHighlight(e) {
+    geojson.resetStyle(e.target);
+    info.update();
+}
+
+function style(feature) {
+    return {
+        fillColor: getColor(feature.properties.code),
+        weight: 1,
+        opacity: 1,
+        color: 'white',
+        // dashArray: '3',
+        fillOpacity: 0.6
+    };
+}
+
+function onClick(e) {
+    zoomToFeature(e);
+    var marker = e.target;
+    var res = marker.feature.properties.code;
+    displayContactsOnMap($("#wapcmap"),res, $('#band2').val(), 'All', 'All', $('#mode').val(), 'WAPC');
+}