Browse Source

Initial commit

Lucas Verney 3 years ago
commit
d4a0c960a3

+ 14
- 0
.babelrc View File

@@ -0,0 +1,14 @@
1
+{
2
+  "presets": [
3
+    ["env", {
4
+      "modules": false
5
+    }],
6
+    "stage-2"
7
+  ],
8
+  "plugins": ["transform-runtime"],
9
+  "env": {
10
+    "test": {
11
+      "presets": ["env", "stage-2"]
12
+    }
13
+  }
14
+}

+ 9
- 0
.editorconfig View File

@@ -0,0 +1,9 @@
1
+root = true
2
+
3
+[*]
4
+charset = utf-8
5
+indent_style = space
6
+indent_size = 2
7
+end_of_line = lf
8
+insert_final_newline = true
9
+trim_trailing_whitespace = true

+ 5
- 0
.eslintignore View File

@@ -0,0 +1,5 @@
1
+/build/
2
+/config/
3
+/dist/
4
+/*.js
5
+/test/unit/coverage/

+ 25
- 0
.eslintrc.js View File

@@ -0,0 +1,25 @@
1
+// https://eslint.org/docs/user-guide/configuring
2
+
3
+module.exports = {
4
+  root: true,
5
+  parser: 'babel-eslint',
6
+  parserOptions: {
7
+    sourceType: 'module'
8
+  },
9
+  env: {
10
+    browser: true,
11
+  },
12
+  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
13
+  extends: 'standard',
14
+  // required to lint *.vue files
15
+  plugins: [
16
+    'html'
17
+  ],
18
+  // add your custom rules here
19
+  rules: {
20
+    // allow async-await
21
+    'generator-star-spacing': 'off',
22
+    // allow debugger during development
23
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
24
+  }
25
+}

+ 16
- 0
.gitignore View File

@@ -0,0 +1,16 @@
1
+.DS_Store
2
+node_modules/
3
+/dist/
4
+npm-debug.log*
5
+yarn-debug.log*
6
+yarn-error.log*
7
+/test/unit/coverage/
8
+package-lock.json
9
+
10
+# Editor directories and files
11
+.idea
12
+.vscode
13
+*.suo
14
+*.ntvs*
15
+*.njsproj
16
+*.sln

+ 9
- 0
.postcssrc.js View File

@@ -0,0 +1,9 @@
1
+// https://github.com/michael-ciniawsky/postcss-load-config
2
+
3
+module.exports = {
4
+  "plugins": {
5
+    // to edit target browsers: use "browserslist" field in package.json
6
+    "postcss-import": {},
7
+    "autoprefixer": {}
8
+  }
9
+}

+ 27
- 0
README.md View File

@@ -0,0 +1,27 @@
1
+# flatisfy-ui
2
+
3
+> A Vue.js project
4
+
5
+## Build Setup
6
+
7
+``` bash
8
+# install dependencies
9
+npm install
10
+
11
+# serve with hot reload at localhost:8080
12
+npm run dev
13
+
14
+# build for production with minification
15
+npm run build
16
+
17
+# build for production and view the bundle analyzer report
18
+npm run build --report
19
+
20
+# run unit tests
21
+npm run unit
22
+
23
+# run all tests
24
+npm test
25
+```
26
+
27
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

+ 41
- 0
build/build.js View File

@@ -0,0 +1,41 @@
1
+'use strict'
2
+require('./check-versions')()
3
+
4
+process.env.NODE_ENV = 'production'
5
+
6
+const ora = require('ora')
7
+const rm = require('rimraf')
8
+const path = require('path')
9
+const chalk = require('chalk')
10
+const webpack = require('webpack')
11
+const config = require('../config')
12
+const webpackConfig = require('./webpack.prod.conf')
13
+
14
+const spinner = ora('building for production...')
15
+spinner.start()
16
+
17
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18
+  if (err) throw err
19
+  webpack(webpackConfig, (err, stats) => {
20
+    spinner.stop()
21
+    if (err) throw err
22
+    process.stdout.write(stats.toString({
23
+      colors: true,
24
+      modules: false,
25
+      children: false,
26
+      chunks: false,
27
+      chunkModules: false
28
+    }) + '\n\n')
29
+
30
+    if (stats.hasErrors()) {
31
+      console.log(chalk.red('  Build failed with errors.\n'))
32
+      process.exit(1)
33
+    }
34
+
35
+    console.log(chalk.cyan('  Build complete.\n'))
36
+    console.log(chalk.yellow(
37
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
38
+      '  Opening index.html over file:// won\'t work.\n'
39
+    ))
40
+  })
41
+})

+ 54
- 0
build/check-versions.js View File

@@ -0,0 +1,54 @@
1
+'use strict'
2
+const chalk = require('chalk')
3
+const semver = require('semver')
4
+const packageConfig = require('../package.json')
5
+const shell = require('shelljs')
6
+
7
+function exec (cmd) {
8
+  return require('child_process').execSync(cmd).toString().trim()
9
+}
10
+
11
+const versionRequirements = [
12
+  {
13
+    name: 'node',
14
+    currentVersion: semver.clean(process.version),
15
+    versionRequirement: packageConfig.engines.node
16
+  }
17
+]
18
+
19
+if (shell.which('npm')) {
20
+  versionRequirements.push({
21
+    name: 'npm',
22
+    currentVersion: exec('npm --version'),
23
+    versionRequirement: packageConfig.engines.npm
24
+  })
25
+}
26
+
27
+module.exports = function () {
28
+  const warnings = []
29
+
30
+  for (let i = 0; i < versionRequirements.length; i++) {
31
+    const mod = versionRequirements[i]
32
+
33
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34
+      warnings.push(mod.name + ': ' +
35
+        chalk.red(mod.currentVersion) + ' should be ' +
36
+        chalk.green(mod.versionRequirement)
37
+      )
38
+    }
39
+  }
40
+
41
+  if (warnings.length) {
42
+    console.log('')
43
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
44
+    console.log()
45
+
46
+    for (let i = 0; i < warnings.length; i++) {
47
+      const warning = warnings[i]
48
+      console.log('  ' + warning)
49
+    }
50
+
51
+    console.log()
52
+    process.exit(1)
53
+  }
54
+}

BIN
build/logo.png View File


+ 101
- 0
build/utils.js View File

@@ -0,0 +1,101 @@
1
+'use strict'
2
+const path = require('path')
3
+const config = require('../config')
4
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
5
+const packageConfig = require('../package.json')
6
+
7
+exports.assetsPath = function (_path) {
8
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
9
+    ? config.build.assetsSubDirectory
10
+    : config.dev.assetsSubDirectory
11
+
12
+  return path.posix.join(assetsSubDirectory, _path)
13
+}
14
+
15
+exports.cssLoaders = function (options) {
16
+  options = options || {}
17
+
18
+  const cssLoader = {
19
+    loader: 'css-loader',
20
+    options: {
21
+      sourceMap: options.sourceMap
22
+    }
23
+  }
24
+
25
+  const postcssLoader = {
26
+    loader: 'postcss-loader',
27
+    options: {
28
+      sourceMap: options.sourceMap
29
+    }
30
+  }
31
+
32
+  // generate loader string to be used with extract text plugin
33
+  function generateLoaders (loader, loaderOptions) {
34
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
35
+
36
+    if (loader) {
37
+      loaders.push({
38
+        loader: loader + '-loader',
39
+        options: Object.assign({}, loaderOptions, {
40
+          sourceMap: options.sourceMap
41
+        })
42
+      })
43
+    }
44
+
45
+    // Extract CSS when that option is specified
46
+    // (which is the case during production build)
47
+    if (options.extract) {
48
+      return ExtractTextPlugin.extract({
49
+        use: loaders,
50
+        fallback: 'vue-style-loader'
51
+      })
52
+    } else {
53
+      return ['vue-style-loader'].concat(loaders)
54
+    }
55
+  }
56
+
57
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
58
+  return {
59
+    css: generateLoaders(),
60
+    postcss: generateLoaders(),
61
+    less: generateLoaders('less'),
62
+    sass: generateLoaders('sass', { indentedSyntax: true }),
63
+    scss: generateLoaders('sass'),
64
+    stylus: generateLoaders('stylus'),
65
+    styl: generateLoaders('stylus')
66
+  }
67
+}
68
+
69
+// Generate loaders for standalone style files (outside of .vue)
70
+exports.styleLoaders = function (options) {
71
+  const output = []
72
+  const loaders = exports.cssLoaders(options)
73
+
74
+  for (const extension in loaders) {
75
+    const loader = loaders[extension]
76
+    output.push({
77
+      test: new RegExp('\\.' + extension + '$'),
78
+      use: loader
79
+    })
80
+  }
81
+
82
+  return output
83
+}
84
+
85
+exports.createNotifierCallback = () => {
86
+  const notifier = require('node-notifier')
87
+
88
+  return (severity, errors) => {
89
+    if (severity !== 'error') return
90
+
91
+    const error = errors[0]
92
+    const filename = error.file && error.file.split('!').pop()
93
+
94
+    notifier.notify({
95
+      title: packageConfig.name,
96
+      message: severity + ': ' + error.name,
97
+      subtitle: filename || '',
98
+      icon: path.join(__dirname, 'logo.png')
99
+    })
100
+  }
101
+}

+ 22
- 0
build/vue-loader.conf.js View File

@@ -0,0 +1,22 @@
1
+'use strict'
2
+const utils = require('./utils')
3
+const config = require('../config')
4
+const isProduction = process.env.NODE_ENV === 'production'
5
+const sourceMapEnabled = isProduction
6
+  ? config.build.productionSourceMap
7
+  : config.dev.cssSourceMap
8
+
9
+module.exports = {
10
+  loaders: utils.cssLoaders({
11
+    sourceMap: sourceMapEnabled,
12
+    extract: isProduction
13
+  }),
14
+  cssSourceMap: sourceMapEnabled,
15
+  cacheBusting: config.dev.cacheBusting,
16
+  transformToRequire: {
17
+    video: ['src', 'poster'],
18
+    source: 'src',
19
+    img: 'src',
20
+    image: 'xlink:href'
21
+  }
22
+}

+ 92
- 0
build/webpack.base.conf.js View File

@@ -0,0 +1,92 @@
1
+'use strict'
2
+const path = require('path')
3
+const utils = require('./utils')
4
+const config = require('../config')
5
+const vueLoaderConfig = require('./vue-loader.conf')
6
+
7
+function resolve (dir) {
8
+  return path.join(__dirname, '..', dir)
9
+}
10
+
11
+const createLintingRule = () => ({
12
+  test: /\.(js|vue)$/,
13
+  loader: 'eslint-loader',
14
+  enforce: 'pre',
15
+  include: [resolve('src'), resolve('test')],
16
+  options: {
17
+    formatter: require('eslint-friendly-formatter'),
18
+    emitWarning: !config.dev.showEslintErrorsInOverlay
19
+  }
20
+})
21
+
22
+module.exports = {
23
+  context: path.resolve(__dirname, '../'),
24
+  entry: {
25
+    app: './src/main.js'
26
+  },
27
+  output: {
28
+    path: config.build.assetsRoot,
29
+    filename: '[name].js',
30
+    publicPath: process.env.NODE_ENV === 'production'
31
+      ? config.build.assetsPublicPath
32
+      : config.dev.assetsPublicPath
33
+  },
34
+  resolve: {
35
+    extensions: ['.js', '.vue', '.json'],
36
+    alias: {
37
+      'vue$': 'vue/dist/vue.esm.js',
38
+      '@': resolve('src'),
39
+    }
40
+  },
41
+  module: {
42
+    rules: [
43
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
44
+      {
45
+        test: /\.vue$/,
46
+        loader: 'vue-loader',
47
+        options: vueLoaderConfig
48
+      },
49
+      {
50
+        test: /\.js$/,
51
+        loader: 'babel-loader',
52
+        include: [resolve('src'), resolve('test')]
53
+      },
54
+      {
55
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
56
+        loader: 'url-loader',
57
+        options: {
58
+          limit: 10000,
59
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
60
+        }
61
+      },
62
+      {
63
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
64
+        loader: 'url-loader',
65
+        options: {
66
+          limit: 10000,
67
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
68
+        }
69
+      },
70
+      {
71
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
72
+        loader: 'url-loader',
73
+        options: {
74
+          limit: 10000,
75
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
76
+        }
77
+      }
78
+    ]
79
+  },
80
+  node: {
81
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
82
+    // source contains it (although only uses it if it's native).
83
+    setImmediate: false,
84
+    // prevent webpack from injecting mocks to Node native modules
85
+    // that does not make sense for the client
86
+    dgram: 'empty',
87
+    fs: 'empty',
88
+    net: 'empty',
89
+    tls: 'empty',
90
+    child_process: 'empty'
91
+  }
92
+}

+ 80
- 0
build/webpack.dev.conf.js View File

@@ -0,0 +1,80 @@
1
+'use strict'
2
+const utils = require('./utils')
3
+const webpack = require('webpack')
4
+const config = require('../config')
5
+const merge = require('webpack-merge')
6
+const baseWebpackConfig = require('./webpack.base.conf')
7
+const HtmlWebpackPlugin = require('html-webpack-plugin')
8
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
9
+const portfinder = require('portfinder')
10
+
11
+const HOST = process.env.HOST
12
+const PORT = process.env.PORT && Number(process.env.PORT)
13
+
14
+const devWebpackConfig = merge(baseWebpackConfig, {
15
+  module: {
16
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
17
+  },
18
+  // cheap-module-eval-source-map is faster for development
19
+  devtool: config.dev.devtool,
20
+
21
+  // these devServer options should be customized in /config/index.js
22
+  devServer: {
23
+    clientLogLevel: 'warning',
24
+    historyApiFallback: true,
25
+    hot: true,
26
+    compress: true,
27
+    host: HOST || config.dev.host,
28
+    port: PORT || config.dev.port,
29
+    open: config.dev.autoOpenBrowser,
30
+    overlay: config.dev.errorOverlay
31
+      ? { warnings: false, errors: true }
32
+      : false,
33
+    publicPath: config.dev.assetsPublicPath,
34
+    proxy: config.dev.proxyTable,
35
+    quiet: true, // necessary for FriendlyErrorsPlugin
36
+    watchOptions: {
37
+      poll: config.dev.poll,
38
+    }
39
+  },
40
+  plugins: [
41
+    new webpack.DefinePlugin({
42
+      'process.env': require('../config/dev.env')
43
+    }),
44
+    new webpack.HotModuleReplacementPlugin(),
45
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
46
+    new webpack.NoEmitOnErrorsPlugin(),
47
+    // https://github.com/ampedandwired/html-webpack-plugin
48
+    new HtmlWebpackPlugin({
49
+      filename: 'index.html',
50
+      template: 'index.html',
51
+      inject: true
52
+    }),
53
+  ]
54
+})
55
+
56
+module.exports = new Promise((resolve, reject) => {
57
+  portfinder.basePort = process.env.PORT || config.dev.port
58
+  portfinder.getPort((err, port) => {
59
+    if (err) {
60
+      reject(err)
61
+    } else {
62
+      // publish the new Port, necessary for e2e tests
63
+      process.env.PORT = port
64
+      // add port to devServer config
65
+      devWebpackConfig.devServer.port = port
66
+
67
+      // Add FriendlyErrorsPlugin
68
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
69
+        compilationSuccessInfo: {
70
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
71
+        },
72
+        onErrors: config.dev.notifyOnErrors
73
+        ? utils.createNotifierCallback()
74
+        : undefined
75
+      }))
76
+
77
+      resolve(devWebpackConfig)
78
+    }
79
+  })
80
+})

+ 148
- 0
build/webpack.prod.conf.js View File

@@ -0,0 +1,148 @@
1
+'use strict'
2
+const path = require('path')
3
+const utils = require('./utils')
4
+const webpack = require('webpack')
5
+const config = require('../config')
6
+const merge = require('webpack-merge')
7
+const baseWebpackConfig = require('./webpack.base.conf')
8
+const CopyWebpackPlugin = require('copy-webpack-plugin')
9
+const HtmlWebpackPlugin = require('html-webpack-plugin')
10
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
11
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
12
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
13
+
14
+const env = process.env.NODE_ENV === 'testing'
15
+  ? require('../config/test.env')
16
+  : require('../config/prod.env')
17
+
18
+const webpackConfig = merge(baseWebpackConfig, {
19
+  module: {
20
+    rules: utils.styleLoaders({
21
+      sourceMap: config.build.productionSourceMap,
22
+      extract: true,
23
+      usePostCSS: true
24
+    })
25
+  },
26
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
27
+  output: {
28
+    path: config.build.assetsRoot,
29
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
30
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
31
+  },
32
+  plugins: [
33
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
34
+    new webpack.DefinePlugin({
35
+      'process.env': env
36
+    }),
37
+    new UglifyJsPlugin({
38
+      uglifyOptions: {
39
+        compress: {
40
+          warnings: false
41
+        }
42
+      },
43
+      sourceMap: config.build.productionSourceMap,
44
+      parallel: true
45
+    }),
46
+    // extract css into its own file
47
+    new ExtractTextPlugin({
48
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
49
+      // set the following option to `true` if you want to extract CSS from
50
+      // codesplit chunks into this main css file as well.
51
+      // This will result in *all* of your app's CSS being loaded upfront.
52
+      allChunks: false,
53
+    }),
54
+    // Compress extracted CSS. We are using this plugin so that possible
55
+    // duplicated CSS from different components can be deduped.
56
+    new OptimizeCSSPlugin({
57
+      cssProcessorOptions: config.build.productionSourceMap
58
+        ? { safe: true, map: { inline: false } }
59
+        : { safe: true }
60
+    }),
61
+    // generate dist index.html with correct asset hash for caching.
62
+    // you can customize output by editing /index.html
63
+    // see https://github.com/ampedandwired/html-webpack-plugin
64
+    new HtmlWebpackPlugin({
65
+      filename: process.env.NODE_ENV === 'testing'
66
+        ? 'index.html'
67
+        : config.build.index,
68
+      template: 'index.html',
69
+      inject: true,
70
+      minify: {
71
+        removeComments: true,
72
+        collapseWhitespace: true,
73
+        removeAttributeQuotes: true
74
+        // more options:
75
+        // https://github.com/kangax/html-minifier#options-quick-reference
76
+      },
77
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
78
+      chunksSortMode: 'dependency'
79
+    }),
80
+    // keep module.id stable when vender modules does not change
81
+    new webpack.HashedModuleIdsPlugin(),
82
+    // enable scope hoisting
83
+    new webpack.optimize.ModuleConcatenationPlugin(),
84
+    // split vendor js into its own file
85
+    new webpack.optimize.CommonsChunkPlugin({
86
+      name: 'vendor',
87
+      minChunks (module) {
88
+        // any required modules inside node_modules are extracted to vendor
89
+        return (
90
+          module.resource &&
91
+          /\.js$/.test(module.resource) &&
92
+          module.resource.indexOf(
93
+            path.join(__dirname, '../node_modules')
94
+          ) === 0
95
+        )
96
+      }
97
+    }),
98
+    // extract webpack runtime and module manifest to its own file in order to
99
+    // prevent vendor hash from being updated whenever app bundle is updated
100
+    new webpack.optimize.CommonsChunkPlugin({
101
+      name: 'manifest',
102
+      minChunks: Infinity
103
+    }),
104
+    // This instance extracts shared chunks from code splitted chunks and bundles them
105
+    // in a separate chunk, similar to the vendor chunk
106
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
107
+    new webpack.optimize.CommonsChunkPlugin({
108
+      name: 'app',
109
+      async: 'vendor-async',
110
+      children: true,
111
+      minChunks: 3
112
+    }),
113
+
114
+    // copy custom static assets
115
+    new CopyWebpackPlugin([
116
+      {
117
+        from: path.resolve(__dirname, '../static'),
118
+        to: config.build.assetsSubDirectory,
119
+        ignore: ['.*']
120
+      }
121
+    ])
122
+  ]
123
+})
124
+
125
+if (config.build.productionGzip) {
126
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
127
+
128
+  webpackConfig.plugins.push(
129
+    new CompressionWebpackPlugin({
130
+      asset: '[path].gz[query]',
131
+      algorithm: 'gzip',
132
+      test: new RegExp(
133
+        '\\.(' +
134
+        config.build.productionGzipExtensions.join('|') +
135
+        ')$'
136
+      ),
137
+      threshold: 10240,
138
+      minRatio: 0.8
139
+    })
140
+  )
141
+}
142
+
143
+if (config.build.bundleAnalyzerReport) {
144
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
145
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
146
+}
147
+
148
+module.exports = webpackConfig

+ 7
- 0
config/dev.env.js View File

@@ -0,0 +1,7 @@
1
+'use strict'
2
+const merge = require('webpack-merge')
3
+const prodEnv = require('./prod.env')
4
+
5
+module.exports = merge(prodEnv, {
6
+  NODE_ENV: '"development"'
7
+})

+ 81
- 0
config/index.js View File

@@ -0,0 +1,81 @@
1
+'use strict'
2
+// Template version: 1.2.5
3
+// see http://vuejs-templates.github.io/webpack for documentation.
4
+
5
+const path = require('path')
6
+
7
+module.exports = {
8
+  dev: {
9
+
10
+    // Paths
11
+    assetsSubDirectory: 'static',
12
+    assetsPublicPath: '/',
13
+    proxyTable: {},
14
+
15
+    // Various Dev Server settings
16
+    host: 'localhost', // can be overwritten by process.env.HOST
17
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18
+    autoOpenBrowser: false,
19
+    errorOverlay: true,
20
+    notifyOnErrors: true,
21
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22
+
23
+    // Use Eslint Loader?
24
+    // If true, your code will be linted during bundling and
25
+    // linting errors and warnings will be shown in the console.
26
+    useEslint: false,
27
+    // If true, eslint errors and warnings will also be shown in the error overlay
28
+    // in the browser.
29
+    showEslintErrorsInOverlay: false,
30
+
31
+    /**
32
+     * Source Maps
33
+     */
34
+
35
+    // https://webpack.js.org/configuration/devtool/#development
36
+    devtool: 'eval-source-map',
37
+
38
+    // If you have problems debugging vue-files in devtools,
39
+    // set this to false - it *may* help
40
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
41
+    cacheBusting: true,
42
+
43
+    // CSS Sourcemaps off by default because relative paths are "buggy"
44
+    // with this option, according to the CSS-Loader README
45
+    // (https://github.com/webpack/css-loader#sourcemaps)
46
+    // In our experience, they generally work as expected,
47
+    // just be aware of this issue when enabling this option.
48
+    cssSourceMap: false,
49
+  },
50
+
51
+  build: {
52
+    // Template for index.html
53
+    index: path.resolve(__dirname, '../dist/index.html'),
54
+
55
+    // Paths
56
+    assetsRoot: path.resolve(__dirname, '../dist'),
57
+    assetsSubDirectory: 'static',
58
+    assetsPublicPath: '/',
59
+
60
+    /**
61
+     * Source Maps
62
+     */
63
+
64
+    productionSourceMap: true,
65
+    // https://webpack.js.org/configuration/devtool/#production
66
+    devtool: '#source-map',
67
+
68
+    // Gzip off by default as many popular static hosts such as
69
+    // Surge or Netlify already gzip all static assets for you.
70
+    // Before setting to `true`, make sure to:
71
+    // npm install --save-dev compression-webpack-plugin
72
+    productionGzip: false,
73
+    productionGzipExtensions: ['js', 'css'],
74
+
75
+    // Run the build command with an extra argument to
76
+    // View the bundle analyzer report after build finishes:
77
+    // `npm run build --report`
78
+    // Set to `true` or `false` to always turn it on or off
79
+    bundleAnalyzerReport: process.env.npm_config_report
80
+  }
81
+}

