Merge pull request #393 from shikorism/add-eslint

eslintをいれる
This commit is contained in:
shibafu 2020-06-06 20:21:57 +09:00 committed by GitHub
commit d0edea659e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 987 additions and 275 deletions

View File

@ -105,6 +105,12 @@ jobs:
command: yarn run stylelint
when: always
# Run eslint
- run:
name: eslint
command: yarn run eslint
when: always
# Run unit test
- run:
command: |

28
.eslintrc.js vendored Normal file
View File

@ -0,0 +1,28 @@
module.exports = {
env: {
browser: true,
es2020: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:vue/essential',
'plugin:prettier/recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'prettier/@typescript-eslint',
'prettier/vue',
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 11,
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
plugins: ['prettier', 'vue', '@typescript-eslint'],
rules: {
'@typescript-eslint/explicit-module-boundary-types': 0,
'@typescript-eslint/no-explicit-any': 0,
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
},
};

5
.prettierrc Normal file
View File

@ -0,0 +1,5 @@
{
"arrowParens": "always",
"singleQuote": true,
"printWidth": 120
}

View File

@ -8,6 +8,7 @@
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"eslint": "eslint --ext .js,.ts,.vue resources/",
"stylelint": "stylelint resources/assets/sass/**/*"
},
"devDependencies": {
@ -16,11 +17,17 @@
"@types/chart.js": "^2.7.1",
"@types/jquery": "^3.3.38",
"@types/js-cookie": "^2.2.0",
"@typescript-eslint/eslint-plugin": "^3.1.0",
"@typescript-eslint/parser": "^3.1.0",
"bootstrap": "^4.5.0",
"cal-heatmap": "^3.3.10",
"chart.js": "^2.7.1",
"cross-env": "^5.2.0",
"date-fns": "^1.30.1",
"eslint": "^7.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"husky": "^1.3.1",
"jquery": "^3.5.0",
"js-cookie": "^2.2.0",
@ -29,6 +36,7 @@
"lint-staged": "^8.1.5",
"open-iconic": "^1.1.1",
"popper.js": "^1.14.7",
"prettier": "^2.0.5",
"resolve-url-loader": "^2.3.1",
"sass": "^1.17.0",
"sass-loader": "^7.1.0",
@ -54,6 +62,10 @@
"stylelint --fix",
"git add"
],
".{ts,js,vue}" : [
"eslint --fix",
"git add"
],
"*.php": [
"composer fix",
"git add"

View File

@ -1,4 +1,4 @@
// @types/bootstrap に足りないもの
interface JQuery<TElement = HTMLElement> {
modal(action: "toggle" | "show" | "hide" | "handleUpdate" | "dispose", relatedTarget?: TElement): this;
modal(action: 'toggle' | 'show' | 'hide' | 'handleUpdate' | 'dispose', relatedTarget?: TElement): this;
}

View File

@ -1,4 +1,4 @@
declare module "*.vue" {
import Vue from "vue";
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
}

View File

@ -8,10 +8,10 @@ $(() => {
$('body').removeClass('tis-need-agecheck');
} else {
$('#ageCheckModal')
.modal({backdrop: 'static'})
.modal({ backdrop: 'static' })
.on('hide.bs.modal', function () {
$('body').removeClass('tis-need-agecheck');
Cookies.set('agechecked', '1', {expires: 365});
Cookies.set('agechecked', '1', { expires: 365 });
});
}
@ -29,7 +29,7 @@ $(() => {
$deleteCheckinModal.modal('show', this);
});
$(document).on('click', '[data-href]', function (event) {
$(document).on('click', '[data-href]', function (_event) {
location.href = $(this).data('href');
});
@ -52,7 +52,7 @@ $(() => {
$.ajax({
url: '/api/likes/' + encodeURIComponent(targetId),
method: 'delete',
type: 'json'
type: 'json',
})
.then(callback)
.catch(function (xhr: jqXHR) {
@ -78,8 +78,8 @@ $(() => {
method: 'post',
type: 'json',
data: {
id: targetId
}
id: targetId,
},
})
.then(callback)
.catch(function (xhr: jqXHR) {
@ -97,9 +97,9 @@ $(() => {
}
});
$(document).on('click', '.card-spoiler-overlay', function (event) {
$(document).on('click', '.card-spoiler-overlay', function (_event) {
const $this = $(this);
$this.siblings(".card-link").removeClass("card-spoiler");
$this.siblings('.card-link').removeClass('card-spoiler');
$this.remove();
});
});

View File

@ -8,8 +8,8 @@ if (!token) {
} else {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': token.content
}
'X-CSRF-TOKEN': token.content,
},
});
}

View File

@ -1,8 +1,8 @@
import Vue from 'vue';
import TagInput from "./components/TagInput.vue";
import TagInput from './components/TagInput.vue';
import MetadataPreview from './components/MetadataPreview.vue';
export const bus = new Vue({name: "EventBus"});
export const bus = new Vue({ name: 'EventBus' });
export enum MetadataLoadState {
Inactive,
@ -19,11 +19,11 @@ new Vue({
},
components: {
TagInput,
MetadataPreview
MetadataPreview,
},
mounted() {
// オカズリンクにURLがセットされている場合は、すぐにメタデータを取得する
const linkInput = this.$el.querySelector<HTMLInputElement>("#link");
const linkInput = this.$el.querySelector<HTMLInputElement>('#link');
if (linkInput && /^https?:\/\//.test(linkInput.value)) {
this.fetchMetadata(linkInput.value);
}
@ -52,15 +52,17 @@ new Vue({
method: 'get',
type: 'json',
data: {
url
}
}).then(data => {
this.metadata = data;
this.metadataLoadState = MetadataLoadState.Success;
}).catch(e => {
this.metadata = null;
this.metadataLoadState = MetadataLoadState.Failed;
});
}
}
url,
},
})
.then((data) => {
this.metadata = data;
this.metadataLoadState = MetadataLoadState.Success;
})
.catch((_e) => {
this.metadata = null;
this.metadataLoadState = MetadataLoadState.Failed;
});
},
},
});

