~ihabunek/triglav

9406672c50b9ea5d5636c1c3ca7e23921dbbd598 — Ivan Habunek 11 months ago 0266d54
Add leaflet.js
A assets/js/routes.js => assets/js/routes.js +11 -0
@@ 0,0 1,11 @@
import "leaflet/dist/leaflet.css"
import { Map, TileLayer } from "leaflet"

const map = new Map("routes-map").setView([45.8, 16], 10)

const tilesUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
const attribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
const tiles = new TileLayer(tilesUrl, { attribution })

tiles.addTo(map)


M assets/package-lock.json => assets/package-lock.json +51 -0
@@ 3229,6 3229,52 @@
      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
      "dev": true
    },
    "file-loader": {
      "version": "6.2.0",
      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
      "dev": true,
      "requires": {
        "loader-utils": "^2.0.0",
        "schema-utils": "^3.0.0"
      },
      "dependencies": {
        "ajv": {
          "version": "6.12.6",
          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
          "dev": true,
          "requires": {
            "fast-deep-equal": "^3.1.1",
            "fast-json-stable-stringify": "^2.0.0",
            "json-schema-traverse": "^0.4.1",
            "uri-js": "^4.2.2"
          }
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "schema-utils": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
          "dev": true,
          "requires": {
            "@types/json-schema": "^7.0.6",
            "ajv": "^6.12.5",
            "ajv-keywords": "^3.5.2"
          }
        }
      }
    },
    "fill-range": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",


@@ 4295,6 4341,11 @@
        "webpack-sources": "^1.1.0"
      }
    },
    "leaflet": {
      "version": "1.7.1",
      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
    },
    "leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",

M assets/package.json => assets/package.json +4 -2
@@ 7,6 7,7 @@
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "leaflet": "^1.7.1",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  },


@@ 16,11 17,12 @@
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "sass-loader": "^8.0.2",
    "node-sass": "^4.13.1",
    "file-loader": "^6.2.0",
    "hard-source-webpack-plugin": "^0.13.1",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^8.0.2",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "4.41.5",
    "webpack-cli": "^3.3.2"

M assets/webpack.config.js => assets/webpack.config.js +11 -2
@@ 17,7 17,8 @@ module.exports = (env, options) => {
      ]
    },
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
      'routes': ['./js/routes.js']
    },
    output: {
      filename: '[name].js',


@@ 41,11 42,19 @@ module.exports = (env, options) => {
            'css-loader',
            'sass-loader',
          ],
        },
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
    ]
    .concat(devMode ? [new HardSourceWebpackPlugin()] : [])

M lib/triglav_web/templates/zet/routes/detail.html.eex => lib/triglav_web/templates/zet/routes/detail.html.eex +15 -0
@@ 1,3 1,12 @@
<link rel="stylesheet" type="text/css" href="<%= Routes.static_path(@conn, "/css/routes.css") %>">

<style type="text/css">
  #routes-map {
    height: 600px;
    width: 100%;
  }
</style>

<main role="main" class="container-wide">
  <h1>#<%= @route.id %>: <%= @route.long_name %></h1>



@@ 46,6 55,10 @@
  <p>Routes extracted from GTFS data published by ZET.
  All distinct routes are shown along with the number of trips along this route. </p>

  <%= inspect(@stops) %>

  <div id="routes-map"></div>

  <%= for {direction_id, trips} <- @trips do %>
    <h3>Direction #<%= direction_id %></h3>



@@ 78,3 91,5 @@
    </div>
  <% end %>
</main>

<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/routes.js") %>"></script>