myxelium/Bridge-Multi
1
0
Fork 0
mirror of https://github.com/Myxelium/Bridge-Multi.git synced 2026-07-07 18:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve report modal

Browse Source
This commit is contained in:
Geomitron
2024-05-04 13:42:44 -05:00
parent 360d9f9759
commit 40946eb0c0
4 changed files with 93 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -82,8 +82,8 @@
"prettier": "^3.1.0", "prettier": "^3.1.0",
"prettier-eslint": "^16.1.2", "prettier-eslint": "^16.1.2",
"source-map-support": "^0.5.21", "source-map-support": "^0.5.21",
"tailwind-scrollbar": "^3.0.5", "tailwind-scrollbar": "^3.1.0",
"tailwindcss": "^3.3.5", "tailwindcss": "^3.4.3",
"typescript": "^5.2.2" "typescript": "^5.2.2"
} }
} }

24
pnpm-lock.yaml generated
View File

@@ -87,7 +87,7 @@ dependencies:
devDependencies: devDependencies:
'@angular-devkit/build-angular': '@angular-devkit/build-angular':
specifier: ^17.0.3 specifier: ^17.0.3
version: 17.0.3(@angular/compiler-cli@17.0.4)(@types/node@18.16.0)(tailwindcss@3.3.5)(typescript@5.2.2) version: 17.0.3(@angular/compiler-cli@17.0.4)(@types/node@18.16.0)(tailwindcss@3.4.3)(typescript@5.2.2)
'@angular-eslint/builder': '@angular-eslint/builder':
specifier: 17.1.0 specifier: 17.1.0
version: 17.1.0(eslint@8.54.0)(typescript@5.2.2) version: 17.1.0(eslint@8.54.0)(typescript@5.2.2)
@@ -173,11 +173,11 @@ devDependencies:
specifier: ^0.5.21 specifier: ^0.5.21
version: 0.5.21 version: 0.5.21
tailwind-scrollbar: tailwind-scrollbar:
specifier: ^3.0.5 specifier: ^3.1.0
version: 3.0.5(tailwindcss@3.3.5) version: 3.1.0(tailwindcss@3.4.3)
tailwindcss: tailwindcss:
specifier: ^3.3.5 specifier: ^3.4.3
version: 3.3.5 version: 3.4.3
typescript: typescript:
specifier: ^5.2.2 specifier: ^5.2.2
version: 5.2.2 version: 5.2.2
@@ -216,7 +216,7 @@ packages:
- chokidar - chokidar
dev: true dev: true
/@angular-devkit/build-angular@17.0.3(@angular/compiler-cli@17.0.4)(@types/node@18.16.0)(tailwindcss@3.3.5)(typescript@5.2.2): /@angular-devkit/build-angular@17.0.3(@angular/compiler-cli@17.0.4)(@types/node@18.16.0)(tailwindcss@3.4.3)(typescript@5.2.2):
resolution: {integrity: sha512-1lx0mERC1eTHX4vf8q7kUHZNHS0jwZxbwYHAISOplwHjkzRociX0W6rx04yMXn2NCSNhK+w3xbWyAIgyYbP9nA==} resolution: {integrity: sha512-1lx0mERC1eTHX4vf8q7kUHZNHS0jwZxbwYHAISOplwHjkzRociX0W6rx04yMXn2NCSNhK+w3xbWyAIgyYbP9nA==}
engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'} engines: {node: ^18.13.0 || >=20.9.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
peerDependencies: peerDependencies:
@@ -306,7 +306,7 @@ packages:
semver: 7.5.4 semver: 7.5.4
source-map-loader: 4.0.1(webpack@5.89.0) source-map-loader: 4.0.1(webpack@5.89.0)
source-map-support: 0.5.21 source-map-support: 0.5.21
tailwindcss: 3.3.5 tailwindcss: 3.4.3
terser: 5.24.0 terser: 5.24.0
text-table: 0.2.0 text-table: 0.2.0
tree-kill: 1.2.2 tree-kill: 1.2.2
@@ -9909,17 +9909,17 @@ packages:
tslib: 2.6.2 tslib: 2.6.2
dev: true dev: true
/tailwind-scrollbar@3.0.5(tailwindcss@3.3.5): /tailwind-scrollbar@3.1.0(tailwindcss@3.4.3):
resolution: {integrity: sha512-0ZwxTivevqq9BY9fRP9zDjHl7Tu+J5giBGbln+0O1R/7nHtBUKnjQcA1aTIhK7Oyjp6Uc/Dj6/dn8Dq58k5Uww==} resolution: {integrity: sha512-pmrtDIZeHyu2idTejfV59SbaJyvp1VRjYxAjZBH0jnyrPRo6HL1kD5Glz8VPagasqr6oAx6M05+Tuw429Z8jxg==}
engines: {node: '>=12.13.0'} engines: {node: '>=12.13.0'}
peerDependencies: peerDependencies:
tailwindcss: 3.x tailwindcss: 3.x
dependencies: dependencies:
tailwindcss: 3.3.5 tailwindcss: 3.4.3
dev: true dev: true
/tailwindcss@3.3.5: /tailwindcss@3.4.3:
resolution: {integrity: sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==} resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
hasBin: true hasBin: true
dependencies: dependencies:

