Change lint rules to AirBnB

This commit is contained in:
Alicia Sykes 2019-09-01 13:38:13 +01:00
parent 7ffc35afb6
commit 335c8eec53
18 changed files with 704 additions and 663 deletions

View File

@ -1,5 +1,5 @@
module.exports = {
presets: [
'@vue/app'
]
}
'@vue/app',
],
};

40
package-lock.json generated
View File

@ -3521,6 +3521,12 @@
"typedarray": "^0.0.6"
}
},
"confusing-browser-globals": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.8.tgz",
"integrity": "sha512-lI7asCibVJ6Qd3FGU7mu4sfG4try4LX3+GVS+Gv8UlrEf2AeW57piecapnog2UHZSbcX/P/1UDWVaTsblowlZg==",
"dev": true
},
"connect": {
"version": "3.7.0",
"resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
@ -4700,6 +4706,28 @@
}
}
},
"eslint-config-airbnb": {
"version": "18.0.1",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-18.0.1.tgz",
"integrity": "sha512-hLb/ccvW4grVhvd6CT83bECacc+s4Z3/AEyWQdIT2KeTsG9dR7nx1gs7Iw4tDmGKozCNHFn4yZmRm3Tgy+XxyQ==",
"dev": true,
"requires": {
"eslint-config-airbnb-base": "^14.0.0",
"object.assign": "^4.1.0",
"object.entries": "^1.1.0"
}
},
"eslint-config-airbnb-base": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.0.0.tgz",
"integrity": "sha512-2IDHobw97upExLmsebhtfoD3NAKhV4H0CJWP3Uprd/uk+cHuWYOczPVxQ8PxLFUAw7o3Th1RAU8u1DoUpr+cMA==",
"dev": true,
"requires": {
"confusing-browser-globals": "^1.0.7",
"object.assign": "^4.1.0",
"object.entries": "^1.1.0"
}
},
"eslint-config-standard": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-12.0.0.tgz",
@ -8231,6 +8259,18 @@
"object-keys": "^1.0.11"
}
},
"object.entries": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.0.tgz",
"integrity": "sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==",
"dev": true,
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.12.0",
"function-bind": "^1.1.1",
"has": "^1.0.3"
}
},
"object.getownpropertydescriptors": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",

View File

@ -25,6 +25,7 @@
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.18.0",
"sass-loader": "^7.1.0",
@ -37,9 +38,12 @@
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
"@vue/standard",
"airbnb-base"
],
"rules": {},
"rules": {
"import/no-unresolved": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}

View File

@ -1,14 +1,13 @@
var connect = require('connect')
var serveStatic = require('serve-static')
const connect = require('connect');
const serveStatic = require('serve-static');
const port = process.env.PORT || 3002
const port = process.env.PORT || 3002;
/* eslint no-console: 0 */
try {
connect()
.use(serveStatic(__dirname + '/dist'))
.listen(port, () =>
console.log(`Boom, app is running on port ${port}`)
)
.use(serveStatic(`${__dirname}/dist`))
.listen(port, () => console.log(`Boom, app is running on port ${port}`));
} catch (error) {
console.log('Something fucked up', error)
console.log('Something fucked up', error);
}

View File

@ -7,14 +7,14 @@
</template>
<script>
import Footer from '@/components/Footer.vue'
import Footer from '@/components/Footer.vue';
export default {
name: 'app',
components: {
Footer
}
}
Footer,
},
};
</script>
<style lang="scss">

View File

@ -17,9 +17,9 @@ export default {
name: 'CollapsableContainer',
props: {
uniqueKey: String,
title: String
}
}
title: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

View File

@ -22,32 +22,32 @@
export default {
name: 'FilterTile',
data () {
data() {
return {
input: ''
}
input: '',
};
},
methods: {
userIsTypingSomething () {
this.$emit('user-is-searchin', this.input)
userIsTypingSomething() {
this.$emit('user-is-searchin', this.input);
},
clearFilterInput () {
this.input = ''
this.userIsTypingSomething()
document.activeElement.blur()
clearFilterInput() {
this.input = '';
this.userIsTypingSomething();
document.activeElement.blur();
},
},
mounted: function() {
mounted() {
window.addEventListener('keyup', (event) => {
const key = event.key
if(/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
this.input += key
this.$refs.filter.focus()
this.userIsTypingSomething()
const { key } = event;
if (/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
this.input += key;
this.$refs.filter.focus();
this.userIsTypingSomething();
}
});
}
}
},
};
</script>
<style scoped lang="scss">
@ -63,7 +63,8 @@ export default {
background: #282a32;
label {
display: inline;
background: -webkit-gradient(linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
background: -webkit-gradient(
linear, right bottom, left top, from(#9F86FF), color-stop(#1CA8DD), to(#007AE1));
background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

View File

@ -17,9 +17,9 @@ export default {
licenseUrl: { type: String, default: 'https://gist.github.com/Lissy93/143d2ee01ccc5c052a17' },
date: { type: String, default: `${new Date().getFullYear()}` },
showCopyright: { type: Boolean, default: true },
repoUrl: { type: String, default: 'https://github.com/lissy93/panel' }
}
}
repoUrl: { type: String, default: 'https://github.com/lissy93/panel' },
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

View File

@ -6,15 +6,16 @@
</template>
<script>
import PageTitle from '@/components/PageTitle.vue'
import Nav from '@/components/Nav.vue'
import PageTitle from '@/components/PageTitle.vue';
import Nav from '@/components/Nav.vue';
export default {
name: 'Header',
components: {
PageTitle,
Nav
}
}
Nav,
},
};
</script>
<style scoped lang="scss">

View File

@ -9,9 +9,9 @@
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

View File

@ -29,27 +29,25 @@ export default {
openingMethod: { // Where resource will open, either 'newtab', 'sametab' or 'iframe'
type: String,
default: 'newtab',
validator: (value) =>
['newtab', 'sametab', 'iframe'].indexOf(value) !== -1
}
validator: (value) => ['newtab', 'sametab', 'iframe'].indexOf(value) !== -1,
},
data () {
return { getId: this.id }
},
mounted () {
data() {
return { getId: this.id };
},
mounted() {
// Detects overflowing text, and allows is to marguee on hover
// The below code is horifically bad, it is embarassing that I wrote it...
const tileElem = document.getElementById(`tile-${this.getId}`)
const tileElem = document.getElementById(`tile-${this.getId}`);
if (tileElem) {
const isOverflowing =
tileElem.scrollHeight > tileElem.clientHeight ||
tileElem.scrollWidth > tileElem.clientWidth
const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight
|| tileElem.scrollWidth > tileElem.clientWidth;
if (isOverflowing) {
tileElem.className += ' is-overflowing'
tileElem.className += ' is-overflowing';
}
}
}
}
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

View File

@ -17,21 +17,21 @@
</template>
<script>
import Item from '@/components/Item.vue'
import Collapsable from '@/components/Collapsable.vue'
import Item from '@/components/Item.vue';
import Collapsable from '@/components/Collapsable.vue';
export default {
name: 'ItemGroup',
props: {
groupId: String,
title: String,
items: Array
items: Array,
},
components: {
Collapsable,
Item
}
}
Item,
},
};
</script>
<style scoped lang="scss">

View File

@ -8,8 +8,8 @@
<script>
export default {
name: 'Nav'
}
name: 'Nav',
};
</script>
<style scoped lang="scss">

View File

@ -7,8 +7,8 @@
<script>
export default {
name: 'PageTitle'
}
name: 'PageTitle',
};
</script>
<style scoped lang="scss">

View File

@ -1,14 +1,14 @@
import Vue from 'vue'
import Element from 'element-ui'
import Vue from 'vue';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import './registerServiceWorker'
import App from './App.vue';
import router from './router';
import './registerServiceWorker';
Vue.use(Element)
Vue.config.productionTip = false
Vue.use(Element);
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount('#app')
render: (h) => h(App),
}).$mount('#app');

View File

@ -1,32 +1,32 @@
/* eslint-disable no-console */
import { register } from 'register-service-worker'
import { register } from 'register-service-worker';
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
ready() {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
'App is being served from cache by a service worker.\n'
+ 'For more details, visit https://goo.gl/AFskqB',
);
},
registered () {
console.log('Service worker has been registered.')
registered() {
console.log('Service worker has been registered.');
},
cached () {
console.log('Content has been cached for offline use.')
cached() {
console.log('Content has been cached for offline use.');
},
updatefound () {
console.log('New content is downloading.')
updatefound() {
console.log('New content is downloading.');
},
updated () {
console.log('New content is available; please refresh.')
updated() {
console.log('New content is available; please refresh.');
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
offline() {
console.log('No internet connection found. App is running in offline mode.');
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
error(error) {
console.error('Error during service worker registration:', error);
},
});
}

View File

@ -1,15 +1,15 @@
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
Vue.use(Router)
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
component: Home,
},
{
path: '/about',
@ -17,7 +17,7 @@ export default new Router({
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
},
],
});

View File

@ -17,47 +17,45 @@
<script>
import Header from '@/components/Header.vue'
import FilterTile from '@/components/FilterTile.vue'
import ItemGroup from '@/components/ItemGroup.vue'
import * as linkData from './../data/item-data.json'
import Header from '@/components/Header.vue';
import FilterTile from '@/components/FilterTile.vue';
import ItemGroup from '@/components/ItemGroup.vue';
import * as linkData from '../data/item-data.json';
export default {
name: 'home',
props: {
title: { default: 'Panel', type: String },
subtitle: { default: 'All your server management tools in one place', type: String }
subtitle: { default: 'All your server management tools in one place', type: String },
},
components: {
Header,
FilterTile,
ItemGroup
ItemGroup,
},
data: () => {
return {
data: () => ({
items: linkData.default,
searchTile: ''
}
},
searchTile: '',
}),
methods: {
searching (searchTile) {
this.searchTile = searchTile
searching(searchTile) {
this.searchTile = searchTile;
},
getDomainFromUrl (url) {
var urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d\.-]+)\.(?:[a-z\.]{2,10})(?:[/\w\.-]*)*/;
var domainPattern = url.match(urlPattern);
return domainPattern? domainPattern[1] : ''
getDomainFromUrl(url) {
const urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d.-]+)\.(?:[a-z.]{2,10})(?:[/\w.-]*)*/;
const domainPattern = url.match(urlPattern);
return domainPattern ? domainPattern[1] : '';
},
filterTiles (allTiles) {
return allTiles.filter(tile => {
const searchTerm = this.searchTile.toLowerCase()
return tile.title.toLowerCase().includes(searchTerm) ||
tile.provider.toLowerCase().includes(searchTerm) ||
this.getDomainFromUrl(tile.url).includes(searchTerm)
})
}
}
}
filterTiles(allTiles) {
return allTiles.filter((tile) => {
const searchTerm = this.searchTile.toLowerCase();
return tile.title.toLowerCase().includes(searchTerm)
|| tile.provider.toLowerCase().includes(searchTerm)
|| this.getDomainFromUrl(tile.url).includes(searchTerm);
});
},
},
};
</script>
<style lang="scss" scoped>