Add page /candidate (create)

src/app/app-routing.module.ts

@@ -4,12 +4,13 @@ import { CulottelistComponent } from "./projects/culottelist/culottelist.compone
 import { AboutComponent } from "./about/about.component";
 import { IdComponent } from "./id/id.component";
 import { DonateComponent } from './donate/donate.component';
+import { NewCandidateComponent } from './new-candidate/new-candidate.component';
 
 const routes: Routes = [
   { path: "", component: CulottelistComponent },
   { path: "culottelist", component: CulottelistComponent },
   { path: "about", component: AboutComponent },
-  { path: "candidate", component: CulottelistComponent },
+  { path: "candidate", component: NewCandidateComponent },
   { path: "candidate/:address", component: IdComponent },
   { path: "donate", component: DonateComponent },
 ];

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { OpenelectionComponent } from "./projects/electionTabs/openelection/open
 import { CompletedelectionComponent } from "./projects/electionTabs/completedelection/completedelection.component";
 import { IdComponent } from './id/id.component';
 import { DonateComponent } from './donate/donate.component';
+import { NewCandidateComponent } from './new-candidate/new-candidate.component';
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import { DonateComponent } from './donate/donate.component';
     OpenelectionComponent,
 	CompletedelectionComponent,
 	IdComponent,
-	DonateComponent
+	DonateComponent,
+	NewCandidateComponent
   ],
   imports: [
     SuiModule,

src/app/new-candidate/new-candidate.component.css

@@ -0,0 +1,42 @@
+
+.title {
+	text-align: center;
+	font-size: 2em;
+margin-bottom: 25px;
+}
+
+.purpose {
+	position: relative;
+	margin-top: 40px;
+	text-align: center;
+	font-size: 1em;
+	color: black;
+}
+
+.ethAmount {
+	position:relative;
+	margin-top: 25px;
+	margin-bottom: 25px;
+	font-size: 2em;
+	text-align: center;
+	max-width: 35%;
+	min-width: 135px;
+}
+
+.tab {
+	margin-top: 15px;
+}
+
+.amounts {
+	margin-left: 35%;
+}
+
+.button {
+	min-width: 145px;
+}
+
+.fields{
+	max-width: 50%;
+	text-align:center;
+	margin: auto;
+}

src/app/new-candidate/new-candidate.component.html

@@ -0,0 +1,63 @@
+<div>
+	<div class="title">
+		Would you support "{{ purpose }}" ? 
+	</div>
+</div>
+
+<div class="fields">
+	<div class="ui fluid icon input">
+		<input [(ngModel)]="address" type="text" placeholder="0.x424242424242">
+		<div class="ui button">Address</div>
+	</div>
+	<div class="ui fluid input">
+		<input [(ngModel)]="amount" type="text" placeholder="3,2">
+		<div class="ui button">Bet Some ETH</div>
+	</div>
+</div>
+
+<div class="purpose">
+	<div  *ngIf="isOk" >
+		<div class="ui red inverted segment center aligned" style="margin-top: 15px">
+				Should not be empty / Should contain only (numbers || address)
+		</div>
+	</div>
+	<div class="ui placeholder segment">
+		<div class="ui two column stackable center aligned grid">
+
+			<div class="middle aligned row">
+			<div class="column">
+			  <div class="ui icon header">
+				<i class="thumbs up icon"></i>
+			  </div>
+			  <div class="field">
+				<div class="ui search">
+				  <div class="ui icon input">
+					<button (click)="onClickMeT()" class="ui primary button">
+							Vote For 
+					  </button>
+				  </div>
+				  <div class="results"></div>
+				</div>
+			  </div>
+			</div>
+
+
+
+			<div class="column">
+				<div class="ui icon header">
+				  <i class="thumbs down icon"></i>
+				</div>
+				<div class="field">
+				  <div class="ui search">
+					<div class="ui icon input">
+					  <button  (click)="onClickMeF()" class="ui primary button">
+						  Vote Against
+						</button>
+					</div>
+					<div class="results"></div>
+				  </div>
+				</div>
+			  </div>
+			</div>
+		</div>
+</div>

src/app/new-candidate/new-candidate.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core';
+import {Web3Service} from '../util/web3.service';
+import { ActivatedRoute } from '@angular/router';
+
+declare let require:any;
+const culotteABI = require('../../../build/contracts/Culotte.json');
+
+@Component({
+  selector: 'app-new-candidate',
+  templateUrl: './new-candidate.component.html',
+  styleUrls: ['./new-candidate.component.css']
+})
+export class NewCandidateComponent implements OnInit {
+
+	address: String = "0x";
+	purpose: String = "A frequent contributor to Open Source Projects"
+	culottes: any;
+	account: any;
+	accounth: any;
+	amount;
+	isOk = false;
+	web3_eth_contract: any;
+
+  constructor(private web3Service: Web3Service, private route: ActivatedRoute,) {
+  }
+
+async ngOnInit() {
+	this.getAddress();
+	this.watchAccount();
+    this.web3Service.artifactsToContract(culotteABI)
+      .then((web3_eth_contract) => {
+		  	this.web3_eth_contract = web3_eth_contract;
+			return web3_eth_contract.methods.criteria().call();
+        })
+      .then((criteria) => {
+        console.log("criteria: ", criteria);
+        });
+}
+
+
+onClickMeT() {
+	if (!this.amount)
+		this.isOk=true;
+	else {
+		this.isOk=false;
+		const weiAmount = this.web3Service.etherToWei(this.amount);
+		console.log(weiAmount)
+		this.web3_eth_contract.methods.vote(true, this.address).send({from: this.account, value: weiAmount})
+	}
+}
+
+onClickMeF() {
+	if (!this.amount)
+		this.isOk=true;
+		else {
+			this.isOk=false;
+			const weiAmount = this.web3Service.etherToWei(this.amount);
+			console.log(weiAmount)
+			this.web3_eth_contract.methods.vote(false, this.address).send({from: this.account, value: weiAmount})
+		}
+}
+
+
+getAddress(): void {
+	this.address = this.route.snapshot.paramMap.get('address');
+  }
+
+async watchAccount() {
+  this.web3Service.accountsObservable.subscribe((accounts) => {
+    this.account = accounts[0];
+  });
+}
+}