Skip to content

T
t3
Commit f094ff9f authored by Olivia Madrid's avatar Olivia Madrid
Browse files
Options

change default view and more

parent 6bbbe394
master
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 505 deletions
app/src/app/modules/trust/trust.component.html
View file @ f094ff9f
......@@ -69,8 +69,30 @@
<div class="score">
{{ user.score | number: "0.1-3" | percent }}
</div>
<div class="scoreSubtitle">Trustworthy</div>
</div>
<!-- METRICS -->
<div class="metricsWrapper">
<!-- THERMOMETER -->
<div class="thermometerContainer">
<div class="thermometerWrapper">
<div class="thermometer"></div>
<!-- [@pointerSlideAnimation]="!hasRecalculated ? 'current' : 'new'" -->
<div class="pointerWrapper">
<i
class="material-icons pointer"
[style.left.%]="user.score * 94"
>arrow_drop_up</i
>
</div>
</div>
</div>
<!-- SCORE -->
<div class="scoreWrapper">
<div class="score">
{{ user.score | number: '0.1-3' | percent }}
</div>
<div class="scoreSubtitle">Trustworthy</div>
</div>
<!-- DETAILS -->
<div class="detailsWrapper">
......
app/src/app/modules/trust/trust.component.scss
View file @ f094ff9f
......@@ -6,8 +6,6 @@ $bezier: cubic-bezier(0.23, 1, 0.32, 1);
:root {
font-family: Arial, Helvetica, sans-serif;
color: $coolGrey;
text-align: center;
// color: #444;
}
h1 {
......@@ -113,12 +111,7 @@ h1 {
border-radius: 6px;
height: 8px;
width: 100%;
background: linear-gradient(
to right,
rgba($red, 0.6) 0%,
rgba(#000, 0.2) 50%,
rgba($green, 0.6) 80%
);
background: linear-gradient(to right, rgba($red, 0.6) 0%, rgba(#000, 0.2) 50%, rgba($green, 0.6) 80%);
}
.pointer {
font-size: 70px;
......@@ -154,8 +147,46 @@ h1 {
transition: color 0.4s $bezier;
> * {
&:hover {
cursor: pointer;
color: rgba($coolGrey, 0.7);
transform: scale(1.2, 1.2);
color: #999;
}
}
.avatar {
padding: 16px;
img {
border-radius: 50%;
width: 300px;
height: 300px;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
object-fit: cover;
margin: auto;
}
}
}
.metricsWrapper {
.thermometerContainer {
padding-top: 16px;
.thermometerWrapper {
position: relative;
width: 80%;
margin: auto;
.thermometer {
border-radius: 6px;
height: 8px;
width: 100%;
background: linear-gradient(to right, rgba($red, 0.6) 0%, rgba(#000, 0.2) 50%, rgba($green, 0.6) 80%);
}
.pointerWrapper {
.pointer {
font-size: 70px;
position: absolute;
top: -18px;
color: #555;
}
}
}
}
.detailsHeader__left {
......
app/src/app/modules/trust/trust.component.ts
View file @ f094ff9f
import {
Component,
EventEmitter,
Input,
Output,
OnInit,
OnDestroy
} from "@angular/core";
import { Component, OnInit, OnDestroy } from '@angular/core';
import {
trigger,
state,
style,
animate,
transition
} from "@angular/animations";
import { T3TrustService } from "./trust.service";
import { T3TrustTraversalService } from "./traversal.service";
} from '@angular/animations';
import { T3TrustService } from './trust.service';
import { T3TrustTraversalService } from './traversal.service';
@Component({
selector: "t3-trust",
templateUrl: "./trust.component.html",
styleUrls: ["trust.component.scss"],
selector: 't3-trust',
templateUrl: './trust.component.html',
styleUrls: ['trust.component.scss'],
animations: [
// Fade media in after load
trigger("fadeAnimation", [
trigger('fadeAnimation', [
state(
"in",
'in',
style({
opacity: 1
})
),
state(
"out",
'out',
style({
opacity: 0.3
})
),
transition("in <=> out", [animate("100ms")])
transition('in <=> out', [animate('100ms')])
])
// trigger('pointerSlideAnimation', [
// state(
// 'current',
// style({
// left: this.currentScore * 100 + '%'
// })
// ),
// state(
// 'new',
// style({
// left: this.newScore * 100 + '%'
// })
// ),
// transition('old <=> new', [animate('1000ms')])
// ])
]
})
export class T3TrustComponent implements OnInit, OnDestroy {
// @Input() object: any;
// @Output("done") doneEmitter: EventEmitter<any> = new EventEmitter();
actorDid: string = "000";
showDetails: boolean = true; // ! default to false?
view: string = 'unlock';
actorDid: string = '000';
showDetails: boolean = false;
user: any = null;
hasVotedOnUser: boolean = false;
hasVotedOnUserThisSession: boolean = false;
......@@ -97,43 +73,43 @@ export class T3TrustComponent implements OnInit, OnDestroy {
// ! remove one of these later
usersRaw: Array<any> = [
{
entity_did: "did:fake:2",
entity_did: 'did:fake:2',
score: 0.33,
name: "Sideshow Bob",
avatarUrl: "/assets/brewski.jpg"
name: 'Sideshow Bob',
avatarUrl: '/assets/brewski.jpg'
},
{
entity_did: "did:fake:3",
entity_did: 'did:fake:3',
score: 0.77,
name: "Good girl",
avatarUrl: "/assets/avatar.png"
name: 'Good girl',
avatarUrl: '/assets/avatar.png'
},
{
entity_did: "did:fake:4",
entity_did: 'did:fake:4',
score: 1.0,
name: "Astronaut Lily",
avatarUrl: "/assets/moonlily.jpg"
name: 'Astronaut Lily',
avatarUrl: '/assets/moonlily.jpg'
}
];
users: Array<any> = [
{
entity_did: "did:fake:2",
entity_did: 'did:fake:2',
score: 0.33,
name: "Sideshow Bob",
avatarUrl: "/assets/brewski.jpg"
name: 'Sideshow Bob',
avatarUrl: '/assets/brewski.jpg'
},
{
entity_did: "did:fake:3",
entity_did: 'did:fake:3',
score: 0.77,
name: "Good girl",
avatarUrl: "/assets/avatar.png"
name: 'Good girl',
avatarUrl: '/assets/avatar.png'
},
{
entity_did: "did:fake:4",
score: 1.0,
name: "Astronaut Lily",
avatarUrl: "/assets/moonlily.jpg"
entity_did: 'did:fake:4',
score: 0.9,
name: 'Astronaut Lily',
avatarUrl: '/assets/moonlily.jpg'
}
];
......@@ -146,9 +122,9 @@ export class T3TrustComponent implements OnInit, OnDestroy {
ngOnInit() {
this.traversalService.fetchFromEthereum(
"0x3e010d48eeE73c9f545591C52E3bD23a7340A91F"
'0x3e010d48eeE73c9f545591C52E3bD23a7340A91F'
);
this.finalTrustTree = this.trustService.getTrustTree("1");
this.finalTrustTree = this.trustService.getTrustTree('1');
console.log(this.finalTrustTree);
this.joinArrays(); // ! TODO : switch trustTreeRaw for finalTrustTree
......@@ -179,13 +155,13 @@ export class T3TrustComponent implements OnInit, OnDestroy {
submitVote(vote) {
switch (vote) {
case -1:
console.log("ur fake news");
console.log('ur fake news');
break;
case 0:
console.log("idk what to think");
console.log('idk what to think');
break;
case 1:
console.log("ur legit news");
console.log('ur legit news');
}
this.hasVotedOnUser = true;
this.hasVotedOnUserThisSession = true;
......@@ -207,16 +183,21 @@ export class T3TrustComponent implements OnInit, OnDestroy {
this.sliderTimeout = setTimeout(() => {
this.hasRecalculated = false;
this.currentScore = this.newScore;
}, 1001);
}, 700);
}
page(direction: number) {
this.isPaging = true;
this.currentScore = this.user.score;
if (this.pagingTimeout) {
clearTimeout(this.pagingTimeout);
}
if (this.sliderTimeout) {
clearTimeout(this.sliderTimeout);
}
const previewIndex = this.currentIndex + direction;
if (direction === 1) {
this.currentIndex = previewIndex > this.lastIndex ? 0 : previewIndex;
......@@ -225,11 +206,17 @@ export class T3TrustComponent implements OnInit, OnDestroy {
}
this.user = this.users[this.currentIndex];
this.newScore = this.user.score;
this.hasVotedOnUser = this.user.vote ? true : false;
this.pagingTimeout = setTimeout(() => {
this.isPaging = false;
}, 100);
this.sliderTimeout = setTimeout(() => {
this.hasRecalculated = false;
this.currentScore = this.newScore;
}, 700);
}
ngOnDestroy() {
......
app/src/app/modules/trust/trust.fake.ts
View file @ f094ff9f
const trustTree = [
{
actor_did: 1,
entity_did: 2,
entity_type: 'user',
trust: 1,
degree: 1
},
{
actor_did: 1,
entity_did: 3,
entity_type: 'user',
trust: 1,
degree: 1
},
{
actor_did: 1,
entity_did: 5,
entity_type: 'user',
trust: 1,
degree: 1
},
{
actor_did: 1,
entity_did: 9,
entity_type: 'user',
trust: 1,
degree: 1
},
{
actor_did: 1,
entity_did: 4,
entity_type: 'user',
trust: 0,
degree: 1
},
{
actor_did: 1,
entity_did: 7,
entity_type: 'user',
trust: 0,
degree: 1
},
{
actor_did: 1,
entity_did: 8,
entity_type: 'user',
trust: 0,
degree: 1
},
{
actor_did: 1,
entity_did: 50,
entity_type: 'user',
trust: 0,
degree: 1
},
{
actor_did: 1,
entity_did: 6,
entity_type: 'user',
trust: -1,
degree: 1
},
{
actor_did: 1,
entity_did: 10,
entity_type: 'user',
trust: -1,
degree: 1
},
{
actor_did: 1,
entity_did: 11,
entity_type: 'user',
trust: -1,
degree: 1
},
///////////////////////////////////
// 2nd degree
{
actor_did: 2,
entity_did: 1,
entity_type: 'user',
trust: 1,
degree: 2
},
{
actor_did: 2,
entity_did: 3,
entity_type: 'user',
trust: 1,
degree: 2
},
{
actor_did: 2,
entity_did: 5,
entity_type: 'user',
trust: 1,
degree: 2
},
{
actor_did: 2,
entity_did: 50,
entity_type: 'user',
trust: 1,
degree: 2
},
{
actor_did: 2,
entity_did: 6,
entity_type: 'user',
trust: 0,
degree: 2
},
{
actor_did: 2,
entity_did: 8,
entity_type: 'user',
trust: 0,
degree: 2
},
{
actor_did: 2,
entity_did: 4,
entity_type: 'user',
trust: -1,
degree: 2
},
{
actor_did: 2,
entity_did: 7,
entity_type: 'user',
trust: -1,
degree: 2
},
{
actor_did: 2,
entity_did: 11,
entity_type: 'user',
trust: -1,
degree: 2
},
{
actor_did: 2,
entity_did: 51,
entity_type: 'user',
trust: -1,
degree: 2
},
{
actor_did: 2,
entity_did: 9,
entity_type: 'user',
trust: -1,
degree: 2
},
///////////////////////////////////
// 3rd degree
{
actor_did: 50,
entity_did: 6,
entity_type: 'user',
trust: 1,
degree: 3
},
{
actor_did: 50,
entity_did: 3,
entity_type: 'user',
trust: 1,
degree: 3
},
{
actor_did: 50,
entity_did: 7,
entity_type: 'user',
trust: 0,
degree: 3
},
{
actor_did: 50,
entity_did: 11,
entity_type: 'user',
trust: -1,
degree: 3
}
///////////////////////////////
// Artifacts
// {
// actor_did: 1,
// entity_did: 200,
// entity_type: 'artifact',
// trust: 1,
// degree: 1
// },
// {
// actor_did: 1,
// entity_did: 300,
// entity_type: 'artifact',
// trust: 1,
// degree: 1
// },
// {
// actor_did: 1,
// entity_did: 500,
// entity_type: 'artifact',
// trust: 1,
// degree: 1
// },
// {
// actor_did: 1,
// entity_did: 900,
// entity_type: 'artifact',
// trust: 1,
// degree: 1
// },
// {
// actor_did: 1,
// entity_did: 400,
// entity_type: 'artifact',
// trust: 0,
// degree: 1
// },
// {
// actor_did: 1,
// entity_did: 700,
// entity_type: 'artifact',
// trust: 0,
// degree: 1
// },
// {
// actor_did: 1,
// entity_did: 800,
// entity_type: 'artifact',
// trust: 0,
// degree: 1
// },
// {
// actor_did: 1,
// entity_did: 500,
// entity_type: 'artifact',
// trust: 0,
// degree: 1
// },
// {
// actor_did: 1,
// entity_did: 600,
// entity_type: 'artifact',
// trust: -1,
// degree: 1
// },
// {
// actor_did: 1,
// entity_did: 1000,
// entity_type: 'artifact',
// trust: -1,
// degree: 1
// },
// {
// actor_did: 1,
// entity_did: 1100,
// entity_type: 'artifact',
// trust: -1,
// degree: 1
// },
// ///////////////////////////////////
// // 2nd degree
// {
// actor_did: 2,
// entity_did: 100,
// entity_type: 'artifact',
// trust: 1,
// degree: 2
// },
// {
// actor_did: 2,
// entity_did: 300,
// entity_type: 'artifact',
// trust: 1,
// degree: 2
// },
// {
// actor_did: 2,
// entity_did: 500,
// entity_type: 'artifact',
// trust: 1,
// degree: 2
// },
// {
// actor_did: 2,
// entity_did: 5000,
// entity_type: 'artifact',
// trust: 1,
// degree: 2
// },
// {
// actor_did: 2,
// entity_did: 600,
// entity_type: 'artifact',
// trust: 0,
// degree: 2
// },
// {
// actor_did: 2,
// entity_did: 800,
// entity_type: 'artifact',
// trust: 0,
// degree: 2
// },
// {
// actor_did: 2,
// entity_did: 400,
// entity_type: 'artifact',
// trust: -1,
// degree: 2
// },
// {
// actor_did: 2,
// entity_did: 700,
// entity_type: 'artifact',
// trust: -1,
// degree: 2
// },
// {
// actor_did: 2,
// entity_did: 1100,
// entity_type: 'artifact',
// trust: -1,
// degree: 2
// },
// {
// actor_did: 2,
// entity_did: 5100,
// entity_type: 'artifact',
// trust: -1,
// degree: 2
// },
// {
// actor_did: 2,
// entity_did: 900,
// entity_type: 'artifact',
// trust: -1,
// degree: 2
// },
// ///////////////////////////////////
// // 3rd degree
// {
// actor_did: 50,
// entity_did: 600,
// entity_type: 'artifact',
// trust: 1,
// degree: 3
// },
// {
// actor_did: 50,
// entity_did: 300,
// entity_type: 'artifact',
// trust: 1,
// degree: 3
// },
// {
// actor_did: 50,
// entity_did: 700,
// entity_type: 'artifact',
// trust: 0,
// degree: 3
// },
// {
// actor_did: 50,
// entity_did: 1100,
// entity_type: 'artifact',
// trust: -1,
// degree: 3
// }
];
app/src/app/modules/trust/trust.service.ts
View file @ f094ff9f
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable()
export class T3TrustService {
constructor() {}
getTrustTree(actorDid: string) {
let penultimateTrustTree: Array<any> = [];
let finalTrustTree: Array<any> = [];
// END STRUCTURE
// [
......@@ -35,6 +36,9 @@ export class T3TrustService {
const fakeResponseWithAllDidsArray = this.makeAllDidsArray(fakeResponse);
// ROUND 1
// Do the processing for each did in allDids[];
// PROCESS BLOCKCHAIN RESPONSE
// fakeResponse.forEach(function(value) {
// const tempArray = value.split(':');
......@@ -57,6 +61,7 @@ export class T3TrustService {
// add all
// go through each actor in network[] and get their network
console.log('finalTrustTree');
console.log(finalTrustTree);
return finalTrustTree;
}
......@@ -64,15 +69,16 @@ export class T3TrustService {
makeAllDidsArray(fakeResponse) {
const newFakeResponse = fakeResponse;
console.log(newFakeResponse[0].blockchainResponse);
let allDids: Array<any>;
allDids = newFakeResponse[0].blockchainResponse.trustedDids
.concat(newFakeResponse[0].blockchainResponse.NeutralDids)
.concat(newFakeResponse[0].blockchainResponse.DistrustedDids);
// allDids = allDids.concat(newFakeResponse[0].blockchainResponse.NeutralDids);
// allDids = allDids.concat(
// newFakeResponse[0].blockchainResponse.DistrustedDids
// );
// let allDids: Array<any> = [];
let allDids = newFakeResponse[0].blockchainResponse.trustedDids;
// .concat(newFakeResponse[0].blockchainResponse.NeutralDids)
// .concat(newFakeResponse[0].blockchainResponse.DistrustedDids);
allDids = allDids.concat(newFakeResponse[0].blockchainResponse.NeutralDids);
allDids = allDids.concat(
newFakeResponse[0].blockchainResponse.DistrustedDids
);
console.log('allDids');
console.log(allDids);
return newFakeResponse;
......@@ -81,51 +87,51 @@ export class T3TrustService {
getBlockchainResponse(actorDid: string) {
const fakeDatabase = [
{
actorDid: "1",
actorDid: '1',
blockchainResponse: {
trustedDids: ["2"],
neutralDids: ["3"],
distrustedDids: ["4"]
trustedDids: ['2'],
neutralDids: ['3'],
distrustedDids: ['4']
}
},
{
actorDid: "2",
actorDid: '2',
blockchainResponse: {
trustedDids: ["1", "3", "5"],
neutralDids: ["4"],
trustedDids: ['1', '3', '5'],
neutralDids: ['4'],
distrustedDids: []
}
},
{
actorDid: "3",
actorDid: '3',
blockchainResponse: {
trustedDids: ["1"],
neutralDids: ["4", "5"],
distrustedDids: ["2"]
trustedDids: ['1'],
neutralDids: ['4', '5'],
distrustedDids: ['2']
}
},
{
actorDid: "4",
actorDid: '4',
blockchainResponse: {
trustedDids: ["3"],
neutralDids: ["1"],
distrustedDids: ["2", "5"]
trustedDids: ['3'],
neutralDids: ['1'],
distrustedDids: ['2', '5']
}
},
{
actorDid: "5",
actorDid: '5',
blockchainResponse: {
trustedDids: ["3", "6"],
neutralDids: ["2"],
distrustedDids: ["4"]
trustedDids: ['3', '6'],
neutralDids: ['2'],
distrustedDids: ['4']
}
},
{
actorDid: "6",
actorDid: '6',
blockchainResponse: {
trustedDids: [],
neutralDids: ["3"],
distrustedDids: ["7", "8"]
neutralDids: ['3'],
distrustedDids: ['7', '8']
}
}
];
......@@ -135,27 +141,6 @@ export class T3TrustService {
return item.actorDid === actorDid;
});
console.log("raw Result");
console.log(result);
return result;
}
}
// OLD
// const fakeBlockchainDatabase = [
// {
// actorDid: '2',
// blockchainResponse: ['did:1:1', 'did:3:1', 'did:4:0', 'did:5:1']
// },
// {
// actorDid: '3',
// blockchainResponse: ['did:1:1', 'did:2:-1', 'did:4:0', 'did:5:0']
// },
// {
// actorDid: '4',
// blockchainResponse: ['did:1:0', 'did:2:-1', 'did:3:1', 'did:5:-1']
// },
// {
// actorDid: '5',
// blockchainResponse: ['did:2:0', 'did:3:1', 'did:4:-1', 'did:6:1']
// }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment