mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
9 years ago
16 changed files with 351 additions and 71 deletions
@ -0,0 +1,80 @@ |
|||
// ==========================================================================
|
|||
// AssetUpdatedDto.cs
|
|||
// Squidex Headless CMS
|
|||
// ==========================================================================
|
|||
// Copyright (c) Squidex Group
|
|||
// All rights reserved.
|
|||
// ==========================================================================
|
|||
|
|||
using System.ComponentModel.DataAnnotations; |
|||
using NodaTime; |
|||
using Squidex.Infrastructure; |
|||
using Squidex.Infrastructure.CQRS.Commands; |
|||
using Squidex.Write.Assets.Commands; |
|||
|
|||
namespace Squidex.Controllers.Api.Assets.Models |
|||
{ |
|||
public sealed class AssetUpdatedDto |
|||
{ |
|||
/// <summary>
|
|||
/// The mime type.
|
|||
/// </summary>
|
|||
[Required] |
|||
public string MimeType { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// The size of the file in bytes.
|
|||
/// </summary>
|
|||
public long FileSize { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// Determines of the created file is an image.
|
|||
/// </summary>
|
|||
public bool IsImage { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// The width of the image in pixels if the asset is an image.
|
|||
/// </summary>
|
|||
public int? PixelWidth { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// The height of the image in pixels if the asset is an image.
|
|||
/// </summary>
|
|||
public int? PixelHeight { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// The user that has updated the asset.
|
|||
/// </summary>
|
|||
[Required] |
|||
public RefToken LastModifiedBy { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// The date and time when the asset has been modified last.
|
|||
/// </summary>
|
|||
public Instant LastModified { get; set; } |
|||
|
|||
/// <summary>
|
|||
/// The version of the asset.
|
|||
/// </summary>
|
|||
public long Version { get; set; } |
|||
|
|||
public static AssetUpdatedDto Create(UpdateAsset command, EntitySavedResult result) |
|||
{ |
|||
var now = SystemClock.Instance.GetCurrentInstant(); |
|||
|
|||
var response = new AssetUpdatedDto |
|||
{ |
|||
Version = result.Version, |
|||
LastModified = now, |
|||
LastModifiedBy = command.Actor, |
|||
FileSize = command.File.FileSize, |
|||
MimeType = command.File.MimeType, |
|||
IsImage = command.ImageInfo != null, |
|||
PixelWidth = command.ImageInfo?.PixelWidth, |
|||
PixelHeight = command.ImageInfo?.PixelHeight |
|||
}; |
|||
|
|||
return response; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,77 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { Component, ElementRef, Input, OnChanges, OnInit, Renderer } from '@angular/core'; |
|||
|
|||
const ProgressBar = require('progressbar.js'); |
|||
|
|||
@Component({ |
|||
selector: 'sqx-progress-bar', |
|||
template: '' |
|||
}) |
|||
export class ProgressBarComponent implements OnChanges, OnInit { |
|||
private progressBar: any; |
|||
|
|||
@Input() |
|||
public mode = 'Line'; |
|||
|
|||
@Input() |
|||
public color = '#3d7dd5'; |
|||
|
|||
@Input() |
|||
public trailColor = '#f4f4f4'; |
|||
|
|||
@Input() |
|||
public trailWidth = 4; |
|||
|
|||
@Input() |
|||
public strokeWidth = 4; |
|||
|
|||
@Input() |
|||
public value = 0; |
|||
|
|||
constructor( |
|||
private readonly elementRef: ElementRef, |
|||
private readonly renderer: Renderer |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
const options = { |
|||
color: this.color, |
|||
trailColor: this.trailColor, |
|||
trailWidth: this.trailWidth, |
|||
strokeWidth: this.strokeWidth |
|||
}; |
|||
|
|||
this.renderer.setElementStyle(this.elementRef.nativeElement, 'display', 'block'); |
|||
|
|||
if (this.mode === 'Circle') { |
|||
this.progressBar = new ProgressBar.Circle(this.elementRef.nativeElement, options); |
|||
} else { |
|||
this.progressBar = new ProgressBar.Line(this.elementRef.nativeElement, options); |
|||
} |
|||
|
|||
this.updateValue(); |
|||
} |
|||
|
|||
public ngOnChanges() { |
|||
if (this.progressBar) { |
|||
this.updateValue(); |
|||
} |
|||
} |
|||
|
|||
private updateValue() { |
|||
const value = this.value; |
|||
|
|||
this.progressBar.animate(value / 100); |
|||
|
|||
if (value > 0) { |
|||
this.progressBar.setText(Math.round(value) + '%'); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue