92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<template>
|
|
<div class="profile-analysis-wrapper" ref="profileAnalysisWrapper">
|
|
<div v-if="!analyzing && !recommendations.length">
|
|
<h3>Looking good!</h3>
|
|
<p>The profile analyzer could not find any improvement recommendations for your profile.</p>
|
|
</div>
|
|
|
|
<div v-else-if="analyzing && !recommendations.length">
|
|
<p>Having problems with finding good matches?</p>
|
|
<p> </p>
|
|
<p>The profile analyzer will identify if your profile could benefit from adjustments.</p>
|
|
<p> </p>
|
|
<h3>Analyzing...</h3>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<p>Having problems with finding good matches?</p>
|
|
<p> </p>
|
|
<p>The profile analyzer recommends the following adjustments to your profile:</p>
|
|
|
|
<ul>
|
|
<li v-for="r in recommendations" class="recommendation" :class="r.level">
|
|
<h3>{{r.title}}</h3>
|
|
<p>{{r.desc}}</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component } from '@f-list/vue-ts';
|
|
import Vue from 'vue';
|
|
import core from '../../chat/core';
|
|
import { ProfileRecommendation, ProfileRecommendationAnalyzer } from './profile-recommendation';
|
|
import { CharacterAnalysis } from '../matcher';
|
|
import { methods } from '../../site/character_page/data_store';
|
|
|
|
@Component({})
|
|
export default class ProfileAnalysis extends Vue {
|
|
recommendations: ProfileRecommendation[] = [];
|
|
analyzing = false;
|
|
|
|
async analyze() {
|
|
this.analyzing = true;
|
|
this.recommendations = [];
|
|
|
|
const char = await methods.characterData(core.characters.ownProfile.character.name, core.characters.ownProfile.character.id, true);
|
|
const profile = new CharacterAnalysis(char.character);
|
|
const analyzer = new ProfileRecommendationAnalyzer(profile);
|
|
|
|
this.analyzing = false;
|
|
|
|
this.recommendations = analyzer.analyze();
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
|
|
.profile-analysis-wrapper {
|
|
h3 {
|
|
font-size: 130%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 95%;
|
|
margin: 0;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
padding: 10px;
|
|
margin: 5px;
|
|
line-height: 120%;
|
|
border-radius: 3px;
|
|
|
|
&.critical {
|
|
background-color: var(--scoreMismatchBg);
|
|
}
|
|
|
|
&.note {
|
|
background-color: var(--scoreWeakMismatchBg);
|
|
}
|
|
}
|
|
}
|
|
</style>
|