+ 4
- 0
config/prod.env.js View File

@@ -0,0 +1,4 @@
1
+'use strict'
2
+module.exports = {
3
+  NODE_ENV: '"production"'
4
+}

+ 7
- 0
config/test.env.js View File

@@ -0,0 +1,7 @@
1
+'use strict'
2
+const merge = require('webpack-merge')
3
+const devEnv = require('./dev.env')
4
+
5
+module.exports = merge(devEnv, {
6
+  NODE_ENV: '"testing"'
7
+})

+ 12
- 0
index.html View File

@@ -0,0 +1,12 @@
1
+<!DOCTYPE html>
2
+<html>
3
+  <head>
4
+    <meta charset="utf-8">
5
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
6
+    <title>flatisfy-ui</title>
7
+  </head>
8
+  <body>
9
+    <div id="app"></div>
10
+    <!-- built files will be auto injected -->
11
+  </body>
12
+</html>

+ 79
- 0
package.json View File

@@ -0,0 +1,79 @@
1
+{
2
+  "name": "flatisfy-ui",
3
+  "version": "1.0.0",
4
+  "description": "A Vue.js project",
5
+  "author": "Phyks <phyks@phyks.me>",
6
+  "private": true,
7
+  "scripts": {
8
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
9
+    "start": "npm run dev",
10
+    "test": "npm run unit",
11
+    "lint": "eslint --ext .js,.vue src test/unit/specs",
12
+    "build": "node build/build.js"
13
+  },
14
+  "dependencies": {
15
+    "currency-formatter": "^1.3.1",
16
+    "es6-promise": "^4.1.1",
17
+    "font-awesome": "^4.7.0",
18
+    "isomorphic-fetch": "^2.2.1",
19
+    "material-design-icons": "^3.0.1",
20
+    "moment": "^2.19.3",
21
+    "vue": "^2.5.2",
22
+    "vue-i18n": "^7.3.2",
23
+    "vue-router": "^3.0.1",
24
+    "vuetify": "^0.17.4"
25
+  },
26
+  "devDependencies": {
27
+    "autoprefixer": "^7.1.2",
28
+    "babel-core": "^6.22.1",
29
+    "babel-eslint": "^7.1.1",
30
+    "babel-loader": "^7.1.1",
31
+    "babel-plugin-transform-runtime": "^6.22.0",
32
+    "babel-preset-env": "^1.3.2",
33
+    "babel-preset-stage-2": "^6.22.0",
34
+    "chalk": "^2.0.1",
35
+    "copy-webpack-plugin": "^4.0.1",
36
+    "css-loader": "^0.28.0",
37
+    "eslint": "^3.19.0",
38
+    "eslint-config-standard": "^10.2.1",
39
+    "eslint-friendly-formatter": "^3.0.0",
40
+    "eslint-loader": "^1.7.1",
41
+    "eslint-plugin-html": "^3.0.0",
42
+    "eslint-plugin-import": "^2.7.0",
43
+    "eslint-plugin-node": "^5.2.0",
44
+    "eslint-plugin-promise": "^3.4.0",
45
+    "eslint-plugin-standard": "^3.0.1",
46
+    "eventsource-polyfill": "^0.9.6",
47
+    "extract-text-webpack-plugin": "^3.0.0",
48
+    "file-loader": "^1.1.4",
49
+    "friendly-errors-webpack-plugin": "^1.6.1",
50
+    "html-webpack-plugin": "^2.30.1",
51
+    "node-notifier": "^5.1.2",
52
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
53
+    "ora": "^1.2.0",
54
+    "portfinder": "^1.0.13",
55
+    "postcss-import": "^11.0.0",
56
+    "postcss-loader": "^2.0.8",
57
+    "rimraf": "^2.6.0",
58
+    "semver": "^5.3.0",
59
+    "shelljs": "^0.7.6",
60
+    "uglifyjs-webpack-plugin": "^1.1.1",
61
+    "url-loader": "^0.5.8",
62
+    "vue-loader": "^13.3.0",
63
+    "vue-style-loader": "^3.0.1",
64
+    "vue-template-compiler": "^2.5.2",
65
+    "webpack": "^3.6.0",
66
+    "webpack-bundle-analyzer": "^2.9.0",
67
+    "webpack-dev-server": "^2.9.1",
68
+    "webpack-merge": "^4.1.0"
69
+  },
70
+  "engines": {
71
+    "node": ">= 4.0.0",
72
+    "npm": ">= 3.0.0"
73
+  },
74
+  "browserslist": [
75
+    "> 1%",
76
+    "last 2 versions",
77
+    "not ie <= 8"
78
+  ]
79
+}

+ 67
- 0
src/App.vue View File

@@ -0,0 +1,67 @@
1
+<template>
2
+    <v-app>
3
+        <v-navigation-drawer
4
+            fixed
5
+            mini-variant
6
+            clipped
7
+            v-model="drawer"
8
+            app
9
+            >
10
+            <v-list>
11
+                <v-list-tile
12
+                    value="true"
13
+                    v-for="(item, i) in menuItems"
14
+                    :key="i"
15
+                    >
16
+                    <v-list-tile-action>
17
+                        <v-icon v-html="item.icon"></v-icon>
18
+                    </v-list-tile-action>
19
+                    <v-list-tile-content>
20
+                        <v-list-tile-title v-text="item.title"></v-list-tile-title>
21
+                    </v-list-tile-content>
22
+                </v-list-tile>
23
+            </v-list>
24
+        </v-navigation-drawer>
25
+        <v-toolbar fixed app clipped-left>
26
+            <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
27
+            <v-toolbar-title>Flatisfy</v-toolbar-title>
28
+            <v-spacer></v-spacer>
29
+        </v-toolbar>
30
+        <v-content>
31
+            <v-container class="panel">
32
+                <v-layout row wrap>
33
+                    <v-flex xs12>
34
+                        <FlatList/>
35
+                    </v-flex>
36
+                </v-layout>
37
+            </v-container>
38
+        </v-content>
39
+        <v-footer app>
40
+            <span>&copy; 2017</span>
41
+        </v-footer>
42
+    </v-app>
43
+</template>
44
+
45
+<script>
46
+import FlatList from './components/FlatList'
47
+
48
+export default {
49
+    components: {
50
+        FlatList
51
+    },
52
+        data () {
53
+            return {
54
+                drawer: true,
55
+                menuItems: [
56
+                    { icon: 'bubble_chart', title: 'Inspire' }
57
+                ]
58
+            }
59
+        }
60
+}
61
+</script>
62
+
63
+<style>
64
+.panel {
65
+    max-width: 960px;
66
+}
67
+</style>

+ 110
- 0
src/api/index.js View File

@@ -0,0 +1,110 @@
1
+import moment from 'moment'
2
+
3
+require('es6-promise').polyfill()
4
+require('isomorphic-fetch')
5
+
6
+const BASE_API_URL = 'http://localhost:8080'
7
+
8
+const postProcessAPIResults = function (flat) {
9
+    /* eslint-disable camelcase */
10
+    if (flat.date) {
11
+        flat.date = moment.utc(flat.date)
12
+    }
13
+    if (flat.visit_date) {
14
+        flat.visit_date = moment.utc(flat.visit_date)
15
+    }
16
+    if (flat.flatisfy_time_to) {
17
+        const momentifiedTimeTo = {}
18
+        Object.keys(flat.flatisfy_time_to).forEach(key => {
19
+            const value = flat.flatisfy_time_to[key]
20
+            momentifiedTimeTo[key] = Object.assign(
21
+                {},
22
+                value,
23
+                { time: moment.duration(value.time, 'seconds') }
24
+            )
25
+        })
26
+        flat.flatisfy_time_to = momentifiedTimeTo
27
+    }
28
+
29
+    // Fill cost per square meter.
30
+    flat.price_per_meter = Math.round(flat.cost * 100 / flat.area) / 100 | 0
31
+
32
+    /* eslint-enable camelcase */
33
+    return flat
34
+}
35
+
36
+export const getFlats = function (callback) {
37
+    fetch(`${BASE_API_URL}/api/v1/flats`, { credentials: 'same-origin' })
38
+        .then(function (response) {
39
+            return response.json()
40
+        }).then(function (json) {
41
+            const flats = json.data
42
+            flats.map(postProcessAPIResults)
43
+            callback(flats)
44
+        }).catch(function (ex) {
45
+            console.error('Unable to parse flats: ' + ex)
46
+        })
47
+}
48
+
49
+export const getFlat = function (flatId, callback) {
50
+    fetch(
51
+        `${BASE_API_URL}/api/v1/flats/${encodeURIComponent(flatId)}`,
52
+        { credentials: 'same-origin' }
53
+    ).then(function (response) {
54
+        return response.json()
55
+    }).then(function (json) {
56
+        const flat = postProcessAPIResults(json.data)
57
+        callback(flat)
58
+    }).catch(function (ex) {
59
+        console.error('Unable to parse flats: ' + ex)
60
+    })
61
+}
62
+
63
+export const updateFlat = function (flatId, updatedFields, callback) {
64
+    fetch(
65
+        `${BASE_API_URL}/api/v1/flats/${encodeURIComponent(flatId)}`,
66
+        {
67
+            credentials: 'same-origin',
68
+            method: 'PATCH',
69
+            headers: {
70
+                'Content-Type': 'application/json'
71
+            },
72
+            body: JSON.stringify(updatedFields)
73
+        }
74
+    ).then(callback).catch(function (ex) {
75
+        console.error('Unable to update flat status: ' + ex)
76
+    })
77
+}
78
+
79
+export const getTimeToPlaces = function (callback) {
80
+    fetch(
81
+        `${BASE_API_URL}/api/v1/time_to_places`,
82
+        { credentials: 'same-origin' }
83
+    ).then(function (response) {
84
+        return response.json()
85
+    }).then(function (json) {
86
+        callback(json.data)
87
+    }).catch(function (ex) {
88
+        console.error('Unable to fetch time to places: ' + ex)
89
+    })
90
+}
91
+
92
+export const doSearch = function (query, callback) {
93
+    fetch(
94
+        '/api/v1/search',
95
+        {
96
+            credentials: 'same-origin',
97
+            method: 'POST',
98
+            headers: {
99
+                'Content-Type': 'application/json'
100
+            },
101
+            body: JSON.stringify({
102
+                query: query
103
+            })
104
+        }
105
+    ).then(response => response.json()).then(json => {
106
+        callback(json.data)
107
+    }).catch(function (ex) {
108
+        console.error('Unable to perform search: ' + ex)
109
+    })
110
+}

BIN
src/assets/logo.png View File


+ 99
- 0
src/components/FlatEntry.vue View File

@@ -0,0 +1,99 @@
1
+<template>
2
+<v-card class="flat-entry">
3
+    <v-card-text>
4
+        <v-container grid-list-sm>
5
+            <v-layout row align-center>
6
+                <v-flex xs4 text-xs-center md2>
7
+                    <v-layout column>
8
+                        <v-flex d-flex xs12>
9
+                            <v-avatar size="100%">
10
+                                <img :src="thumbnail" alt="Thumbnail">
11
+                            </v-avatar>
12
+                        </v-flex>
13
+                        <v-flex d-flex xs12>
14
+                            <span class="body-2">{{ formattedPrice }}</span>
15
+                        </v-flex>
16
+                    </v-layout>
17
+                </v-flex>
18
+                <v-flex xs7 offset-xs1 md6>
19
+                    <v-layout column>
20
+                        <v-flex xs12 d-flex>
21
+                            <h2 class="title">{{ title }}</h2>
22
+                        </v-flex>
23
+                        <v-flex xs12 d-flex>
24
+                            <v-layout row>
25
+                                <v-flex xs4 class="flex-icon">
26
+                                    <v-icon>aspect_ratio</v-icon> <span v-html="formattedArea"></span>
27
+                                </v-flex>
28
+                                <v-flex xs4 class="flex-icon">
29
+                                    <v-icon>home</v-icon> {{ $tc('flatEntry.rooms', nRooms, { count: nRooms }) }}
30
+                                </v-flex>
31
+                            </v-layout>
32
+                        </v-flex>
33
+                        <v-flex xs12 d-flex>
34
+                            <v-icon class="flex-icon">location_on</v-icon> {{ location }}
35
+                        </v-flex>
36
+                    </v-layout>
37
+                </v-flex>
38
+                <v-flex xs1 hidden-sm-and-down>
39
+                    <v-btn flat icon>
40
+                        <v-icon>star</v-icon>
41
+                    </v-btn>
42
+                </v-flex>
43
+                <v-flex xs1 hidden-sm-and-down>
44
+                    <v-btn flat icon>
45
+                        <v-icon>delete</v-icon>
46
+                    </v-btn>
47
+                </v-flex>
48
+                <v-flex xs1 hidden-sm-and-down>
49
+                    <v-btn flat icon>
50
+                        <v-icon class="fa-icon">fa-external-link</v-icon>
51
+                    </v-btn>
52
+                </v-flex>
53
+            </v-layout>
54
+        </v-container>
55
+    </v-card-text>
56
+</v-card>
57
+</template>
58
+
59
+<script>
60
+import currencyFormatter from 'currency-formatter'
61
+
62
+export default {
63
+    props: {
64
+        title: String,
65
+        thumbnail: String,
66
+        area: Number,
67
+        areaUnits: String,
68
+        price: Number,
69
+        currency: String,
70
+        nRooms: Number,
71
+        location: String
72
+    },
73
+    computed: {
74
+        formattedPrice() {
75
+            return currencyFormatter.format(this.price, { code: this.currency, precision: 0 })
76
+        },
77
+        formattedArea() {
78
+            if (this.areaUnits == 'm2') {
79
+                return `${this.area}&nbsp;m<sup>2</sup>`
80
+            }
81
+            return this.area
82
+        }
83
+    }
84
+};
85
+</script>
86
+
87
+<style>
88
+.flat-entry {
89
+    cursor: pointer;
90
+}
91
+
92
+.flex-icon {
93
+    flex: 0 0;
94
+}
95
+
96
+.fa-icon {
97
+    font-size: 20px;
98
+}
99
+</style>