77
src-angular/app/components/browse/chart-sidebar/chart-sidebar-menu/chart-sidebar-menu.component.html
View File

@@ -6,7 +6,7 @@
<button class="btn btn-secondary btn-xs flex-nowrap uppercase" (click)="reportModal.showModal()"> <button class="btn btn-secondary btn-xs flex-nowrap uppercase" (click)="reportModal.showModal()">
<i class="bi bi-exclamation-triangle text-sm text-secondary-content"></i> Report issue <i class="bi bi-exclamation-triangle text-sm text-secondary-content"></i> Report issue
</button> </button>
<dialog #reportModal id="report_modal" class="modal"> <dialog #reportModal class="modal">
@if (reportSent) { @if (reportSent) {
<div class="modal-box bg-base-100 text-base-content flex flex-col gap-2"> <div class="modal-box bg-base-100 text-base-content flex flex-col gap-2">
<form method="dialog"> <form method="dialog">
@@ -24,36 +24,53 @@
</button> </button>
</form> </form>
<h3 class="font-bold text-lg">Report Issue</h3> <h3 class="font-bold text-lg">Report Issue</h3>
<div> <form [formGroup]="reportForm">
@for (option of reportOptions; track $index) { <div
<div class="form-control"> [class.border-error]="reportOption.invalid && reportOption.touched"
<label class="label cursor-pointer justify-normal gap-2"> [class.border]="reportOption.invalid && reportOption.touched">
<input @for (option of reportOptions; track $index) {
type="radio" <div class="form-control">
name="selectedReportOption{{ selectedVersion.value.chartId }}" <label class="label cursor-pointer justify-normal gap-2">
class="radio checked:bg-red-500" <input type="radio" class="radio checked:bg-red-500" [value]="option" formControlName="reportOption" />
[value]="option" <span>{{ option }}</span>
[formControl]="reportOption" /> </label>
<span>{{ option }}</span> </div>
</label> }
</div>
}
</div>
<div class="form-control">
<div class="label">
<span class="label-text">More details <span class="text-error">*</span></span>
</div> </div>
<textarea <span *ngIf="reportOption.invalid && reportOption.touched" class="text-error">Please select an option.</span>
required <div *ngIf="!isFalseReportOption()" class="form-control">
class="textarea textarea-bordered h-24" <div class="label">
[class.border-error]="reportExtraInfo.invalid && reportExtraInfo.touched" <span class="label-text">More details <span class="text-error">*</span></span>
placeholder="Please be specific. Vague reports may be ignored if the problem is not obvious." </div>
[formControl]="reportExtraInfo"> <textarea
</textarea> required
<span *ngIf="reportExtraInfo.invalid && reportExtraInfo.touched" class="text-error">Please provide more details.</span> class="textarea textarea-bordered h-24"
</div> [class.border-error]="reportExtraInfo.invalid && reportExtraInfo.touched"
<span class="text-xs">Hint: if the chart isn't working at all, try updating your game and setting "Download Format" to "Chart Folder"</span> placeholder="Please be specific. Vague reports may be ignored if the problem is not obvious."
<div class="form-control flex-row justify-end"> formControlName="reportExtraInfo">
</textarea>
<span *ngIf="reportExtraInfo.invalid && reportExtraInfo.touched" class="text-error">Please provide more details.</span>
</div>
</form>
<span *ngIf="isFalseReportOption()" class="text-lg text-warning text-wrap">
@if (reportOption.value === 'No notes / chart ends immediately') {
This is not a problem with the chart! To fix this, please update Clone Hero to the latest version. You can get the latest version at
<a class="link" (click)="openUrl('https://clonehero.net')">clonehero.net</a>.
} @else if (reportOption.value === "Download doesn't work") {
Please click the progress bar in the lower-right of the program to see the error message. If you need help getting it to work,
please ask in the <a class="link" (click)="openUrl('https://discord.gg/cqaUXGm')">Chorus Encore Discord server</a>.
} @else if (reportOption.value === "Doesn't appear in Clone Hero") {
This is not a problem with the chart! Here are the most common reasons for this:
<ul class="list-disc pl-5">
<li>.sng files will not work with the latest CH version. They only work on the test build for the next version.</li>
<li>Your chart library directory is not set as a song path in CH.</li>
<li>You need to rescan songs in CH's settings menu.</li>
</ul>
If you're still having issues, please ask in the
<a class="link" (click)="openUrl('https://discord.gg/cqaUXGm')">Chorus Encore Discord server</a>.
}
</span>
<div *ngIf="!isFalseReportOption()" class="form-control flex-row justify-end">
<button class="btn btn-primary" (click)="report()">Submit</button> <button class="btn btn-primary" (click)="report()">Submit</button>
</div> </div>
</div> </div>

39
src-angular/app/components/browse/chart-sidebar/chart-sidebar-menu/chart-sidebar-menu.component.ts
View File

@@ -1,6 +1,6 @@
import { HttpClient } from '@angular/common/http' import { HttpClient } from '@angular/common/http'
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
import { FormControl, Validators } from '@angular/forms' import { FormControl, NonNullableFormBuilder, Validators } from '@angular/forms'
import { sortBy } from 'lodash' import { sortBy } from 'lodash'
import { environment } from 'src-angular/environments/environment' import { environment } from 'src-angular/environments/environment'
@@ -18,24 +18,40 @@ export class ChartSidebarMenutComponent implements OnInit {
public selectedVersion: FormControl<ChartData> public selectedVersion: FormControl<ChartData>
public reportOptions = [`Doesn't follow Chorus guidelines`, `Doesn't meet chart quality standards`, 'Other'] public reportOptions = [
public reportOption: FormControl<string> `Doesn't follow Chorus guidelines`,
public reportExtraInfo: FormControl<string> `Doesn't meet chart quality standards`,
'No notes / chart ends immediately',
`Download doesn't work`,
`Doesn't appear in Clone Hero`,
'Other',
] as const
public reportForm: ReturnType<this['getForm']>
public reportSent = false public reportSent = false
public reportMessage = '' public reportMessage = ''
constructor( constructor(
private http: HttpClient, private http: HttpClient,
private fb: NonNullableFormBuilder,
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
this.selectedVersion = new FormControl<ChartData>(this.displayVersions[0], { nonNullable: true }) this.selectedVersion = new FormControl<ChartData>(this.displayVersions[0], { nonNullable: true })
this.selectedVersion.valueChanges.subscribe(v => this.selectedVersionChanges.emit(v)) this.selectedVersion.valueChanges.subscribe(v => this.selectedVersionChanges.emit(v))
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.reportOption = new FormControl<string>(this.reportOptions[0], { nonNullable: true }) this.reportForm = this.getForm() as any
this.reportExtraInfo = new FormControl<string>('', { nonNullable: true, validators: [Validators.required] })
} }
getForm() {
return this.fb.group({
reportOption: this.fb.control(null as ChartSidebarMenutComponent['reportOptions'][number] | null, [Validators.required]),
reportExtraInfo: this.fb.control('', [Validators.required]),
})
}
get reportOption() { return this.reportForm.get('reportOption')! }
get reportExtraInfo() { return this.reportForm.get('reportExtraInfo')! }
get displayVersions() { get displayVersions() {
return sortBy(this.chartVersions, v => v.modifiedTime).reverse() return sortBy(this.chartVersions, v => v.modifiedTime).reverse()
} }
@@ -63,6 +79,15 @@ export class ChartSidebarMenutComponent implements OnInit {
return breadcrumbs return breadcrumbs
} }
isFalseReportOption() {
switch (this.reportOption.value) {
case 'No notes / chart ends immediately': return true
case `Download doesn't work`: return true
case `Doesn't appear in Clone Hero`: return true
default: return false
}
}
openUrl(url: string) { openUrl(url: string) {
window.electron.emit.openUrl(url) window.electron.emit.openUrl(url)
} }