Skip to content

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

pages of dogs

parent bdb94c3f
master
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing with 552 additions and 272 deletions
app/angular.json
View file @ 66e69f2f
......@@ -24,7 +24,10 @@
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"styles": [
"src/styles.scss",
"node_modules/material-design-icons/iconfont/material-icons.css"
],
"scripts": ["./node_modules/crypto-browserify/index.js"]
},
"configurations": {
......
app/package-lock.json
View file @ 66e69f2f
......@@ -6286,6 +6286,11 @@
"resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz",
"integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg=="
},
"material-design-icons": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
"integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
......
app/package.json
View file @ 66e69f2f
......@@ -20,6 +20,7 @@
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"crypto-browserify": "^3.12.0",
"material-design-icons": "^3.0.1",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"uport-connect": "^1.1.11",
......
app/src/app/app.module.ts
View file @ 66e69f2f
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
......@@ -12,6 +13,7 @@ import { T3TrustModule } from './modules/trust/trust.module';
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
uPortModule,
......
app/src/app/modules/trust/trust.component.html
View file @ 66e69f2f
......@@ -21,20 +21,107 @@
<!-- VOTE VIEW -->
<div *ngIf="view === 'vote'" class="view--vote">
<h1>Do you trust this person?</h1>
<div *ngFor="let user of users" class="userWrapper">
<div class="userName">{{ user.name }}</div>
<div class="actionBtns">
<div class="btn btn--distrust" (click)="submitVote(-1)">distrust</div>
<div class="btn btn--neutral" (click)="submitVote(0)">neutral</div>
<div class="btn btn--trust" (click)="submitVote(1)">trust</div>
</div>
<div class="avatarPager">
<div class="chevron left" (click)="page(-1)"></div>
<div class="avatar">
<img [src]="user.avatarUrl" />
<ng-container *ngFor="let user of users; let i = index">
<div *ngIf="i === currentIndex">
<!-- [@slowFadeAnimation]="isPaging ? 'out' : 'in'" -->
<div class="userName">{{ user.name }}</div>
<!-- BUTTONS -->
<div class="actionBtns">
<div
class="btn btn--distrust"
(click)="submitVote(-1)"
[class.active]="
(hasVotedOnUser && user.vote === -1) ||
(!hasVotedOnUserThisSession && user.vote === 0)
"
[class.inactive]="
(hasVotedOnUser && user.vote !== -1) ||
(hasVotedOnUserThisSession && user.vote === 0)
"
>
Distrust
</div>
<div
class="btn btn--neutral"
(click)="submitVote(0)"
[class.active]="hasVotedOnUserThisSession && user.vote === 0"
[class.inactive]="hasVotedOnUser && user.vote !== 0"
>
Neutral
</div>
<div
class="btn btn--trust"
(click)="submitVote(1)"
[class.active]="
(hasVotedOnUser && user.vote === 1) ||
(!hasVotedOnUserThisSession && user.vote === 0)
"
[class.inactive]="
(hasVotedOnUser && user.vote !== 1) ||
(hasVotedOnUserThisSession && user.vote === 0)
"
>
Trust
</div>
</div>
<!-- AVATAR PAGER -->
<div class="avatarPager">
<i class="chevron material-icons" (click)="page(-1)"
>keyboard_arrow_left</i
>
<div class="avatar" [@fadeAnimation]="isPaging ? 'out' : 'in'">
<img [src]="user.avatarUrl" />
</div>
<i class="chevron material-icons" (click)="page(1)"
>keyboard_arrow_right</i
>
</div>
<!-- METRICS -->
<div class="metricsWrapper">
<!-- THERMOMETER -->
<div class="thermometerContainer">
<div class="thermometerWrapper">
<div class="thermometer"></div>
<!-- [@pointerSlideAnimation]="!hasRecalculated ? 'current' : 'new'" -->
<i class="material-icons pointer">arrow_drop_up</i>
</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">
<div class="detailsHeader">
<div
class="detailsHeader__left"
(click)="showDetails = !showDetails"
>
<i *ngIf="showDetails" class="material-icons"
>keyboard_arrow_down</i
>
<i *ngIf="!showDetails" class="material-icons"
>keyboard_arrow_right</i
>
<span>Details</span>
</div>
<div class="detailsHeader__right" (click)="switchView('tree')">
See visualization
</div>
</div>
<div class="detailsContent" *ngIf="showDetails">
<div class="detailsTier">1st degree friends</div>
<div class="detailsTier">2nd degree friends</div>
<div class="detailsTier">3rd degree friends</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
</div>
<!-- UNLOCK VIEW -->
......
app/src/app/modules/trust/trust.component.scss
View file @ 66e69f2f
$red: #e02020;
$green: #44d7b6;
$coolGrey: #6b717c;
$bezier: cubic-bezier(0.23, 1, 0.32, 1);
t3-trust {
font-family: Arial, Helvetica, sans-serif;
color: #444;
color: $coolGrey;
// color: #444;
}
.topbar {
width: 100%;
......@@ -72,31 +75,13 @@ t3-trust {
font-weight: 500;
font-size: 42px;
text-align: center;
color: #bbb;
color: rgba($coolGrey, 0.3);
}
.userWrapper {
text-align: center;
.userName {
font-size: 36px;
font-weight: 200;
}
.avatarPager {
display: flex;
justify-content: space-around;
}
.avatar {
padding: 16px;
img {
border-radius: 50%;
width: 300px;
height: 300px;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
object-fit: cover;
}
}
text-align: center;
.userName {
font-size: 36px;
font-weight: 200;
color: $coolGrey;
}
.actionBtns {
......@@ -113,7 +98,7 @@ t3-trust {
margin: 4px;
padding: 16px;
border-radius: 6px;
transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
transition: background-color 0.5s $bezier;
&.inactive {
background-color: rgba(#000, 0.2);
}
......@@ -133,7 +118,7 @@ t3-trust {
background-color: rgba(#000, 0.55);
}
&.active {
background-color: rgba(#000, 0.7);
background-color: rgba(#000, 0.6);
}
}
.btn--trust {
......@@ -142,36 +127,113 @@ t3-trust {
background-color: rgba($green, 0.8);
}
&.active {
background-color: rgba($green, 0.9);
background-color: rgba($green, 0.95);
}
}
}
}
}
// UTILITY
.chevron::before {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: "";
display: inline-block;
height: 0.45em;
left: 0.15em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.45em;
background-color: cadetblue;
}
.avatarPager {
display: flex;
justify-content: center;
align-items: center;
.chevron.right:before {
left: 0;
transform: rotate(45deg);
}
.chevron {
cursor: pointer;
font-size: 80px;
color: #ccc;
transition: transform 0.5s $bezier;
transition: color 0.5s $bezier;
&:hover {
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%);
}
.pointer {
font-size: 70px;
position: absolute;
left: 33%;
top: -18px;
color: #555;
}
}
}
.scoreWrapper {
margin-top: 32px;
.score {
color: $coolGrey;
font-size: 70px;
}
.scoreSubtitle {
color: rgba($coolGrey, 0.8);
font-size: 30px;
}
}
.detailsWrapper {
width: 80%;
margin: auto;
margin-bottom: 24px;
.detailsHeader {
border-bottom: 1px solid rgba($coolGrey, 0.5);
padding: 24px 16px 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.4s $bezier;
> * {
&:hover {
cursor: pointer;
color: rgba($coolGrey, 0.7);
}
}
.detailsHeader__left {
display: flex;
align-items: center;
}
.detailsHeader__right {
&:hover {
text-decoration: underline;
}
}
}
.detailsContent {
padding: 16px;
text-align: left;
}
}
}
}
.chevron.left:before {
left: 0.25em;
transform: rotate(-135deg);
// .view--verify {
// }
// .view--tree {
// }
}
app/src/app/modules/trust/trust.component.ts
View file @ 66e69f2f
import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import {
Component,
EventEmitter,
Input,
Output,
OnInit,
OnDestroy
} from '@angular/core';
import {
trigger,
state,
style,
animate,
transition
} from '@angular/animations';
import { T3TrustService } from './trust.service';
@Component({
selector: 't3-trust',
templateUrl: './trust.component.html',
styleUrls: ['trust.component.scss']
styleUrls: ['trust.component.scss'],
animations: [
// Fade media in after load
trigger('fadeAnimation', [
state(
'in',
style({
opacity: 1
})
),
state(
'out',
style({
opacity: 0.3
})
),
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 {
export class T3TrustComponent implements OnInit, OnDestroy {
// @Input() object: any;
// @Output("done") doneEmitter: EventEmitter<any> = new EventEmitter();
view: string = 'vote'; // ! TODO later: this should be 'unlock'
actorDid: string = '000';
currentVote: number = null;
showDetails: boolean = true; // ! default to false?
user: any = null;
hasVotedOnUser: boolean = false;
hasVotedOnUserThisSession: boolean = false;
newScore: number;
sliderTimeout: any = null;
pagingTimeout: any = null;
currentScore: number = 0;
lastIndex: number;
currentIndex: number = 0;
hasRecalculated: boolean = false;
isPaging: boolean = false;
// scoreChanged: boolean = false;
users: Array<any> = [
{
......@@ -24,18 +84,27 @@ export class T3TrustComponent implements OnInit {
score: 0.33,
name: 'Sideshow Bob',
avatarUrl: '/assets/brewski.jpg'
},
{
actor_did: 1,
entity_did: '222',
entity_type: 'user',
vote: 0,
degree: 1,
score: 0.77,
name: 'Good girl',
avatarUrl: '/assets/avatar.png'
},
{
actor_did: 1,
entity_did: '333',
entity_type: 'user',
vote: 1,
degree: 1,
score: 1.0,
name: 'Astronaut Lily',
avatarUrl: '/assets/moonlily.jpg'
}
// ,
// {
// actor_did: 1,
// entity_did: '222',
// entity_type: 'user',
// vote: 0,
// degree: 1,
// score: 0.77,
// name: 'Good girl',
// avatarUrl: '/assets/avatar.png'
// }
];
constructor(public trustService: T3TrustService) {}
......@@ -43,7 +112,12 @@ export class T3TrustComponent implements OnInit {
ngOnInit() {
this.actorDid = this.users[0].actor_did;
// calculateScore() of this.users[0]
this.user = this.users[0];
this.currentIndex = 0;
this.hasVotedOnUser = this.user.vote ? true : false;
this.currentScore = this.user.score;
this.lastIndex = this.users.length - 1;
}
switchView(view) {
this.view = view;
......@@ -60,11 +134,57 @@ export class T3TrustComponent implements OnInit {
case 1:
console.log('ur legit news');
}
this.hasVotedOnUser = true;
this.hasVotedOnUserThisSession = true;
this.user.vote = vote;
this.recalculateScore();
}
this.calculateScore();
recalculateScore() {
this.hasVotedOnUser = true;
this.hasRecalculated = true;
this.newScore = 0.88; // ! should be calculated
this.user.score = this.newScore;
if (this.sliderTimeout) {
clearTimeout(this.sliderTimeout);
}
this.sliderTimeout = setTimeout(() => {
this.hasRecalculated = false;
this.currentScore = this.newScore;
}, 1001);
}
calculateScore() {
//
page(direction: number) {
this.isPaging = true;
if (this.pagingTimeout) {
clearTimeout(this.pagingTimeout);
}
const previewIndex = this.currentIndex + direction;
if (direction === 1) {
this.currentIndex = previewIndex > this.lastIndex ? 0 : previewIndex;
} else {
this.currentIndex = previewIndex < 0 ? this.lastIndex : previewIndex;
}
this.user = this.users[this.currentIndex];
this.hasVotedOnUser = this.user.vote ? true : false;
this.pagingTimeout = setTimeout(() => {
this.isPaging = false;
}, 100);
}
ngOnDestroy() {
if (this.sliderTimeout) {
clearTimeout(this.sliderTimeout);
}
if (this.pagingTimeout) {
clearTimeout(this.pagingTimeout);
}
}
}
app/src/app/modules/trust/trust.fake.ts
View file @ 66e69f2f
......@@ -184,193 +184,193 @@ const trustTree = [
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
}
// {
// 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/assets/moonlily.jpg 0 → 100644
View file @ 66e69f2f
app/src/assets/moonlily.jpg

822 KB

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