+ 47
- 0
src/components/FlatList.vue View File

@@ -0,0 +1,47 @@
1
+<template>
2
+    <div>
3
+        <template v-for="flat in flats">
4
+        <FlatEntry v-bind="flat"/>
5
+        </template>
6
+    </div>
7
+</template>
8
+
9
+<script>
10
+import * as api from '../api'
11
+import FlatEntry from './FlatEntry'
12
+
13
+export default {
14
+    components: {
15
+        FlatEntry
16
+    },
17
+    data() {
18
+        return {
19
+            flats: [
20
+                /*{
21
+                    title: "Studio 33m2 - Paris 17e",
22
+                    thumbnail: "https://static.pap.fr/photos/B88/B88A1053.thumb.jpg",
23
+                    area: 33,
24
+                    areaUnits: "m2",
25
+                    nRooms: 1,
26
+                    location: "Paris 17e",
27
+                    price: 825,
28
+                    currency: "EUR"
29
+                },
30
+                {
31
+                    title: "Appartement 50m2 - Paris 20e",
32
+                    thumbnail: "https://static.pap.fr/photos/B88/B88A1053.thumb.jpg",
33
+                    area: 50,
34
+                    areaUnits: "m2",
35
+                    nRooms: 2,
36
+                    location: "Paris 20e",
37
+                    price: 1200,
38
+                    currency: "EUR"
39
+                }*/
40
+            ]
41
+        }
42
+    },
43
+    created() {
44
+        api.getFlats(flats => this.flats = flats)
45
+    }
46
+};
47
+</script>

+ 12
- 0
src/i18n/index.js View File

@@ -0,0 +1,12 @@
1
+const messages = {
2
+    fr: {
3
+        flatEntry: {
4
+            'rooms': '1 pièce | {count} pièces'
5
+        }
6
+    }
7
+}
8
+
9
+export default {
10
+    locale: 'fr',
11
+    messages
12
+}

+ 19
- 0
src/main.js View File

@@ -0,0 +1,19 @@
1
+import Vue from 'vue'
2
+import VueI18n from 'vue-i18n'
3
+import Vuetify from 'vuetify'
4
+
5
+import 'font-awesome/css/font-awesome.css'
6
+import 'material-design-icons/iconfont/material-icons.css'
7
+import 'vuetify/dist/vuetify.css'
8
+
9
+import App from './App.vue'
10
+import i18n from './i18n'
11
+
12
+Vue.use(VueI18n)
13
+Vue.use(Vuetify)
14
+
15
+new Vue({
16
+    el: '#app',
17
+    render: h => h(App),
18
+    i18n: new VueI18n(i18n)
19
+})

+ 15
- 0
src/router/index.js View File

@@ -0,0 +1,15 @@
1
+import Vue from 'vue'
2
+import Router from 'vue-router'
3
+import HelloWorld from '@/components/HelloWorld'
4
+
5
+Vue.use(Router)
6
+
7
+export default new Router({
8
+  routes: [
9
+    {
10
+      path: '/',
11
+      name: 'HelloWorld',
12
+      component: HelloWorld
13
+    }
14
+  ]
15
+})

+ 0
- 0
static/.gitkeep View File


+ 6
- 0
test/unit/.eslintrc View File

@@ -0,0 +1,6 @@
1
+{
2
+  "env": { 
3
+  },
4
+  "globals": { 
5
+  }
6
+}

+ 11
- 0
test/unit/specs/HelloWorld.spec.js View File

@@ -0,0 +1,11 @@
1
+import Vue from 'vue'
2
+import HelloWorld from '@/components/HelloWorld'
3
+
4
+describe('HelloWorld.vue', () => {
5
+  it('should render correct contents', () => {
6
+    const Constructor = Vue.extend(HelloWorld)
7
+    const vm = new Constructor().$mount()
8
+    expect(vm.$el.querySelector('.hello h1').textContent)
9
+    
10
+  })
11
+})