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