View File

@ -5,23 +5,34 @@
<div v-if="state === MetadataLoadState.Loading" class="row no-gutters">
<div class="col-12">
<div class="card-body">
<h6 class="card-title text-center font-weight-bold text-info" style="font-size: small;"><span class="oi oi-loop-circular"></span> オカズの情報を読み込んでいます</h6>
<h6 class="card-title text-center font-weight-bold text-info" style="font-size: small;">
<span class="oi oi-loop-circular"></span> オカズの情報を読み込んでいます
</h6>
</div>
</div>
</div>
<div v-else-if="state === MetadataLoadState.Success" class="row no-gutters">
<div v-if="hasImage" class="col-4 justify-content-center align-items-center">
<img :src="metadata.image" alt="Thumbnail" class="w-100 bg-secondary">
<img :src="metadata.image" alt="Thumbnail" class="w-100 bg-secondary" />
</div>
<div :class="descClasses">
<div class="card-body">
<h6 class="card-title font-weight-bold" style="font-size: small;">{{ metadata.title }}</h6>
<template v-if="suggestions.length > 0">
<p class="card-text mb-2" style="font-size: small;">タグ候補<br><span class="text-secondary">(クリックするとタグ入力欄にコピーできます)</span></p>
<p class="card-text mb-2" style="font-size: small;">
タグ候補<br /><span class="text-secondary"
>(クリックするとタグ入力欄にコピーできます)</span
>
</p>
<ul class="list-inline d-inline">
<li v-for="tag in suggestions"
<li
v-for="tag in suggestions"
:class="tagClasses(tag)"
@click="addTag(tag.name)"><span class="oi oi-tag"></span> {{ tag.name }}</li>
@click="addTag(tag.name)"
:key="tag.name"
>
<span class="oi oi-tag"></span> {{ tag.name }}
</li>
</ul>
</template>
</div>
@ -30,7 +41,9 @@
<div v-else class="row no-gutters">
<div class="col-12">
<div class="card-body">
<h6 class="card-title text-center font-weight-bold text-danger" style="font-size: small;"><span class="oi oi-circle-x"></span> オカズの情報を読み込めませんでした</h6>
<h6 class="card-title text-center font-weight-bold text-danger" style="font-size: small;">
<span class="oi oi-circle-x"></span> オカズの情報を読み込めませんでした
</h6>
</div>
</div>
</div>
@ -40,104 +53,104 @@
</template>
<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import {bus, MetadataLoadState} from "../checkin";
import { Vue, Component, Prop } from 'vue-property-decorator';
import { bus, MetadataLoadState } from '../checkin';
type Metadata = {
url: string,
title: string,
description: string,
image: string,
expires_at: string | null,
tags: {
name: string
}[],
};
type Metadata = {
url: string;
title: string;
description: string;
image: string;
expires_at: string | null;
tags: {
name: string;
}[];
};
type Suggestion = {
name: string,
used: boolean,
type Suggestion = {
name: string;
used: boolean;
};
@Component
export default class MetadataPreview extends Vue {
@Prop() readonly state!: MetadataLoadState;
@Prop() readonly metadata!: Metadata | null;
// for use in v-if
private readonly MetadataLoadState = MetadataLoadState;
tags: string[] = [];
created(): void {
bus.$on('change-tag', (tags: string[]) => (this.tags = tags));
bus.$emit('resend-tag');
}
@Component
export default class MetadataPreview extends Vue {
@Prop() readonly state!: MetadataLoadState;
@Prop() readonly metadata!: Metadata | null;
// for use in v-if
private readonly MetadataLoadState = MetadataLoadState;
tags: string[] = [];
created() {
bus.$on("change-tag", (tags: string[]) => this.tags = tags);
bus.$emit("resend-tag");
}
addTag(tag: string) {
bus.$emit("add-tag", tag);
}
tagClasses(s: Suggestion) {
return {
"list-inline-item": true,
"badge": true,
"badge-primary": !s.used,
"badge-secondary": s.used,
"metadata-tag-item": true,
};
}
get suggestions(): Suggestion[] {
if (this.metadata === null) {
return [];
}
return this.metadata.tags.map(t => {
return {
name: t.name,
used: this.tags.indexOf(t.name) !== -1
};
});
}
get hasImage() {
return this.metadata !== null && this.metadata.image !== ''
}
get descClasses() {
return {
"col-8": this.hasImage,
"col-12": !this.hasImage,
};
}
addTag(tag: string): void {
bus.$emit('add-tag', tag);
}
tagClasses(s: Suggestion) {
return {
'list-inline-item': true,
badge: true,
'badge-primary': !s.used,
'badge-secondary': s.used,
'metadata-tag-item': true,
};
}
get suggestions(): Suggestion[] {
if (this.metadata === null) {
return [];
}
return this.metadata.tags.map((t) => {
return {
name: t.name,
used: this.tags.indexOf(t.name) !== -1,
};
});
}
get hasImage() {
return this.metadata !== null && this.metadata.image !== '';
}
get descClasses() {
return {
'col-8': this.hasImage,
'col-12': !this.hasImage,
};
}
}
</script>
<style lang="scss" scoped>
.link-card-mini {
$height: 150px;
overflow: hidden;
.link-card-mini {
$height: 150px;
overflow: hidden;
.row > div:first-child {
display: flex;
.row > div:first-child {
display: flex;
&:not([display=none]) {
min-height: $height;
&:not([display='none']) {
min-height: $height;
img {
position: absolute;
}
img {
position: absolute;
}
}
.card-text {
white-space: pre-line;
}
}
.metadata-tag-item {
cursor: pointer;
user-select: none;
.card-text {
white-space: pre-line;
}
}
.metadata-tag-item {
cursor: pointer;
user-select: none;
}
</style>

View File

@ -1,96 +1,96 @@
<template>
<div :class="containerClass" @click="$refs.input.focus()">
<input :name="name" type="hidden" :value="tagValue">
<input :name="name" type="hidden" :value="tagValue" />
<ul class="list-inline d-inline">
<li v-for="(tag, i) in tags"
<li
v-for="(tag, i) in tags"
class="list-inline-item badge badge-primary tag-item"
@click="removeTag(i)"><span class="oi oi-tag"></span> {{ tag }} | x</li>
@click="removeTag(i)"
:key="tag"
>
<span class="oi oi-tag"></span> {{ tag }} | x
</li>
</ul>
<input :id="id"
ref="input"
type="text"
class="tag-input"
v-model="buffer"
@keydown="onKeyDown">
<input :id="id" ref="input" type="text" class="tag-input" v-model="buffer" @keydown="onKeyDown" />
</div>
</template>
<script lang="ts">
import {Vue, Component, Prop, Watch} from "vue-property-decorator";
import {bus} from "../checkin";
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { bus } from '../checkin';
@Component
export default class TagInput extends Vue {
@Prop(String) readonly id!: string;
@Prop(String) readonly name!: string;
@Prop(String) readonly value!: string;
@Prop(Boolean) readonly isInvalid!: boolean;
@Component
export default class TagInput extends Vue {
@Prop(String) readonly id!: string;
@Prop(String) readonly name!: string;
@Prop(String) readonly value!: string;
@Prop(Boolean) readonly isInvalid!: boolean;
tags: string[] = this.value.trim() !== "" ? this.value.trim().split(" ") : [];
buffer: string = "";
tags: string[] = this.value.trim() !== '' ? this.value.trim().split(' ') : [];
buffer = '';
created() {
bus.$on("add-tag", (tag: string) => this.tags.indexOf(tag) === -1 && this.tags.push(tag));
bus.$on("resend-tag", () => bus.$emit("change-tag", this.tags));
}
created() {
bus.$on('add-tag', (tag: string) => this.tags.indexOf(tag) === -1 && this.tags.push(tag));
bus.$on('resend-tag', () => bus.$emit('change-tag', this.tags));
}
onKeyDown(event: KeyboardEvent) {
if (this.buffer.trim() !== "") {
switch (event.key) {
case 'Tab':
case 'Enter':
case ' ':
if ((event as any).isComposing !== true) {
this.tags.push(this.buffer.trim());
this.buffer = "";
}
onKeyDown(event: KeyboardEvent) {
if (this.buffer.trim() !== '') {
switch (event.key) {
case 'Tab':
case 'Enter':
case ' ':
if ((event as any).isComposing !== true) {
this.tags.push(this.buffer.trim());
this.buffer = '';
}
event.preventDefault();
break;
case 'Unidentified':
// ()
if (event.srcElement && (event.srcElement as HTMLInputElement).value.slice(-1) == ' ') {
this.tags.push(this.buffer.trim());
this.buffer = '';
event.preventDefault();
break;
case 'Unidentified':
// ()
if (event.srcElement && (event.srcElement as HTMLInputElement).value.slice(-1) == ' ') {
this.tags.push(this.buffer.trim());
this.buffer = "";
event.preventDefault();
}
break;
}
} else if (event.key === "Enter") {
//
event.preventDefault();
}
break;
}
}
removeTag(index: number) {
this.tags.splice(index, 1);
}
@Watch("tags")
onTagsChanged() {
bus.$emit("change-tag", this.tags);
}
get containerClass(): object {
return {
"form-control": true,
"h-auto": true,
"is-invalid": this.isInvalid
};
}
get tagValue(): string {
return this.tags.join(" ");
} else if (event.key === 'Enter') {
//
event.preventDefault();
}
}
removeTag(index: number) {
this.tags.splice(index, 1);
}
@Watch('tags')
onTagsChanged() {
bus.$emit('change-tag', this.tags);
}
get containerClass() {
return {
'form-control': true,
'h-auto': true,
'is-invalid': this.isInvalid,
};
}
get tagValue(): string {
return this.tags.join(' ');
}
}
</script>
<style lang="scss" scoped>
.tag-item {
cursor: pointer;
}
.tag-item {
cursor: pointer;
}
.tag-input {
border: 0;
outline: 0;
}
.tag-input {
border: 0;
outline: 0;
}
</style>

View File

@ -1,38 +1,47 @@
import * as Chart from 'chart.js';
const graph = document.getElementById('global-count-graph') as HTMLCanvasElement;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const labels = JSON.parse(document.getElementById('global-count-labels')!.textContent as string);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const data = JSON.parse(document.getElementById('global-count-data')!.textContent as string);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
new Chart(graph.getContext('2d')!, {
type: 'bar',
data: {
labels,
datasets: [{
data,
backgroundColor: 'rgba(0, 0, 0, .1)',
borderColor: 'rgba(0, 0, 0, .25)',
borderWidth: 1
}]
datasets: [
{
data,
backgroundColor: 'rgba(0, 0, 0, .1)',
borderColor: 'rgba(0, 0, 0, .25)',
borderWidth: 1,
},
],
},
options: {
maintainAspectRatio: false,
legend: {
display: false
display: false,
},
elements: {
line: {}
line: {},
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false,
ticks: {
beginAtZero: true
}
}]
}
}
xAxes: [
{
display: false,
},
],
yAxes: [
{
display: false,
ticks: {
beginAtZero: true,
},
},
],
},
},
});

View File

@ -1,5 +1,7 @@
$('#protected').on('change', function () {
if (!$(this).prop('checked')) {
alert('チェックイン履歴を公開に切り替えると、個別に非公開設定されているものを除いた全てのチェックインが誰でも閲覧できるようになります。\nご注意ください。');
alert(
'チェックイン履歴を公開に切り替えると、個別に非公開設定されているものを除いた全てのチェックインが誰でも閲覧できるようになります。\nご注意ください。'
);
}
});
});

View File

@ -1,9 +1,11 @@
(function ($) {
$.fn.linkCard = function (options) {
const settings = $.extend({
endpoint: '/api/checkin/card'
}, options);
const settings = $.extend(
{
endpoint: '/api/checkin/card',
},
options
);
return this.each(function () {
const $this = $(this);
@ -12,8 +14,8 @@
method: 'get',
type: 'json',
data: {
url: $this.find('a').attr('href')
}
url: $this.find('a').attr('href'),
},
}).then(function (data) {
const $metaColumn = $this.find('.col-12:last-of-type');
const $imageColumn = $this.find('.col-12:first-of-type');
@ -55,18 +57,21 @@
$.fn.deleteCheckinModal = function () {
return this.each(function () {
$(this).on('show.bs.modal', function (event) {
const target = $(event.relatedTarget!);
const modal = $(this);
modal.find('.modal-body .date-label').text(target.data('date'));
modal.data('id', target.data('id'));
}).find('.btn-danger').on('click', function (event) {
const modal = $('#deleteCheckinModal');
const form = modal.find('form');
form.attr('action', form.attr('action')?.replace('@', modal.data('id')) || null);
form.submit();
})
$(this)
.on('show.bs.modal', function (event) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const target = $(event.relatedTarget!);
const modal = $(this);
modal.find('.modal-body .date-label').text(target.data('date'));
modal.data('id', target.data('id'));
})
.find('.btn-danger')
.on('click', function (_event) {
const modal = $('#deleteCheckinModal');
const form = modal.find('form');
form.attr('action', form.attr('action')?.replace('@', modal.data('id')) || null);
form.submit();
});
});
};
})(jQuery);

View File

@ -1,5 +1,5 @@
import * as CalHeatMap from 'cal-heatmap';
import {subMonths} from 'date-fns';
import { subMonths } from 'date-fns';
if (document.getElementById('cal-heatmap')) {
new CalHeatMap().init({
@ -10,7 +10,8 @@ if (document.getElementById('cal-heatmap')) {
weekStartOnMonday: false,
start: subMonths(new Date(), 9),
range: 10,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
data: JSON.parse(document.getElementById('count-by-day')!.textContent as string),
legend: [1, 2, 3, 4]
legend: [1, 2, 3, 4],
});
}

View File

@ -1,75 +1,86 @@
import * as CalHeatMap from 'cal-heatmap';
import * as Chart from 'chart.js';
import {addMonths, format} from 'date-fns';
import { addMonths, format } from 'date-fns';
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const graphData = JSON.parse(document.getElementById('graph-data')!.textContent as string);
function createLineGraph(id: string, labels: string[], data: any) {
const context = (document.getElementById(id) as HTMLCanvasElement).getContext('2d');
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return new Chart(context!, {
type: 'line',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
datasets: [
{
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
},
],
},
options: {
legend: {
display: false
display: false,
},
elements: {
line: {
tension: 0
}
tension: 0,
},
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
tooltips: {
mode: 'index',
intersect: false,
}
}
},
},
});
}
function createBarGraph(id: string, labels: string[], data: any) {
const context = (document.getElementById(id) as HTMLCanvasElement).getContext('2d');
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
new Chart(context!, {
type: 'bar',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
datasets: [
{
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
},
],
},
options: {
legend: {
display: false
display: false,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
tooltips: {
mode: 'index',
intersect: false,
}
}
},
},
});
}
@ -84,7 +95,7 @@ function createMonthlyGraphData(from: Date) {
values.push(graphData.monthlySum[yearAndMonth] || 0);
}
return {keys, values};
return { keys, values };
}
function getCurrentYear(): number {
@ -106,12 +117,14 @@ if (document.getElementById('cal-heatmap')) {
start: new Date(getCurrentYear(), 0, 1, 0, 0, 0, 0),
range: 12,
data: graphData.dailySum,
legend: [1, 2, 3, 4]
legend: [1, 2, 3, 4],
});
}
if (document.getElementById('monthly-graph')) {
const {keys: monthlyKey, values: monthlySum} = createMonthlyGraphData(new Date(getCurrentYear(), 0, 1, 0, 0, 0, 0));
const { keys: monthlyKey, values: monthlySum } = createMonthlyGraphData(
new Date(getCurrentYear(), 0, 1, 0, 0, 0, 0)
);
createLineGraph('monthly-graph', monthlyKey, monthlySum);
}
if (document.getElementById('yearly-graph')) {

630
yarn.lock

File diff suppressed because it is too large Load Diff