Portal

1trigger:
2- master
3
4pool:
5  vmImage: 'ubuntu-latest'
6
7variables:
8  project: 'myProjectName'
9  environment: 'prod'
10  dockerfile: '**/Dockerfile'
11  azureResource: 'myScraperFunction'
12  imageName: myScraperFunction
13
14steps:
15- task: Docker@2
16  displayName: Build
17  inputs:
18    command: build
19    containerRegistry: $(azureContainerRegistryName)
20    repository: '$(Build.Repository.Name)-$(project)'
21    tags: '$(Build.BuildNumber)-$(environment)'
22    Dockerfile: $(dockerfile)
23    buildContext: '$(Build.SourcesDirectory)'
24    arguments: --build-arg PAT=$(System.AccessToken)
25
26- task: Docker@2
27  displayName: Push
28  inputs:
29    command: push
30    containerRegistry: $(azureContainerRegistryName)
31    repository: '$(Build.Repository.Name)-$(project)'
32    tags: '$(Build.BuildNumber)-$(environment)'
33    Dockerfile: $(dockerfile)       
34
35- task: AzureFunctionAppContainer@1
36  displayName: 'Azure Function App on Container Deploy: $(azureResource)'
37  inputs:
38    azureSubscription: '$(azureSubscription)'
39    appName: $(azureResource)
40    imageName: '$(azureContainerRegistry)/$(imageName):$(Build.BuildNumber)-$(environment)'
41

1tcp        0      0 0.0.0.0:31600           0.0.0.0:*               LISTEN      16671/kube-proxy
2

1tcp        0      0 0.0.0.0:31600           0.0.0.0:*               LISTEN      16671/kube-proxy
2[opc@oke-cdvpd5qrofa-nyx7mjtqw4a-svceq4qaiwq-0 ~]$ sudo iptables -P FORWARD ACCEPT
3[opc@oke-cdvpd5qrofa-nyx7mjtqw4a-svceq4qaiwq-0 ~]$ sudo iptables -P INPUT ACCEPT
4[opc@oke-cdvpd5qrofa-nyx7mjtqw4a-svceq4qaiwq-0 ~]$ sudo iptables -P OUTPUT ACCEPT
5

1tcp        0      0 0.0.0.0:31600           0.0.0.0:*               LISTEN      16671/kube-proxy
2[opc@oke-cdvpd5qrofa-nyx7mjtqw4a-svceq4qaiwq-0 ~]$ sudo iptables -P FORWARD ACCEPT
3[opc@oke-cdvpd5qrofa-nyx7mjtqw4a-svceq4qaiwq-0 ~]$ sudo iptables -P INPUT ACCEPT
4[opc@oke-cdvpd5qrofa-nyx7mjtqw4a-svceq4qaiwq-0 ~]$ sudo iptables -P OUTPUT ACCEPT
5[opc@oke-cn44eyuqdoq-n3ewna4fqra-sx5p5dalkuq-1 ~]$ sudo iptables -L
6Chain INPUT (policy ACCEPT)
7target     prot opt source               destination
8KUBE-NODEPORTS  all  --  anywhere             anywhere             /* kubernetes health check service ports */
9KUBE-EXTERNAL-SERVICES  all  --  anywhere             anywhere             ctstate NEW /* kubernetes externally-visible service portals */
10KUBE-FIREWALL  all  --  anywhere             anywhere
11
12Chain FORWARD (policy ACCEPT)
13target     prot opt source               destination
14KUBE-FORWARD  all  --  anywhere             anywhere             /* kubernetes forwarding rules */
15KUBE-SERVICES  all  --  anywhere             anywhere             ctstate NEW /* kubernetes service portals */
16KUBE-EXTERNAL-SERVICES  all  --  anywhere             anywhere             ctstate NEW /* kubernetes externally-visible service portals */
17ACCEPT     all  --  10.244.0.0/16        anywhere
18ACCEPT     all  --  anywhere             10.244.0.0/16
19
20Chain OUTPUT (policy ACCEPT)
21target     prot opt source               destination
22KUBE-SERVICES  all  --  anywhere             anywhere             ctstate NEW /* kubernetes service portals */
23KUBE-FIREWALL  all  --  anywhere             anywhere
24
25Chain KUBE-EXTERNAL-SERVICES (2 references)
26target     prot opt source               destination
27
28Chain KUBE-FIREWALL (2 references)
29target     prot opt source               destination
30DROP       all  --  anywhere             anywhere             /* kubernetes firewall for dropping marked packets */ mark match 0x8000/0x8000
31DROP       all  -- !loopback/8           loopback/8           /* block incoming localnet connections */ ! ctstate RELATED,ESTABLISHED,DNAT
32
33Chain KUBE-FORWARD (1 references)
34target     prot opt source               destination
35DROP       all  --  anywhere             anywhere             ctstate INVALID
36ACCEPT     all  --  anywhere             anywhere             /* kubernetes forwarding rules */ mark match 0x4000/0x4000
37ACCEPT     all  --  anywhere             anywhere             /* kubernetes forwarding conntrack pod source rule */ ctstate RELATED,ESTABLISHED
38ACCEPT     all  --  anywhere             anywhere             /* kubernetes forwarding conntrack pod destination rule */ ctstate RELATED,ESTABLISHED
39
40Chain KUBE-KUBELET-CANARY (0 references)
41target     prot opt source               destination
42
43Chain KUBE-NODEPORTS (1 references)
44target     prot opt source               destination
45
46Chain KUBE-PROXY-CANARY (0 references)
47target     prot opt source               destination
48
49Chain KUBE-SERVICES (2 references)
50target     prot opt source               destination
51

1tcp        0      0 0.0.0.0:31600           0.0.0.0:*               LISTEN      16671/kube-proxy
2[opc@oke-cdvpd5qrofa-nyx7mjtqw4a-svceq4qaiwq-0 ~]$ sudo iptables -P FORWARD ACCEPT
3[opc@oke-cdvpd5qrofa-nyx7mjtqw4a-svceq4qaiwq-0 ~]$ sudo iptables -P INPUT ACCEPT
4[opc@oke-cdvpd5qrofa-nyx7mjtqw4a-svceq4qaiwq-0 ~]$ sudo iptables -P OUTPUT ACCEPT
5[opc@oke-cn44eyuqdoq-n3ewna4fqra-sx5p5dalkuq-1 ~]$ sudo iptables -L
6Chain INPUT (policy ACCEPT)
7target     prot opt source               destination
8KUBE-NODEPORTS  all  --  anywhere             anywhere             /* kubernetes health check service ports */
9KUBE-EXTERNAL-SERVICES  all  --  anywhere             anywhere             ctstate NEW /* kubernetes externally-visible service portals */
10KUBE-FIREWALL  all  --  anywhere             anywhere
11
12Chain FORWARD (policy ACCEPT)
13target     prot opt source               destination
14KUBE-FORWARD  all  --  anywhere             anywhere             /* kubernetes forwarding rules */
15KUBE-SERVICES  all  --  anywhere             anywhere             ctstate NEW /* kubernetes service portals */
16KUBE-EXTERNAL-SERVICES  all  --  anywhere             anywhere             ctstate NEW /* kubernetes externally-visible service portals */
17ACCEPT     all  --  10.244.0.0/16        anywhere
18ACCEPT     all  --  anywhere             10.244.0.0/16
19
20Chain OUTPUT (policy ACCEPT)
21target     prot opt source               destination
22KUBE-SERVICES  all  --  anywhere             anywhere             ctstate NEW /* kubernetes service portals */
23KUBE-FIREWALL  all  --  anywhere             anywhere
24
25Chain KUBE-EXTERNAL-SERVICES (2 references)
26target     prot opt source               destination
27
28Chain KUBE-FIREWALL (2 references)
29target     prot opt source               destination
30DROP       all  --  anywhere             anywhere             /* kubernetes firewall for dropping marked packets */ mark match 0x8000/0x8000
31DROP       all  -- !loopback/8           loopback/8           /* block incoming localnet connections */ ! ctstate RELATED,ESTABLISHED,DNAT
32
33Chain KUBE-FORWARD (1 references)
34target     prot opt source               destination
35DROP       all  --  anywhere             anywhere             ctstate INVALID
36ACCEPT     all  --  anywhere             anywhere             /* kubernetes forwarding rules */ mark match 0x4000/0x4000
37ACCEPT     all  --  anywhere             anywhere             /* kubernetes forwarding conntrack pod source rule */ ctstate RELATED,ESTABLISHED
38ACCEPT     all  --  anywhere             anywhere             /* kubernetes forwarding conntrack pod destination rule */ ctstate RELATED,ESTABLISHED
39
40Chain KUBE-KUBELET-CANARY (0 references)
41target     prot opt source               destination
42
43Chain KUBE-NODEPORTS (1 references)
44target     prot opt source               destination
45
46Chain KUBE-PROXY-CANARY (0 references)
47target     prot opt source               destination
48
49Chain KUBE-SERVICES (2 references)
50target     prot opt source               destination
51{
52    "apiVersion": "v1",
53    "kind": "Service",
54    "metadata": {
55        "creationTimestamp": "2022-01-28T09:13:33Z",
56        "name": "web-staging-service",
57        "namespace": "web-staging",
58        "resourceVersion": "22542",
59        "uid": "c092f99b-7c72-4c32-bf27-ccfa1fe92a79"
60    },
61    "spec": {
62        "clusterIP": "10.96.99.112",
63        "clusterIPs": [
64            "10.96.99.112"
65        ],
66        "externalTrafficPolicy": "Cluster",
67        "ipFamilies": [
68            "IPv4"
69        ],
70        "ipFamilyPolicy": "SingleStack",
71        "ports": [
72            {
73                "nodePort": 31600,
74                "port": 3000,
75                "protocol": "TCP",
76                "targetPort": 3000
77            }
78        ],
79        "selector": {
80            "app": "frontend"
81        },
82        "sessionAffinity": "None",
83        "type": "NodePort"
84    },
85    "status": {
86        "loadBalancer": {}
87    }
88}
89

