Add webpacker gem and migrate the React apps

6 files changed, 321 insertions, 0 deletions

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
new file mode 100644
index 000000000..54b106ee0
--- /dev/null
+++ b/app/javascript/packs/application.js
@@ -0,0 +1,10 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+console.log('Hello World from Webpacker')
diff --git a/app/javascript/packs/date_filters.js b/app/javascript/packs/date_filters.js
new file mode 100644
index 000000000..db58bd679
--- /dev/null
+++ b/app/javascript/packs/date_filters.js
@@ -0,0 +1 @@
+const DateFilter = require('../date_filters/index')
\ No newline at end of file
diff --git a/app/javascript/packs/journey_patterns/index.js b/app/javascript/packs/journey_patterns/index.js
new file mode 100644
index 000000000..fde28b45d
--- /dev/null
+++ b/app/javascript/packs/journey_patterns/index.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import journeyPatternsApp from '../../journey_patterns/reducers'
+import App from '../../journey_patterns/components/App'
+import clone from '../../helpers/clone'
+
+// logger, DO NOT REMOVE
+// var applyMiddleware = require('redux').applyMiddleware
+// var createLogger = require('redux-logger')
+// var thunkMiddleware = require('redux-thunk').default
+// var promise = require('redux-promise')
+
+var initialState = {
+  editMode: false,
+  status: {
+    policy: window.perms,
+    fetchSuccess: true,
+    isFetching: false
+  },
+  journeyPatterns: [],
+  stopPointsList: window.stopPoints,
+  pagination: {
+    page : 1,
+    totalCount: window.journeyPatternLength,
+    perPage: window.journeyPatternsPerPage,
+    stateChanged: false
+  },
+  modal: {
+    type: '',
+    modalProps: {},
+    confirmModal: {}
+  }
+}
+// const loggerMiddleware = createLogger()
+
+let store = createStore(
+  journeyPatternsApp,
+  initialState,
+  // applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
+)
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('journey_patterns')
+)
diff --git a/app/javascript/packs/routes/edit.js b/app/javascript/packs/routes/edit.js
new file mode 100644
index 000000000..810489353
--- /dev/null
+++ b/app/javascript/packs/routes/edit.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+
+import reducers from '../../routes/reducers'
+import App from '../../routes/components/App'
+import { handleForm, handleStopPoints } from '../../routes/form_helper'
+import clone from '../../helpers/clone'
+let datas = clone(window, "itinerary_stop", true)
+datas = JSON.parse(decodeURIComponent(datas))
+
+// logger, DO NOT REMOVE
+// var applyMiddleware = require('redux').applyMiddleware
+// var createLogger = require('redux-logger')
+// var thunkMiddleware = require('redux-thunk').default
+// var promise = require('redux-promise')
+
+const getInitialState = () => {
+  let state = []
+
+  datas.map(function (v, i) {
+    let fancyText = v.name.replace("&#39;", "\'")
+    if (v.zip_code && v.city_name)
+      fancyText += ", " + v.zip_code + " " + v.city_name.replace("&#39;", "\'")
+
+    state.push({
+      stoppoint_id: v.stoppoint_id,
+      stoparea_id: v.stoparea_id,
+      user_objectid: v.user_objectid,
+      short_name: v.short_name ? v.short_name.replace("&#39;", "\'") : '',
+      area_type: v.area_type,
+      index: i,
+      edit: false,
+      city_name: v.city_name ? v.city_name.replace("&#39;", "\'") : '',
+      zip_code: v.zip_code,
+      name: v.name ? v.name.replace("&#39;", "\'") : '',
+      registration_number: v.registration_number,
+      text: fancyText,
+      for_boarding: v.for_boarding || "normal",
+      for_alighting: v.for_alighting || "normal",
+      longitude: v.longitude || 0,
+      latitude: v.latitude || 0,
+      comment: v.comment ? v.comment.replace("&#39;", "\'") : '',
+      olMap: {
+        isOpened: false,
+        json: {}
+      }
+    })
+  })
+
+  return state
+}
+
+var initialState = { stopPoints: getInitialState() }
+// const loggerMiddleware = createLogger()
+let store = createStore(
+  reducers,
+  initialState
+  // applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
+)
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('stop_points')
+)
+
+document.querySelector('input[name=commit]').addEventListener('click', (event) => {
+  let state = store.getState()
+
+  let name = $("#route_name").val()
+  let publicName = $("#route_published_name").val()
+  if (name == "" || publicName == "") {
+    event.preventDefault()
+    handleForm("#route_name", "#route_published_name")
+  }
+
+  handleStopPoints(event, state)
+})
diff --git a/app/javascript/packs/routes/show.js b/app/javascript/packs/routes/show.js
new file mode 100644
index 000000000..7f14a6f11
--- /dev/null
+++ b/app/javascript/packs/routes/show.js
@@ -0,0 +1,102 @@
+import clone from '../../helpers/clone'
+let route = clone(window, "route", true)
+route = JSON.parse(decodeURIComponent(route))
+
+const geoColPts = []
+const geoColLns = []
+const geoColEdges = [
+  new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(route[0].longitude), parseFloat(route[0].latitude)]))
+  }),
+  new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(route[route.length - 1].longitude), parseFloat(route[route.length - 1].latitude)]))
+  })
+]
+route.forEach(function (stop, i) {
+  if (i < route.length - 1) {
+    geoColLns.push(new ol.Feature({
+      geometry: new ol.geom.LineString([
+        ol.proj.fromLonLat([parseFloat(route[i].longitude), parseFloat(route[i].latitude)]),
+        ol.proj.fromLonLat([parseFloat(route[i + 1].longitude), parseFloat(route[i + 1].latitude)])
+      ])
+    }))
+  }
+  geoColPts.push(new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(stop.longitude), parseFloat(stop.latitude)]))
+  })
+  )
+})
+var edgeStyles = new ol.style.Style({
+  image: new ol.style.Circle(({
+    radius: 5,
+    stroke: new ol.style.Stroke({
+      color: '#007fbb',
+      width: 2
+    }),
+    fill: new ol.style.Fill({
+      color: '#007fbb',
+      width: 2
+    })
+  }))
+})
+var defaultStyles = new ol.style.Style({
+  image: new ol.style.Circle(({
+    radius: 4,
+    stroke: new ol.style.Stroke({
+      color: '#007fbb',
+      width: 2
+    }),
+    fill: new ol.style.Fill({
+      color: '#ffffff',
+      width: 2
+    })
+  }))
+})
+var lineStyle = new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    color: '#007fbb',
+    width: 3
+  })
+})
+
+var vectorPtsLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: geoColPts
+  }),
+  style: defaultStyles,
+  zIndex: 2
+})
+var vectorEdgesLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: geoColEdges
+  }),
+  style: edgeStyles,
+  zIndex: 3
+})
+var vectorLnsLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: geoColLns
+  }),
+  style: [lineStyle],
+  zIndex: 1
+})
+
+var map = new ol.Map({
+  target: 'route_map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    }),
+    vectorPtsLayer,
+    vectorEdgesLayer,
+    vectorLnsLayer
+  ],
+  controls: [new ol.control.ScaleLine(), new ol.control.Zoom(), new ol.control.ZoomSlider()],
+  interactions: ol.interaction.defaults({
+    zoom: true
+  }),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([parseFloat(route[0].longitude), parseFloat(route[0].latitude)]),
+    zoom: 13
+  })
+});
diff --git a/app/javascript/packs/time_tables/edit.js b/app/javascript/packs/time_tables/edit.js
new file mode 100644
index 000000000..cf058d501
--- /dev/null
+++ b/app/javascript/packs/time_tables/edit.js
@@ -0,0 +1,77 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import timeTablesApp from '../../time_tables/reducers'
+import App from '../../time_tables/containers/App'
+import clone from '../../helpers/clone'
+
+const actionType = clone(window, "actionType", true)
+
+// logger, DO NOT REMOVE
+// var applyMiddleware = require('redux').applyMiddleware
+// var createLogger = require('redux-logger')
+// var thunkMiddleware = require('redux-thunk').default
+// var promise = require('redux-promise')
+
+let initialState = {
+  status: {
+    actionType: actionType,
+    policy: window.perms,
+    fetchSuccess: true,
+    isFetching: false
+  },
+  timetable: {
+    current_month: [],
+    current_periode_range: '',
+    periode_range: [],
+    time_table_periods: [],
+    time_table_dates: []
+  },
+  metas: {
+    comment: '',
+    day_types: [],
+    tags: [],
+    initial_tags: [],
+    color: '',
+    calendar: null
+  },
+  pagination: {
+    stateChanged: false,
+    currentPage: '',
+    periode_range: []
+  },
+  modal: {
+    type: '',
+    modalProps: {
+      active: false,
+      begin: {
+        day: '01',
+        month: '01',
+        year: String(new Date().getFullYear())
+      },
+      end: {
+        day: '01',
+        month: '01',
+        year: String(new Date().getFullYear())
+      },
+      index: false,
+      error: ''
+    },
+    confirmModal: {}
+  }
+}
+// const loggerMiddleware = createLogger()
+
+let store = createStore(
+  timeTablesApp,
+  initialState,
+  // applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
+)
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('periods')
+)