Arno Kaimbacher
b540547e4c
All checks were successful
CI / container-job (push) Successful in 49s
- Modified Api/Authors.Controller.ts to use only personal types and sort by dataset_count. - Completely rewritten AvatarController.ts. - Added new Api/CollectionsController.ts for querying collections and collection_roles. - Modified Api/DatasetController.ts to preload titles, identifier and order by server_date_published. - Modified FileController.ts to serve files from /storage/app/data/ instead of /storage/app/public. - Added new Api/UserController for requesting submitters (getSubmitters). - Improved OaiController.ts with performant DB queries for better ResumptionToken handling. - Modified Submitter/DatasetController.ts by adding a categorize method for library classification. - Rewritten ResumptionToken.ts. - Improved TokenWorkerService.ts to utilize browser fingerprint. - Edited dataset.ts by adding the doiIdentifier property. - Enhanced person.ts to improve the fullName property. - Completely rewritten AsideMenuItem.vue component. - Updated CarBoxClient.vue to use TypeScript. - Added new CardBoxDataset.vue for displaying recent datasets on the dashboard. - Completely rewritten TableSampleClients.vue for the dashboard. - Completely rewritten UserAvatar.vue. - Made small layout changes in Dashboard.vue. - Added new Category.vue for browsing scientific collections. - Adapted the pinia store in main.ts. - Added additional routes in start/routes.ts and start/api/routes.ts. - Improved referenceValidation.ts for better ISBN existence checking. - NPM dependency updates.
85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
username: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
defaultUrl: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
api: {
|
|
type: String,
|
|
default: 'avataaars',
|
|
},
|
|
});
|
|
|
|
const avatar = computed(() => {
|
|
return props.defaultUrl ?? generateAvatarUrl(props.username);
|
|
});
|
|
|
|
const username = computed(() => props.username);
|
|
|
|
// const darkenColor = (color: string) => {
|
|
// const r = parseInt(color.slice(0, 2), 16);
|
|
// const g = parseInt(color.slice(2, 4), 16);
|
|
// const b = parseInt(color.slice(4, 6), 16);
|
|
|
|
// const darkerR = Math.round(r * 0.6);
|
|
// const darkerG = Math.round(g * 0.6);
|
|
// const darkerB = Math.round(b * 0.6);
|
|
|
|
// const darkerColor = ((darkerR << 16) + (darkerG << 8) + darkerB).toString(16);
|
|
|
|
// return darkerColor.padStart(6, '0');
|
|
// };
|
|
|
|
// const getColorFromName = (name: string): string => {
|
|
// let hash = 0;
|
|
// for (let i = 0; i < name.length; i++) {
|
|
// hash = name.charCodeAt(i) + ((hash << 5) - hash);
|
|
// }
|
|
// let color = '#';
|
|
// for (let i = 0; i < 3; i++) {
|
|
// const value = (hash >> (i * 8)) & 0xff;
|
|
// color += ('00' + value.toString(16)).substr(-2);
|
|
// }
|
|
// return color.replace('#', '');
|
|
// };
|
|
|
|
// const lightenColor = (hexColor: string, percent: number): string => {
|
|
// let r = parseInt(hexColor.substring(0, 2), 16);
|
|
// let g = parseInt(hexColor.substring(2, 4), 16);
|
|
// let b = parseInt(hexColor.substring(4, 6), 16);
|
|
|
|
// r = Math.floor(r * (100 + percent) / 100);
|
|
// g = Math.floor(g * (100 + percent) / 100);
|
|
// b = Math.floor(b * (100 + percent) / 100);
|
|
|
|
// r = (r < 255) ? r : 255;
|
|
// g = (g < 255) ? g : 255;
|
|
// b = (b < 255) ? b : 255;
|
|
|
|
// const lighterHex = ((r << 16) | (g << 8) | b).toString(16);
|
|
|
|
// return lighterHex.padStart(6, '0');
|
|
// };
|
|
|
|
const generateAvatarUrl = (name: string): string => {
|
|
// const originalColor = getColorFromName(name);
|
|
// const backgroundColor = lightenColor(originalColor, 60);
|
|
// const textColor = darkenColor(originalColor);
|
|
|
|
const avatarUrl = `/api/avatar?name=${name}&size=50`;
|
|
return avatarUrl;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<img :src="avatar" :alt="username"
|
|
class="rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800" />
|
|
</div>
|
|
</template>
|