1{
2    "code": 401,
3    "message": "IDX10214: Audience validation failed. Audiences: 'System.String'. Did not match: validationParameters.ValidAudience: 'System.String' or validationParameters.ValidAudiences: 'System.String'."
4}
5

1resource "azurerm_application_gateway" "appgw" {
2  name                = "my-appgw"
3  location            = "australiaeast"
4  resource_group_name = "my-rg"
5  
6  http_listener {
7    protocol                       = "https"
8    ssl_certificate_name           = "appgw-listener-cert"
9    ...
10  }
11
12  identity {
13    type         = "UserAssigned"
14    identity_ids = [azurerm_user_assigned_identity.appgw_uaid.id]
15  }
16
17  ssl_certificate {
18    key_vault_secret_id = azurerm_key_vault_certificate.ssl_cert.secret_id
19    name                = "appgw-listener-cert"
20  }
21
22  ...
23}
24
25resource "azurerm_key_vault" "kv" {
26  name                       = "my-kv"
27  location                   = "australiaeast"
28  resource_group_name        = "my-rg"
29  ...
30  access_policy {
31    object_id    = data.azurerm_client_config.current.object_id
32    tenant_id    = data.azurerm_client_config.current.tenant_id
33
34    certificate_permissions = [
35      "Create",
36      "Delete",
37      "DeleteIssuers",
38      "Get",
39      "GetIssuers",
40      "Import",
41      "List",
42      "ListIssuers",
43      "ManageContacts",
44      "ManageIssuers",
45      "Purge",
46      "SetIssuers",
47      "Update"
48    ]
49
50    key_permissions = [
51      "Backup",
52      "Create",
53      "Decrypt",
54      "Delete",
55      "Encrypt",
56      "Get",
57      "Import",
58      "List",
59      "Purge",
60      "Recover",
61      "Restore",
62      "Sign",
63      "UnwrapKey",
64      "Update",
65      "Verify",
66      "WrapKey"
67    ]
68
69    secret_permissions = [
70      "Backup",
71      "Delete",
72      "Get",
73      "List",
74      "Purge",
75      "Restore",
76      "Restore",
77      "Set"
78    ]
79  }
80
81  access_policy {
82    object_id    = azurerm_user_assigned_identity.uaid_appgw.principal_id
83    tenant_id    = data.azurerm_client_config.current.tenant_id
84
85    secret_permissions = [
86      "Get"
87    ]
88  }
89}
90
91resource "azurerm_key_vault_certificate" "ssl_cert" {
92  name         = "my-ssl-cert"
93  key_vault_id = azurerm_key_vault.kv.id
94
95  certificate {
96    # These are stored as sensitive variables in Terraform Cloud
97    # ssl_cert_b64 value was retrieved by: $ cat my-ssl-cert.pfx | base64 > o.txt
98    contents = var.ssl_cert_b64
99    password = var.ssl_cert_passwd
100  }
101
102  certificate_policy {
103    issuer_parameters {
104      name = "Unknown"
105    }
106
107    key_properties {
108      exportable = false
109      key_size   = 2048
110      key_type   = "RSA"
111      reuse_key  = false
112    }
113
114    secret_properties {
115      content_type = "application/x-pkcs12"
116    }
117  }
118}
119

