[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[GNUnet-SVN] [gnunet-webui] 02/02: finished identity page
|
From: |
gnunet |
|
Subject: |
[GNUnet-SVN] [gnunet-webui] 02/02: finished identity page |
|
Date: |
Sun, 24 Jun 2018 23:23:59 +0200 |
This is an automated email from the git hooks/post-receive script.
phil pushed a commit to branch master
in repository gnunet-webui.
commit de6217c4b4ed2194ea49db1b61f527cd8dc49f63
Author: Phil <address@hidden>
AuthorDate: Sun Jun 24 21:53:16 2018 +0200
finished identity page
---
src/app/api.service.ts | 16 ++++-
src/app/identity-api.ts | 7 +--
src/app/identity-page/identity-page.component.html | 27 +++++---
src/app/identity-page/identity-page.component.ts | 30 +++++++--
src/scss/components/_modal.scss | 73 ++++++++++++++++++++++
src/scss/main.scss | 1 +
6 files changed, 136 insertions(+), 18 deletions(-)
diff --git a/src/app/api.service.ts b/src/app/api.service.ts
index b659198..6597514 100644
--- a/src/app/api.service.ts
+++ b/src/app/api.service.ts
@@ -62,7 +62,7 @@ export class ApiService {
deleteIdentity (id: string): Observable<any>{
this.messages.dismissError();
- return this.http.delete(this.identityURL+'/'+id)
+ return this.http.delete(this.identityURL+'?pubkey='+id)
.pipe(
tap(json => this.handleJSON(json)),
catchError(this.handleError('deleteIdentity', []))
@@ -70,10 +70,20 @@ export class ApiService {
}
- changeIdentity (id: string, json: any): Observable<any>{
+ changeIdentity (json: any): Observable<any>{
this.messages.dismissError();
const options = {headers: {'Content-Type': 'application/json'}};
- return this.http.put(this.identityURL+'/'+id, json, options)
+ return this.http.put(this.identityURL, json, options)
+ .pipe(
+ tap(json => this.handleJSON(json)),
+ catchError(this.handleError('changeIdentity', []))
+ );
+ }
+
+ assignIdentity (json: any): Observable<any>{
+ this.messages.dismissError();
+ const options = {headers: {'Content-Type': 'application/json'}};
+ return this.http.put(this.identityURL, json, options)
.pipe(
tap(json => this.handleJSON(json)),
catchError(this.handleError('changeIdentity', []))
diff --git a/src/app/identity-api.ts b/src/app/identity-api.ts
index d694110..005276f 100644
--- a/src/app/identity-api.ts
+++ b/src/app/identity-api.ts
@@ -11,19 +11,18 @@
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Affero General Public License for more details.
-
+
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/**
* @author Philippe Buschmann
* @file src/app/identity-api.ts
- * @brief
+ * @brief
*
*/
export class IdentityAPI{
- id: string;
+ pubkey: string;
name: string;
- type: string;
}
diff --git a/src/app/identity-page/identity-page.component.html
b/src/app/identity-page/identity-page.component.html
index fe72dc1..b0f22d8 100644
--- a/src/app/identity-page/identity-page.component.html
+++ b/src/app/identity-page/identity-page.component.html
@@ -18,12 +18,13 @@
<div class="u-mv-x1" *ngFor="let identity of filteredItems">
<div class="c-card c-card--no-padding u-p-x1">
<div class="o-grid">
- <div class="o-grid__col u-1/12"><div class="c-circle"
[ngStyle]="{'background-color': returnHSL(identity.id)}">{{identity.name |
slice:0:1 | uppercase}}</div></div>
- <div class="o-grid__col u-9/12">
- <p class="u-color-grey">Public Key: <span
class="">{{identity.id}}</span></p>
+ <div class="o-grid__col u-1/12"><div class="c-circle"
[ngStyle]="{'background-color': returnHSL(identity.pubkey)}">{{identity.name |
slice:0:1 | uppercase}}</div></div>
+ <div class="o-grid__col u-8/12">
+ <p class="u-color-grey">Public Key: <span
class="">{{identity.pubkey}}</span></p>
<span class="o-type-20">{{identity.name}}</span>
</div>
<div class="o-grid__col u-1/12"><p class="u-color-grey">Rename</p><a
class="c-button c-button--rename" (click)="onClickRename(identity)"><i
class="fa fa-pencil"></i></a></div>
+ <div class="o-grid__col u-1/12"><p
class="u-color-grey">Subsystem</p><a class="c-button c-button--rename"
(click)="onClickAddSubsystem(identity)"><i class="fa fa-plus"></i></a></div>
<div class="o-grid__col u-1/12"><p class="u-color-grey">Delete</p><a
class="c-button c-button--danger" (click)="onClickDelete(identity)"><i
class="fa fa-trash"></i></a></div>
</div>
</div>
@@ -32,20 +33,32 @@
<div class="c-card u-p-x3 u-mt-x2" *ngIf="this.rename">
<h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Rename</h1>
- <div class="u-color-grey">Public Key:
<span>{{changeIdentity.id}}</span></div>
+ <div class="u-color-grey u-pb-x1">Public Key:
<span>{{changeIdentity.pubkey}}</span></div>
<div>
<span class="u-mr-x2"><span class="u-mr-x3">Name: </span><input
class="c-input" placeholder="Change Name"
[(ngModel)]="changeIdentity.name"/></span>
- <a class="c-button" (click)="onRename(changeIdentity)">Rename</a>
+ <a class="c-button" (click)="onRename(changeIdentity)">Save</a>
<a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
</div>
</div>
+<div class="c-card u-p-x3 u-mt-x2" *ngIf="this.addsubsystem">
+ <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Add Subsystem</h1>
+ <div class="u-color-grey">Public Key:
<span>{{changeIdentity.pubkey}}</span></div>
+ <div class="u-color-grey">Name: <span>{{changeIdentity.name}}</span></div>
+ <span class="u-mr-x2">
+ <span class="u-mr-x3">Subsystem: </span>
+ <input class="c-input" placeholder="e.g. namestore, ..."
[(ngModel)]="newsubsystem"/>
+ </span>
+ <a class="c-button" (click)="onAddSubsystem(changeIdentity.pubkey)">Add</a>
+ <a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
+</div>
+
<div class="c-card u-p-x3 u-mt-x2" *ngIf="this.delete">
<h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Delete</h1>
- <div >Public Key: <span>{{changeIdentity.id}}</span></div>
+ <div >Public Key: <span>{{changeIdentity.pubkey}}</span></div>
<div >Name: <span>{{changeIdentity.name}}</span></div>
<div>
- <a class="c-button" (click)="onDelete(changeIdentity.id)">Delete</a>
+ <a class="c-button" (click)="onDelete(changeIdentity.pubkey)">Delete</a>
<a class="c-button c-button--outline u-m-x2" (click)="onReset()">Cancel</a>
</div>
</div>
diff --git a/src/app/identity-page/identity-page.component.ts
b/src/app/identity-page/identity-page.component.ts
index f347f44..7588799 100644
--- a/src/app/identity-page/identity-page.component.ts
+++ b/src/app/identity-page/identity-page.component.ts
@@ -38,10 +38,12 @@ export class IdentityPageComponent implements OnInit {
filteredItems: IdentityAPI[];
rename: boolean = false;
delete: boolean = false;
+ addsubsystem: boolean = false;
changeIdentity: IdentityAPI;
json: any;
is_displayed: boolean = true;
request: boolean = false;
+ newsubsystem: string="";
constructor(private apiService: ApiService,private message: MessagesService)
{ }
@@ -68,8 +70,7 @@ export class IdentityPageComponent implements OnInit {
this.filteredItems = Object.assign([], this.identities).filter(
item => {
return ((item.name.indexOf(value) > -1) ||
- (item.id.indexOf(value) > -1) ||
- (item.type.indexOf(value) > -1 ))
+ (item.pubkey.indexOf(value) > -1))
});
}
@@ -79,12 +80,13 @@ export class IdentityPageComponent implements OnInit {
this.changeIdentity = Object.assign({},identity);
}
+
onRename(identity: IdentityAPI){
this.request = true;
this.onReset();
this.filteredItems = [];
- this.json = {'newname':identity.name};
- this.apiService.changeIdentity(identity.id,this.json).subscribe(data => {
+ this.json = {'newname':identity.name,'pubkey':identity.pubkey};
+ this.apiService.changeIdentity(this.json).subscribe(data => {
this.message.pushSuccess('Rename was successful.');
this.getAPIs();
});
@@ -93,6 +95,7 @@ export class IdentityPageComponent implements OnInit {
onReset(){
this.rename = false;
this.delete = false;
+ this.addsubsystem = false;
this.is_displayed = true;
}
@@ -112,6 +115,25 @@ export class IdentityPageComponent implements OnInit {
});
}
+
+ onClickAddSubsystem(identity: IdentityAPI){
+ this.is_displayed = false;
+ this.addsubsystem = true;
+ this.changeIdentity = Object.assign({},identity);
+ }
+
+ onAddSubsystem(pubkey:string){
+ this.request = true;
+ this.onReset();
+ this.filteredItems = [];
+ this.json = {'subsystem':this.newsubsystem,'pubkey':pubkey};
+ this.apiService.assignIdentity(this.json).subscribe(data => {
+ this.newsubsystem = "";
+ this.message.pushSuccess('Subsystem was successfully added.');
+ this.getAPIs();
+ });
+ }
+
intFromHash(str:string): number{
let hash: number = 0;
for (var i = 0; i < str.length; i++) {
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
new file mode 100644
index 0000000..bca0ac1
--- /dev/null
+++ b/src/scss/components/_modal.scss
@@ -0,0 +1,73 @@
+// Modal Comp
+// Options
+$iota-components-modal : true;
+
+$iota-components-modal-namespace : 'modal' !default;
+$iota-components-modal-dialog-name : 'dialog' !default;
+$iota-components-modal-open-name : 'is-modal-open' !default;
+$iota-components-modal-active-name : 'is-active' !default;
+
+$iota-components-modal-padding : $iota-global-gutter-default
!default;
+$iota-components-modal-background : rgba(0, 0, 0, 0.5) !default;
+$iota-components-modal-dialog-background : rgb(255, 255, 255) !default;
+
+// Helper Local Variables
+$iota-components-modal-var-modal : $iota-global-components-namespace +
$iota-components-modal-namespace;
+$iota-components-modal-var-modal-active : $iota-components-modal-var-modal +
'.' + $iota-components-modal-active-name;
+$iota-components-modal-var-modal-dialog : $iota-components-modal-var-modal +
'__' + $iota-components-modal-dialog-name;
+
+// Modal Component
+
+.#{$iota-components-modal-open-name} {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+
+.#{$iota-components-modal-var-modal} {
+ position: fixed;
+ visibility: hidden;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ overflow: auto;
+ text-align: center;
+ opacity: 0;
+ z-index: 10000;
+ background: $iota-components-modal-background;
+
+ -webkit-overflow-scrolling: touch;
+ backface-visibility: hidden;
+}
+
+.#{$iota-components-modal-var-modal-active} {
+ visibility: visible;
+ opacity: 1;
+}
+
+.#{$iota-components-modal-var-modal}:after {
+ display: inline-block;
+ height: 100%;
+ margin-left: -0.05em;
+ content: "";
+ vertical-align: middle;
+}
+
+
+ .#{$iota-components-modal-var-modal-dialog} {
+ position: relative;
+ display: inline-block;
+ padding: $iota-components-modal-padding;
+ max-width: 700px;
+ width: 100%;
+ background: $iota-components-modal-dialog-background;
+ vertical-align: middle;
+ transform: translate3d(0,0,0);
+ text-size-adjust: 100%;
+ box-sizing: border-box;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 18b0408..3865945 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -34,6 +34,7 @@
@import 'components/markdown';
@import 'components/circle';
@import 'components/dropdown';
address@hidden 'components/modal';
//@import 'utilities/align-items';
@import 'utilities/align';
--
To stop receiving notification emails like this one, please contact
address@hidden