Merge branch 'develop' into feature/300-incoming-webhook
# Conflicts: # package.json # webpack.mix.js # yarn.lockdevelop
shibafu
3 years ago
commit
c680cd8d8e
@ -0,0 +1,33 @@
|
||||
<?php
|
||||
|
||||
namespace App\MetadataResolver;
|
||||
|
||||
use GuzzleHttp\Client;
|
||||
|
||||
class TwitterResolver implements Resolver
|
||||
{
|
||||
/**
|
||||
* @var Client
|
||||
*/
|
||||
private $client;
|
||||
/**
|
||||
* @var OGPResolver
|
||||
*/
|
||||
private $ogpResolver;
|
||||
|
||||
public function __construct(Client $client, OGPResolver $ogpResolver)
|
||||
{
|
||||
$this->client = $client;
|
||||
$this->ogpResolver = $ogpResolver;
|
||||
}
|
||||
|
||||
public function resolve(string $url): Metadata
|
||||
{
|
||||
$url = preg_replace('/(www\.)?(mobile|m)\.twitter\.com/u', 'twitter.com', $url);
|
||||
|
||||
$res = $this->client->get($url);
|
||||
$html = (string) $res->getBody();
|
||||
|
||||
return $this->ogpResolver->parse($html);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
<?php
|
||||
|
||||
namespace App\Rules;
|
||||
|
||||
use Illuminate\Contracts\Validation\Rule;
|
||||
|
||||
class FuzzyBoolean implements Rule
|
||||
{
|
||||
public static function isTruthy($value): bool
|
||||
{
|
||||
if ($value === 1 || $value === '1') {
|
||||
return true;
|
||||
}
|
||||
|
||||
$lower = strtolower((string)$value);
|
||||
|
||||
return $lower === 'true';
|
||||
}
|
||||
|
||||
public static function isFalsy($value): bool
|
||||
{
|
||||
if ($value === null || $value === '' || $value === 0 || $value === '0') {
|
||||
return true;
|
||||
}
|
||||
|
||||
$lower = strtolower((string)$value);
|
||||
|
||||
return $lower === 'false';
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new rule instance.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function __construct()
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if the validation rule passes.
|
||||
*
|
||||
* @param string $attribute
|
||||
* @param mixed $value
|
||||
* @return bool
|
||||
*/
|
||||
public function passes($attribute, $value)
|
||||
{
|
||||
return self::isTruthy($value) || self::isFalsy($value);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the validation error message.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function message()
|
||||
{
|
||||
return __('validation.boolean');
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
// tissue.ts で定義されているjQuery Pluginの型定義
|
||||
declare namespace JQueryTissue {
|
||||
interface LinkCardOptions {
|
||||
endpoint: string;
|
||||
}
|
||||
}
|
||||
|
||||
interface JQuery<TElement = HTMLElement> {
|
||||
linkCard: (options?: JQueryTissue.LinkCardOptions) => this;
|
||||
pageSelector: () => this;
|
||||
deleteCheckinModal: () => this;
|
||||
}
|
||||
@ -1,5 +1,2 @@
|
||||
// jQuery
|
||||
import './tissue';
|
||||
|
||||
// Bootstrap
|
||||
import 'bootstrap';
|
||||
|
||||
@ -1,68 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import TagInput from './components/TagInput.vue';
|
||||
import MetadataPreview from './components/MetadataPreview.vue';
|
||||
import { fetchGet, ResponseError } from './fetch';
|
||||
|
||||
export const bus = new Vue({ name: 'EventBus' });
|
||||
|
||||
export enum MetadataLoadState {
|
||||
Inactive,
|
||||
Loading,
|
||||
Success,
|
||||
Failed,
|
||||
}
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
metadata: null,
|
||||
metadataLoadState: MetadataLoadState.Inactive,
|
||||
},
|
||||
components: {
|
||||
TagInput,
|
||||
MetadataPreview,
|
||||
},
|
||||
mounted() {
|
||||
// オカズリンクにURLがセットされている場合は、すぐにメタデータを取得する
|
||||
const linkInput = this.$el.querySelector<HTMLInputElement>('#link');
|
||||
if (linkInput && /^https?:\/\//.test(linkInput.value)) {
|
||||
this.fetchMetadata(linkInput.value);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// オカズリンクの変更時
|
||||
onChangeLink(event: Event) {
|
||||
if (event.target instanceof HTMLInputElement) {
|
||||
const url = event.target.value;
|
||||
|
||||
if (url.trim() === '' || !/^https?:\/\//.test(url)) {
|
||||
this.metadata = null;
|
||||
this.metadataLoadState = MetadataLoadState.Inactive;
|
||||
return;
|
||||
}
|
||||
|
||||
this.fetchMetadata(url);
|
||||
}
|
||||
},
|
||||
// メタデータの取得
|
||||
fetchMetadata(url: string) {
|
||||
this.metadataLoadState = MetadataLoadState.Loading;
|
||||
|
||||
fetchGet('/api/checkin/card', { url })
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new ResponseError(response);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
this.metadata = data;
|
||||
this.metadataLoadState = MetadataLoadState.Success;
|
||||
})
|
||||
.catch(() => {
|
||||
this.metadata = null;
|
||||
this.metadataLoadState = MetadataLoadState.Failed;
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,6 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { CheckinForm } from './components/CheckinForm';
|
||||
|
||||
const initialState = JSON.parse(document.getElementById('initialState')?.textContent as string);
|
||||
ReactDOM.render(<CheckinForm initialState={initialState} />, document.getElementById('checkinForm'));
|
||||
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
|
||||
type CheckboxProps = {
|
||||
id: string;
|
||||
name: string;
|
||||
className?: string;
|
||||
checked?: boolean;
|
||||
onChange?: (newValue: boolean) => void;
|
||||
};
|
||||
|
||||
export const CheckBox: React.FC<CheckboxProps> = ({ id, name, className, checked, onChange, children }) => (
|
||||
<div className={`custom-control custom-checkbox ${className}`}>
|
||||
<input
|
||||
id={id}
|
||||
name={name}
|
||||
type="checkbox"
|
||||
className="custom-control-input"
|
||||
checked={checked}
|
||||
onChange={(e) => onChange && onChange(e.target.checked)}
|
||||
/>
|
||||
<label className="custom-control-label" htmlFor={id}>
|
||||
{children}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
|
||||
type FieldErrorProps = {
|
||||
errors?: string[];
|
||||
};
|
||||
|
||||
export const FieldError: React.FC<FieldErrorProps> = ({ errors }) =>
|
||||
(errors && errors.length > 0 && <div className="invalid-feedback">{errors[0]}</div>) || null;
|
||||
|
||||
export const StandaloneFieldError: React.FC<FieldErrorProps> = ({ errors }) =>
|
||||
(errors && errors.length > 0 && (
|
||||
<div className="form-group col-sm-12" style={{ marginTop: '-1rem' }}>
|
||||
<small className="text-danger">{errors[0]}</small>
|
||||
</div>
|
||||
)) ||
|
||||
null;
|
||||
@ -0,0 +1,157 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { fetchGet, ResponseError } from '../fetch';
|
||||
|
||||
enum MetadataLoadState {
|
||||
Inactive,
|
||||
Loading,
|
||||
Success,
|
||||
Failed,
|
||||
}
|
||||
|
||||
type Metadata = {
|
||||
url: string;
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
expires_at: string | null;
|
||||
tags: {
|
||||
name: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
type Suggestion = {
|
||||
name: string;
|
||||
used: boolean;
|
||||
};
|
||||
|
||||
type MetadataPreviewProps = {
|
||||
link: string;
|
||||
tags: string[];
|
||||
onClickTag: (tag: string) => void;
|
||||
};
|
||||
|
||||
const MetadataLoading = () => (
|
||||
<div className="row no-gutters">
|
||||
<div className="col-12">
|
||||
<div className="card-body">
|
||||
<h6 className="card-title text-center font-weight-bold text-info">
|
||||
<span className="oi oi-loop-circular" /> オカズの情報を読み込んでいます…
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const MetadataLoadFailed = () => (
|
||||
<div className="row no-gutters">
|
||||
<div className="col-12">
|
||||
<div className="card-body">
|
||||
<h6 className="card-title text-center font-weight-bold text-danger">
|
||||
<span className="oi oi-circle-x" /> オカズの情報を読み込めませんでした
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const MetadataPreview: React.FC<MetadataPreviewProps> = ({ link, tags, onClickTag }) => {
|
||||
const [state, setState] = useState(MetadataLoadState.Inactive);
|
||||
const [metadata, setMetadata] = useState<Metadata | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (link.trim() === '' || !/^https?:\/\//.test(link)) {
|
||||
setState(MetadataLoadState.Inactive);
|
||||
setMetadata(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setState(MetadataLoadState.Loading);
|
||||
fetchGet('/api/checkin/card', { url: link })
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new ResponseError(response);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
setState(MetadataLoadState.Success);
|
||||
setMetadata(data);
|
||||
})
|
||||
.catch(() => {
|
||||
setState(MetadataLoadState.Failed);
|
||||
setMetadata(null);
|
||||
});
|
||||
}, [link]);
|
||||
|
||||
if (state === MetadataLoadState.Inactive) {
|
||||
return null;
|
||||
}
|
||||
const hasImage = metadata !== null && metadata.image !== '';
|
||||
const descClasses = classNames({
|
||||
'col-8': hasImage,
|
||||
'col-12': !hasImage,
|
||||
});
|
||||
const tagClasses = (s: Suggestion) =>
|
||||
classNames({
|
||||
'list-inline-item': true,
|
||||
badge: true,
|
||||
'badge-primary': !s.used,
|
||||
'badge-secondary': s.used,
|
||||
'metadata-tag-item': true,
|
||||
});
|
||||
const suggestions =
|
||||
metadata?.tags.map((t) => ({
|
||||
name: t.name,
|
||||
used: tags.indexOf(t.name) !== -1,
|
||||
})) ?? [];
|
||||
|
||||
return (
|
||||
<div className="form-row">
|
||||
<div className="form-group col-sm-12">
|
||||
<div className="card tis-metadata-preview-link-card mb-2 px-0">
|
||||
{state === MetadataLoadState.Loading ? (
|
||||
<MetadataLoading />
|
||||
) : state === MetadataLoadState.Success ? (
|
||||
<div className="row no-gutters">
|
||||
{hasImage && (
|
||||
<div className="col-4 justify-content-center align-items-center">
|
||||
<img src={metadata?.image} alt="Thumbnail" className="w-100 bg-secondary" />
|
||||
</div>
|
||||
)}
|
||||
<div className={descClasses}>
|
||||
<div className="card-body">
|
||||
<h6 className="card-title font-weight-bold">{metadata?.title}</h6>
|
||||
{suggestions.length > 0 && (
|
||||
<>
|
||||
<p className="card-text mb-2">
|
||||
タグ候補
|
||||
<br />
|
||||
<span className="text-secondary">
|
||||
(クリックするとタグ入力欄にコピーできます)
|
||||
</span>
|
||||
</p>
|
||||
<ul className="list-inline d-inline">
|
||||
{suggestions.map((tag) => (
|
||||
<li
|
||||
key={tag.name}
|
||||
className={tagClasses(tag)}
|
||||
onClick={() => onClickTag(tag.name)}
|
||||
>
|
||||
<span className="oi oi-tag" /> {tag.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<MetadataLoadFailed />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,156 +0,0 @@
|
||||
<template>
|
||||
<div class="form-row" v-if="state !== MetadataLoadState.Inactive">
|
||||
<div class="form-group col-sm-12">
|
||||
<div class="card link-card-mini mb-2 px-0">
|
||||
<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>
|
||||
</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" />
|
||||
</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>
|
||||
<ul class="list-inline d-inline">
|
||||
<li
|
||||
v-for="tag in suggestions"
|
||||
:class="tagClasses(tag)"
|
||||
@click="addTag(tag.name)"
|
||||
:key="tag.name"
|
||||
>
|
||||
<span class="oi oi-tag"></span> {{ tag.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
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 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');
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
.row > div:first-child {
|
||||
display: flex;
|
||||
|
||||
&:not([display='none']) {
|
||||
min-height: $height;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-text {
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
|
||||
.metadata-tag-item {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
type TagInputProps = {
|
||||
id: string;
|
||||
name: string;
|
||||
values: string[];
|
||||
isInvalid: boolean;
|
||||
onChange?: (newValues: string[]) => void;
|
||||
};
|
||||
|
||||
export const TagInput: React.FC<TagInputProps> = ({ id, name, values, isInvalid, onChange }) => {
|
||||
const [buffer, setBuffer] = useState('');
|
||||
const containerClass = classNames('form-control', 'h-auto', { 'is-invalid': isInvalid });
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const removeTag = (index: number) => {
|
||||
onChange && onChange(values.filter((v, i) => i != index));
|
||||
};
|
||||
const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (buffer.trim() !== '') {
|
||||
switch (event.key) {
|
||||
case 'Tab':
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
if ((event as any).isComposing !== true) {
|
||||
onChange && onChange(values.concat(buffer.trim().replace(/\s+/g, '_')));
|
||||
setBuffer('');
|
||||
}
|
||||
event.preventDefault();
|
||||
break;
|
||||
case 'Unidentified': {
|
||||
// 実際にテキストボックスに入力されている文字を見に行く (フォールバック処理)
|
||||
const nativeEvent = event.nativeEvent;
|
||||
if (nativeEvent.srcElement && (nativeEvent.srcElement as HTMLInputElement).value.slice(-1) == ' ') {
|
||||
onChange && onChange(values.concat(buffer.trim().replace(/\s+/g, '_')));
|
||||
setBuffer('');
|
||||
event.preventDefault();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (event.key === 'Enter') {
|
||||
// 誤爆防止
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={containerClass} onClick={() => inputRef.current?.focus()}>
|
||||
<input name={name} type="hidden" value={values.join(' ')} />
|
||||
<ul className="list-inline d-inline">
|
||||
{values.map((tag, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className={classNames('list-inline-item', 'badge', 'badge-primary', 'tis-tag-input-item')}
|
||||
onClick={() => removeTag(i)}
|
||||
>
|
||||
<span className="oi oi-tag" /> {tag} | x
|
||||
</li>
|
||||
))}
|
||||
<li className="list-inline-item">
|
||||
<input
|
||||
id={id}
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
className="tis-tag-input-field"
|
||||
value={buffer}
|
||||
onChange={(e) => setBuffer(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div :class="containerClass" @click="$refs.input.focus()">
|
||||
<input :name="name" type="hidden" :value="tagValue" />
|
||||
<ul class="list-inline d-inline">
|
||||
<li
|
||||
v-for="(tag, i) in tags"
|
||||
class="list-inline-item badge badge-primary tag-item"
|
||||
@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" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
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;
|
||||
|
||||
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));
|
||||
}
|
||||
|
||||
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().replace(/\s+/g, '_'));
|
||||
this.buffer = '';
|
||||
}
|
||||
event.preventDefault();
|
||||
break;
|
||||
case 'Unidentified':
|
||||
// 実際にテキストボックスに入力されている文字を見に行く (フォールバック処理)
|
||||
if (event.srcElement && (event.srcElement as HTMLInputElement).value.slice(-1) == ' ') {
|
||||
this.tags.push(this.buffer.trim().replace(/\s+/g, '_'));
|
||||
this.buffer = '';
|
||||
event.preventDefault();
|
||||
}
|
||||
break;
|
||||
}
|
||||
} 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-input {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,80 +1,73 @@
|
||||
import { fetchGet } from './fetch';
|
||||
|
||||
(function ($) {
|
||||
$.fn.linkCard = function (options) {
|
||||
const settings = $.extend(
|
||||
{
|
||||
endpoint: '/api/checkin/card',
|
||||
},
|
||||
options
|
||||
);
|
||||
export function suicide<T>(e: T) {
|
||||
return function (): never {
|
||||
throw e;
|
||||
};
|
||||
}
|
||||
|
||||
return this.each(function () {
|
||||
const $this = $(this);
|
||||
const die = suicide('Element not found!');
|
||||
|
||||
const url = $this.find('a').attr('href');
|
||||
if (!url) {
|
||||
return;
|
||||
}
|
||||
export function linkCard(el: Element) {
|
||||
const url = el.querySelector('a')?.href;
|
||||
if (!url) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetchGet(settings.endpoint, { url })
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const $metaColumn = $this.find('.col-12:last-of-type');
|
||||
const $imageColumn = $this.find('.col-12:first-of-type');
|
||||
const $title = $this.find('.card-title');
|
||||
const $desc = $this.find('.card-text');
|
||||
const $image = $imageColumn.find('img');
|
||||
fetchGet('/api/checkin/card', { url })
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
const metaColumn = el.querySelector('.col-12:last-of-type') || die();
|
||||
const imageColumn = el.querySelector<HTMLElement>('.col-12:first-of-type') || die();
|
||||
const title = el.querySelector<HTMLElement>('.card-title') || die();
|
||||
const desc = el.querySelector<HTMLElement>('.card-text') || die();
|
||||
const image = imageColumn.querySelector('img') || die();
|
||||
|
||||
if (data.title === '') {
|
||||
$title.hide();
|
||||
} else {
|
||||
$title.text(data.title);
|
||||
}
|
||||
if (data.title === '') {
|
||||
title.style.display = 'none';
|
||||
} else {
|
||||
title.textContent = data.title;
|
||||
}
|
||||
|
||||
if (data.description === '') {
|
||||
$desc.hide();
|
||||
} else {
|
||||
$desc.text(data.description);
|
||||
}
|
||||
if (data.description === '') {
|
||||
desc.style.display = 'none';
|
||||
} else {
|
||||
desc.textContent = data.description;
|
||||
}
|
||||
|
||||
if (data.image === '') {
|
||||
$imageColumn.hide();
|
||||
$metaColumn.removeClass('col-md-6');
|
||||
} else {
|
||||
$image.attr('src', data.image);
|
||||
}
|
||||
if (data.image === '') {
|
||||
imageColumn.style.display = 'none';
|
||||
metaColumn.classList.remove('col-md-6');
|
||||
} else {
|
||||
image.src = data.image;
|
||||
}
|
||||
|
||||
if (data.title !== '' || data.description !== '' || data.image !== '') {
|
||||
$this.removeClass('d-none');
|
||||
}
|
||||
});
|
||||
if (data.title !== '' || data.description !== '' || data.image !== '') {
|
||||
el.classList.remove('d-none');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.pageSelector = function () {
|
||||
return this.on('change', function () {
|
||||
location.href = $(this).find(':selected').data('href');
|
||||
});
|
||||
};
|
||||
return el;
|
||||
}
|
||||
|
||||
$.fn.deleteCheckinModal = function () {
|
||||
return this.each(function () {
|
||||
$(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();
|
||||
});
|
||||
export function pageSelector(el: Element) {
|
||||
if (el instanceof HTMLSelectElement) {
|
||||
el.addEventListener('change', function () {
|
||||
location.href = this.options[this. | ||||