1//loadform.js
2function onSelectReportType(ele) {
3  var form = $(ele).parent().parent();
4  var label = $(form).find(".additional_msg");
5  var select = $(form).find(".additional_msg_select");
6
7  switch (ele.value) {
8    case "donation":
9    case "request":
10      label.text("Resource Type:");
11      select.find('option').remove();
12      select.append($("<option></option>")
13        .attr("value", "")
14        .text("Choose the resource type"));
15      selectValues = ['water', 'food', 'money', 'medicine', 'cloth',
16        'rescue/volunteer'
17      ];
18      $.each(selectValues, function(index, value) {
19        select.append($("<option></option>")
20          .attr("value", value)
21          .text(value));
22      });
23      break;
24    case "damage":
25      label.text("Damage Type:");
26      select.find('option').remove();
27      select.append($("<option></option>")
28        .attr("value", "")
29        .text("Choose the damage type"));
30      selectValues = ['polution', 'building damage', 'road damage', 'casualty',
31        'other'
32      ];
33      $.each(selectValues, function(index, value) {
34        select.append($("<option></option>")
35          .attr("value", value)
36          .text(value));
37      });
38      break;
39    default:
40      $(form).find(".additional_msg_div").css("visibility", "hidden");
41      return;
42  }
43  $(form).find(".additional_msg_div").css("visibility", "visible");
44
45
46  //loadmap.js
47  var map;
48  var infowindow = new google.maps.InfoWindow();
49
50  function initialization() {
51    showAllReports();
52  }
53
54  function showAllReports() {
55    $.ajax({
56      url: 'HttpServlet',
57      type: 'POST',
58      data: {
59        "tab_id": "1"
60      },
61      success: function(reports) {
62        mapInitialization(reports);
63      },
64      error: function(xhr, status, error) {
65        alert("An AJAX error occured: " + status + "\nError: " + error);
66      }
67    });
68  }
69
70  function mapInitialization(reports) {
71    var mapOptions = {
72      mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
73    };
74
75    // Render the map within the empty div
76    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
77
78    var bounds = new google.maps.LatLngBounds();
79
80    $.each(reports, function(i, e) {
81      var long = Number(e['longitude']);
82      var lat = Number(e['latitude']);
83      var latlng = new google.maps.LatLng(lat, long);
84
85      bounds.extend(latlng);
86
87      // Create the infoWindow content
88      var contentStr = '<h4>Report Details</h4><hr>';
89      contentStr += '<p><b>' + 'Disaster' + ':</b>&nbsp' + e['disaster'] + '</p>';
90      contentStr += '<p><b>' + 'Report Type' + ':</b>&nbsp' + e['report_type'] +
91        '</p>';
92      if (e['report_type'] == 'request' || e['report_type'] == 'donation') {
93        contentStr += '<p><b>' + 'Resource Type' + ':</b>&nbsp' +
94          e['resource_type'] + '</p>';
95      } else if (e['report_type'] == 'damage') {
96        contentStr += '<p><b>' + 'Damage Type' + ':</b>&nbsp' + e['damage_type'] +
97          '</p>';
98      }
99      contentStr += '<p><b>' + 'Timestamp' + ':</b>&nbsp' +
100        e['time_stamp'].substring(0, 19) + '</p>';
101      if ('message' in e) {
102        contentStr += '<p><b>' + 'Message' + ':</b>&nbsp' + e['message'] + '</p>';
103      }
104
105      // Create the marker
106      var marker = new google.maps.Marker({ // Set the marker
107        position: latlng, // Position marker to coordinates
108        map: map, // assign the market to our map variable
109        customInfo: contentStr,
110      });
111
112      // Add a Click Listener to the marker
113      google.maps.event.addEventListener(marker, 'click', function() {
114        // use 'customInfo' to customize infoWindow
115        infowindow.setContent(marker['customInfo']);
116        infowindow.open(map, marker); // Open InfoWindow
117      });
118
119    });
120
121    map.fitBounds(bounds);
122
123  }
124
125
126  //Execute our 'initialization' function once the page has loaded.
127  google.maps.event.addDomListener(window, 'load', initialization);

1//loadform.js
2function onSelectReportType(ele) {
3  var form = $(ele).parent().parent();
4  var label = $(form).find(".additional_msg");
5  var select = $(form).find(".additional_msg_select");
6
7  switch (ele.value) {
8    case "donation":
9    case "request":
10      label.text("Resource Type:");
11      select.find('option').remove();
12      select.append($("<option></option>")
13        .attr("value", "")
14        .text("Choose the resource type"));
15      selectValues = ['water', 'food', 'money', 'medicine', 'cloth',
16        'rescue/volunteer'
17      ];
18      $.each(selectValues, function(index, value) {
19        select.append($("<option></option>")
20          .attr("value", value)
21          .text(value));
22      });
23      break;
24    case "damage":
25      label.text("Damage Type:");
26      select.find('option').remove();
27      select.append($("<option></option>")
28        .attr("value", "")
29        .text("Choose the damage type"));
30      selectValues = ['polution', 'building damage', 'road damage', 'casualty',
31        'other'
32      ];
33      $.each(selectValues, function(index, value) {
34        select.append($("<option></option>")
35          .attr("value", value)
36          .text(value));
37      });
38      break;
39    default:
40      $(form).find(".additional_msg_div").css("visibility", "hidden");
41      return;
42  }
43  $(form).find(".additional_msg_div").css("visibility", "visible");
44
45
46  //loadmap.js
47  var map;
48  var infowindow = new google.maps.InfoWindow();
49
50  function initialization() {
51    showAllReports();
52  }
53
54  function showAllReports() {
55    $.ajax({
56      url: 'HttpServlet',
57      type: 'POST',
58      data: {
59        "tab_id": "1"
60      },
61      success: function(reports) {
62        mapInitialization(reports);
63      },
64      error: function(xhr, status, error) {
65        alert("An AJAX error occured: " + status + "\nError: " + error);
66      }
67    });
68  }
69
70  function mapInitialization(reports) {
71    var mapOptions = {
72      mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
73    };
74
75    // Render the map within the empty div
76    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
77
78    var bounds = new google.maps.LatLngBounds();
79
80    $.each(reports, function(i, e) {
81      var long = Number(e['longitude']);
82      var lat = Number(e['latitude']);
83      var latlng = new google.maps.LatLng(lat, long);
84
85      bounds.extend(latlng);
86
87      // Create the infoWindow content
88      var contentStr = '<h4>Report Details</h4><hr>';
89      contentStr += '<p><b>' + 'Disaster' + ':</b>&nbsp' + e['disaster'] + '</p>';
90      contentStr += '<p><b>' + 'Report Type' + ':</b>&nbsp' + e['report_type'] +
91        '</p>';
92      if (e['report_type'] == 'request' || e['report_type'] == 'donation') {
93        contentStr += '<p><b>' + 'Resource Type' + ':</b>&nbsp' +
94          e['resource_type'] + '</p>';
95      } else if (e['report_type'] == 'damage') {
96        contentStr += '<p><b>' + 'Damage Type' + ':</b>&nbsp' + e['damage_type'] +
97          '</p>';
98      }
99      contentStr += '<p><b>' + 'Timestamp' + ':</b>&nbsp' +
100        e['time_stamp'].substring(0, 19) + '</p>';
101      if ('message' in e) {
102        contentStr += '<p><b>' + 'Message' + ':</b>&nbsp' + e['message'] + '</p>';
103      }
104
105      // Create the marker
106      var marker = new google.maps.Marker({ // Set the marker
107        position: latlng, // Position marker to coordinates
108        map: map, // assign the market to our map variable
109        customInfo: contentStr,
110      });
111
112      // Add a Click Listener to the marker
113      google.maps.event.addEventListener(marker, 'click', function() {
114        // use 'customInfo' to customize infoWindow
115        infowindow.setContent(marker['customInfo']);
116        infowindow.open(map, marker); // Open InfoWindow
117      });
118
119    });
120
121    map.fitBounds(bounds);
122
123  }
124
125
126  //Execute our 'initialization' function once the page has loaded.
127  google.maps.event.addDomListener(window, 'load', initialization);html,
128body {
129  background-color: #f5f5f5;
130}
131
132body {
133  padding-top: 50px;
134}
135
136.container-fluid,
137.row {
138  background-color: #f5f5f5;
139}
140
141.sidebar {
142  padding: 12px;
143  background-color: #f5f5f5;
144}
145
146form {
147  padding-top: 12px;
148}
149
150#map-canvas {
151  height: 100%;
152  position: absolute;
153  right: 0;
154}

1//loadform.js
2function onSelectReportType(ele) {
3  var form = $(ele).parent().parent();
4  var label = $(form).find(".additional_msg");
5  var select = $(form).find(".additional_msg_select");
6
7  switch (ele.value) {
8    case "donation":
9    case "request":
10      label.text("Resource Type:");
11      select.find('option').remove();
12      select.append($("<option></option>")
13        .attr("value", "")
14        .text("Choose the resource type"));
15      selectValues = ['water', 'food', 'money', 'medicine', 'cloth',
16        'rescue/volunteer'
17      ];
18      $.each(selectValues, function(index, value) {
19        select.append($("<option></option>")
20          .attr("value", value)
21          .text(value));
22      });
23      break;
24    case "damage":
25      label.text("Damage Type:");
26      select.find('option').remove();
27      select.append($("<option></option>")
28        .attr("value", "")
29        .text("Choose the damage type"));
30      selectValues = ['polution', 'building damage', 'road damage', 'casualty',
31        'other'
32      ];
33      $.each(selectValues, function(index, value) {
34        select.append($("<option></option>")
35          .attr("value", value)
36          .text(value));
37      });
38      break;
39    default:
40      $(form).find(".additional_msg_div").css("visibility", "hidden");
41      return;
42  }
43  $(form).find(".additional_msg_div").css("visibility", "visible");
44
45
46  //loadmap.js
47  var map;
48  var infowindow = new google.maps.InfoWindow();
49
50  function initialization() {
51    showAllReports();
52  }
53
54  function showAllReports() {
55    $.ajax({
56      url: 'HttpServlet',
57      type: 'POST',
58      data: {
59        "tab_id": "1"
60      },
61      success: function(reports) {
62        mapInitialization(reports);
63      },
64      error: function(xhr, status, error) {
65        alert("An AJAX error occured: " + status + "\nError: " + error);
66      }
67    });
68  }
69
70  function mapInitialization(reports) {
71    var mapOptions = {
72      mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
73    };
74
75    // Render the map within the empty div
76    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
77
78    var bounds = new google.maps.LatLngBounds();
79
80    $.each(reports, function(i, e) {
81      var long = Number(e['longitude']);
82      var lat = Number(e['latitude']);
83      var latlng = new google.maps.LatLng(lat, long);
84
85      bounds.extend(latlng);
86
87      // Create the infoWindow content
88      var contentStr = '<h4>Report Details</h4><hr>';
89      contentStr += '<p><b>' + 'Disaster' + ':</b>&nbsp' + e['disaster'] + '</p>';
90      contentStr += '<p><b>' + 'Report Type' + ':</b>&nbsp' + e['report_type'] +
91        '</p>';
92      if (e['report_type'] == 'request' || e['report_type'] == 'donation') {
93        contentStr += '<p><b>' + 'Resource Type' + ':</b>&nbsp' +
94          e['resource_type'] + '</p>';
95      } else if (e['report_type'] == 'damage') {
96        contentStr += '<p><b>' + 'Damage Type' + ':</b>&nbsp' + e['damage_type'] +
97          '</p>';
98      }
99      contentStr += '<p><b>' + 'Timestamp' + ':</b>&nbsp' +
100        e['time_stamp'].substring(0, 19) + '</p>';
101      if ('message' in e) {
102        contentStr += '<p><b>' + 'Message' + ':</b>&nbsp' + e['message'] + '</p>';
103      }
104
105      // Create the marker
106      var marker = new google.maps.Marker({ // Set the marker
107        position: latlng, // Position marker to coordinates
108        map: map, // assign the market to our map variable
109        customInfo: contentStr,
110      });
111
112      // Add a Click Listener to the marker
113      google.maps.event.addEventListener(marker, 'click', function() {
114        // use 'customInfo' to customize infoWindow
115        infowindow.setContent(marker['customInfo']);
116        infowindow.open(map, marker); // Open InfoWindow
117      });
118
119    });
120
121    map.fitBounds(bounds);
122
123  }
124
125
126  //Execute our 'initialization' function once the page has loaded.
127  google.maps.event.addDomListener(window, 'load', initialization);html,
128body {
129  background-color: #f5f5f5;
130}
131
132body {
133  padding-top: 50px;
134}
135
136.container-fluid,
137.row {
138  background-color: #f5f5f5;
139}
140
141.sidebar {
142  padding: 12px;
143  background-color: #f5f5f5;
144}
145
146form {
147  padding-top: 12px;
148}
149
150#map-canvas {
151  height: 100%;
152  position: absolute;
153  right: 0;
154}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
155<html>
156
157<head>
158  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
159  <title>Web Project</title>
160
161  <!-- Custom styles -->
162  <link rel="stylesheet" href="css/style.css">
163
164  <!-- jQuery -->
165  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
166  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
167
168  <!-- Bootstrap -->
169  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
170  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
171
172  <!-- Google Map js libraries -->
173  <script src="https://maps.googleapis.com/maps/api/js?&key=MY_API_KEY&libraries=places,visualization"></script>
174</head>
175
176<body>
177  <nav class="navbar navbar-inverse navbar-fixed-top">
178    <a class="navbar-brand">Disaster Management Portal</a>
179  </nav>
180
181  <div class="container-fluid">
182    <div class="row">
183      <div class="sidebar col-xs-3">
184
185        <!-- Tab Navis-->
186        <ul class="nav nav-tabs">
187          <li class="active"><a href="#create_report" data-toggle="tab">Create Report</a></li>
188          <li><a href="#query_report" data-toggle="tab">Query</a></li>
189        </ul>
190
191        <!-- Tab panes -->
192        <div class="tab-content ">
193          <!-- Create Report Tab Panel -->
194          <div class="tab-pane active" id="create_report">
195            <form id="create_report_form">
196              <div><label>First Name:&nbsp</label><input placeholder="Your first name" name="fN"></div>
197              <div><label>Last Name:&nbsp</label><input placeholder="Your last name" name="lN"></div>
198              <div>
199                <label><input type="radio" name="is_male" value="t">&nbspMale</label>
200                <label><input type="radio" name="is_male" value="f">&nbspFemale</label>
201              </div>
202              <div><label>Age:&nbsp</label><input placeholder="Your age" name="age"></div>
203              <div><label>Blood Type:</label>
204                <select name="blood_type">
205                  <option value="">Choose your blood type</option>
206                  <option value="A">A</option>
207                  <option value="B">B</option>
208                  <option value="O">O</option>
209                  <option value="AB">AB</option>
210                  <option value="Other">Other</option>
211                </select>
212              </div>
213              <div><label>Tel:&nbsp</label><input placeholder="Your telephone number" name="tel"></div>
214              <div><label>Email:&nbsp</label><input placeholder="Your email address" name="email"></div>
215              <div><label>Contact's First Name:&nbsp</label><input placeholder="Contact's first name" name="contact_fN"></div>
216              <div><label>Contact's Last Name:&nbsp</label><input placeholder="Contact's last name" name="contact_lN"></div>
217              <div><label>Contact's Tel:&nbsp</label><input placeholder="Contact's telephone number" name="contact_tel"></div>
218              <div><label>Contact's Email:&nbsp</label><input placeholder="Contact's email address" name="contact_email"></div>
219              <div><label>Report Type:</label>
220                <select onchange="onSelectReportType(this)" name="report_type">
221                  <option value="">Choose the report type</option>
222                  <option value="donation">Donation</option>
223                  <option value="request">Request</option>
224                  <option value="damage">Damage Report</option>
225                </select>
226              </div>
227              <div class="additional_msg_div" style="visibility: hidden"><label class="additional_msg"></label>
228                <select class="additional_msg_select" name="additional_message"></select>
229              </div>
230              <div><label>Disaster Type:</label>
231                <select name="disaster_type">
232                  <option value="">Choose the disaster type</option>
233                  <option value="flood">flood</option>
234                  <option value="wildfire">wildfire</option>
235                  <option value="earthquake">earthquake</option>
236                  <option value="tornado">tornado</option>
237                  <option value="hurricane">hurricane</option>
238                  <option value="other">other</option>
239                </select>
240              </div>
241              <div><label>Address:</label>
242                <input id="autocomplete" placeholder="Address">
243              </div>
244              <div><label>Comment:&nbsp</label><input placeholder="Additional message" name="message"></div>
245              <button type="submit" class="btn btn-default" id="report_submit_btn">
246                            <span class="glyphicon glyphicon-star"></span> Submit
247                        </button>
248            </form>
249          </div>
250
251          <!-- Query Report Tab Panel -->
252          <div class="tab-pane" id="query_report">
253            <form id="query_report_form">
254              <div><label>Report Type:</label>
255                <select onchange="onSelectReportType(this)" name="report_type">
256                  <option value="">Choose the report type</option>
257                  <option value="donation">Donation</option>
258                  <option value="request">Request</option>
259                  <option value="damage">Damage Report</option>
260                </select>
261              </div>
262              <div class="additional_msg_div" style="visibility: hidden"><label class="additional_msg"></label>
263                <select class="additional_msg_select" name="resource_or_damage"></select>
264              </div>
265              <div><label>Disaster Type:</label>
266                <select name="disaster_type">
267                  <option value="">Choose the disaster type</option>
268                  <option value="flood">flood</option>
269                  <option value="wildfire">wildfire</option>
270                  <option value="earthquake">earthquake</option>
271                  <option value="tornado">tornado</option>
272                  <option value="hurricane">hurricane</option>
273                  <option value="other">other</option>
274                </select>
275              </div>
276              <button type="submit" class="btn btn-default">
277                            <span class="glyphicon glyphicon-star"></span> Submit the query
278                        </button>
279            </form>
280          </div>
281        </div>
282      </div>
283
284      <div id="map-canvas" class="col-xs-9"></div>
285
286    </div>
287  </div>
288</body>
289
290</html>