app-detail.component.html

<div id="main" class="panel">
    <img *ngIf="currentApp.cover" class="cover rounded" [src]="currentApp.cover">
    <div id="right">
        <h1>{{currentApp.name}}</h1>
        <div id="time">您已玩了 2564 小时</div>

        <!--应用未购买-->
        <div *ngIf="!currentApp.isBought()">
            <button i18n type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#purchase-modal">{{currentApp.price.cny | currency:'CNY':true}} 购买</button>

            <!--<button i18n (click)="updateInstallOption(currentApp)" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#install-modal">我已经购买过</button>-->
        </div>


        <!--应用已购买，未安装-->
        <div *ngIf="currentApp.isBought() && !currentApp.isInstalled()">
            <button i18n (click)="updateInstallOption(currentApp)" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#install-modal">安装</button>
            <button i18n *ngIf="currentApp.runnable()" (click)="updateInstallOption(currentApp)" type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#import-modal">导入</button>
        </div>

        <!--应用变更中-->
        <div *ngIf="currentApp.isInstalled() && !currentApp.isReady()">
            <div id="status">
                <span i18n *ngIf="currentApp.isDownloading()">正在下载</span>
                <span i18n *ngIf="currentApp.isInstalling()">正在安装...</span>
                <span i18n *ngIf="currentApp.isUninstalling()">正在卸载...</span>
                <span i18n *ngIf="currentApp.isWaiting()">等待安装...</span>
                <span i18n *ngIf="currentApp.isUpdating()">正在更新...</span>
                <span *ngIf="currentApp.status.total">{{(currentApp.status.progress/currentApp.status.total * 100).toFixed()}}%</span>
                <span>{{currentApp.progressMessage()}}</span>
            </div>
            <progress class="progress" [class.progress-striped]="!currentApp.status.total" [class.progress-animated]="!currentApp.status.total" value="{{currentApp.status.total ? currentApp.status.progress : 1}}" max="{{currentApp.status.total}}"></progress>
        </div>

        <!--应用ready-->
        <div *ngIf="currentApp.isReady() && (currentApp.id != 'ygopro')">
            <button *ngIf="currentApp.runnable()" (click)="runApp(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-primary btn-sm">
                <i class="fa fa-play" aria-hidden="true"></i> <span i18n>运行</span></button>
            <button i18n *ngIf="currentApp.runnable() && currentApp.actions.get('custom')" [disabled]="!appsService.allReady(currentApp)" (click)="custom(currentApp)" type="button" class="btn btn-secondary btn-sm">设置</button>
            <div id="network" *ngIf="currentApp.network && currentApp.network.protocol == 'maotama'">
                <div class="input-group input-group-sm">
                    <input *ngIf="appsService.connections.get(currentApp)" [value]="appsService.connections.get(currentApp).address || 'Loading...'" readonly type="text" class="form-control" title="address">
                    <div class="input-group-btn" style="flex-direction: row">
                        <button i18n *ngIf="!appsService.connections.get(currentApp)" [disabled]="!appsService.allReady(currentApp)" (click)="appsService.network(currentApp, currentApp.network.servers[0])" type="button" class="btn btn-secondary btn-sm">联机</button>
                        <button i18n *ngIf="appsService.connections.get(currentApp)" (click)="copy(appsService.connections.get(currentApp).address)" [disabled]="!appsService.connections.get(currentApp).address" type="button" class="btn btn-secondary btn-sm">复制</button>
                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
                        <div class="dropdown-menu" [class.dropdown-menu-right]="appsService.connections.get(currentApp)">
                            <h6 i18n class="dropdown-header">选择服务器</h6>
                            <a *ngFor="let server of currentApp.network.servers" (click)="appsService.network(currentApp, server)" class="dropdown-item" href="#">{{server.id}}</a>
                            <div *ngIf="appsService.connections.get(currentApp)" class="dropdown-divider"></div>
                            <a i18n *ngIf="appsService.connections.get(currentApp)" (click)="appsService.connections.get(currentApp).connection.close()" class="dropdown-item" href="#">取消</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ygopro *ngIf="currentApp.isReady() && (currentApp.id == 'ygopro')" [app]="currentApp" [currentApp]="currentApp" (points)="onPoints($event)"></ygopro>
    </div>

</div>

<div id="arena" class="panel panel-default" *ngIf="currentApp.id === 'ygopro' && points ">
    <h2 i18n>排位成绩</h2>
    <table class="table table-sm">
        <tbody>
        <tr>
            <th i18n>竞技排名</th>
            <td>{{points.arena_rank}}</td>
            <th i18n>娱乐排名</th>
            <td>{{points.exp_rank}}</td>
        </tr>
        <tr>
            <th i18n>竞技胜率</th>
            <td>{{points.athletic_wl_ratio}}%</td>
            <th i18n>经验</th>
            <td>{{points.exp}}</td>
        </tr>
        <tr>
            <th i18n>胜场</th>
            <td>{{points.athletic_win}}</td>
            <th i18n>胜场</th>
            <td>{{points.entertain_win}}</td>
        </tr>
        <tr>
            <th i18n>负场</th>
            <td>{{points.athletic_lose}}</td>
            <th i18n>负场</th>
            <td>{{points.entertain_lose}}</td>
        </tr>
        <tr>
            <th i18n>平局</th>
            <td>{{points.athletic_draw}}</td>
            <th i18n>平局</th>
            <td>{{points.entertain_draw}}</td>
        </tr>
        <tr>
            <th i18n>总场</th>
            <td>{{points.athletic_all}}</td>
            <th i18n>总场</th>
            <td>{{points.entertain_all}}</td>
        </tr>
        </tbody>
    </table>
    <a i18n href="https://mycard.moe/ygopro/arena/" target="_blank" class="moreinfo">更多资料</a>
</div>

<div *ngIf="currentApp.description" class="d-flex">
    <div class="panel" id="game_info">
        <p [innerHTML]="currentApp.description"></p>
        <div id="tags" *ngIf="currentApp.tags">
            <div *ngFor="let tag of currentApp.tags" class="btn btn-xs btn-danger" style="padding:3px 10px; margin:2px">{{tags[tag] || tag}}</div>
        </div>
    </div>
    <div class="panel" id="game_info_2">
        <dl>
            <dt i18n>开发</dt>
            <dd>
                <div *ngFor="let developer of currentApp.developers">
                    <a *ngIf="developer.url" target="_blank" [href]="developer.url">{{developer.name}}</a>
                    <span *ngIf="!developer.url">{{developer.name}}</span>
                </div>
            </dd>

            <dt i18n>发行日期</dt>
            <dd>{{currentApp.released_at | date:'mediumDate'}}</dd>
        </dl>
    </div>
</div>

<div class="panel panel-default" *ngIf="news && news.length">
    <h2 i18n>新闻</h2>
    <div id="news" *ngFor="let item of news">
        <h3><a class="title" [href]="item.url" target="_blank">{{item.title}}</a></h3>
        <span>{{item.updated_at | date:'shortDate'}}</span>
        <p>{{item.text}}</p>
        <a i18n *ngIf="item.url" [href]="item.url" target="_blank">了解更多</a>
    </div>
    <!--<a href="https://mycard.moe/ygopro/arena/" target="_blank" class="moreinfo">查看所有新闻</a>-->
</div>


<div *ngIf="currentApp.isReady()">
    <div *ngIf="mods && mods.length">
        <table class="table table-striped">
            <thead class="thead-inverse">
            <tr>
                <th>#</th>
                <th i18n>名称</th>
                <th i18n>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let mod of mods; let i = index">
                <th scope="row">{{i + 1}}</th>
                <td>{{mod.name}}</td>
                <td *ngIf="mod.isReady()">
                    <button i18n type="button" [disabled]="mod.isInstalled()&&!appsService.allReady(mod)" (click)="uninstall(mod)" class="btn btn-danger btn-sm">卸载</button>
                </td>
                <td *ngIf="!mod.isInstalled()">
                    <button i18n (click)="installMod(mod)" [disabled]="mod.isInstalled()&&!appsService.allReady(mod)" type="button" *ngIf="!mod.isInstalled()" class="btn btn-primary btn-sm">安装</button>
                </td>
                <td *ngIf="mod.isInstalled()&&!mod.isReady()">
                    <progress class="progress progress-striped progress-animated" value="{{mod.status.total ? mod.status.progress : 1}}" max="{{mod.status.total}}"></progress>
                    <!--<div i18n *ngIf="mod.isWaiting()">等待安装...</div>-->
                </td>
            </tr>
            </tbody>
        </table>
    </div>


    <div class="panel panel-default" id="local">
        <h2 i18n>本地文件</h2>
        <div>
            <button i18n (click)="appsService.browse(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-secondary btn-sm">浏览本地文件</button>
            <button i18n type="button" (click)="verifyFiles(currentApp)" [disabled]="!appsService.allReady(currentApp)" class="btn btn-secondary btn-sm">校验完整性</button>
            <button i18n (click)="uninstall(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-secondary btn-sm">卸载</button>
        </div>
    </div>


</div>

<!--<div class="panel panel-default">--><!--<h2 i18n>广告</h2>--><!--<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>--><!--&lt;!&ndash; mycard &ndash;&gt;--><!--<ins class="adsbygoogle"--><!--style="display:block"--><!--data-ad-client="ca-pub-1173264056684633"--><!--data-ad-slot="3903147661"--><!--data-ad-format="auto"></ins>--><!--<script>--><!--(adsbygoogle = window.adsbygoogle || []).push({});--><!--</script>--><!--</div>-->

<!--安装modal-->
<div class="modal fade" id="install-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" *ngIf="installOption">
    <div class="modal-dialog" role="document">
        <form id="install-form" class="modal-content" (ngSubmit)="install(currentApp,installOption,referencesInstall)" #theForm="ngForm">
            <div class="modal-header">
                <h5 i18n class="modal-title" id="myModalLabel">安装 {{currentApp.name}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p i18n>即将开始安装 {{currentApp.name}}</p>
                <h4 i18n>安装位置</h4>
                <div class="form-group">
                    <select class="form-control" name="installPath" (change)="selectLibrary()" [(ngModel)]="installOption.installLibrary" title="path">
                        <option *ngFor="let library of libraries" value="{{library}}"> {{library}}</option>
                        <option *ngFor="let library of availableLibraries" value="create_{{library}}">在 {{library}}\ 盘新建 MyCard 库</option>
                    </select></div>
                <h4 i18n>快捷方式</h4>
                <div class="checkbox">
                    <input id="create_application_shortcut" type="checkbox" name="application" [(ngModel)]="installOption.createShortcut">
                    <label i18n *ngIf="platform == 'darwin'" for="create_application_shortcut">创建 LaunchPad 快捷方式</label>
                    <label i18n *ngIf="platform == 'win32'" for="create_application_shortcut">创建开始菜单快捷方式</label>
                </div>
                <div class="checkbox">
                    <input id="create_desktop_shortcut" type="checkbox" name="desktop" [(ngModel)]="installOption.createDesktopShortcut">
                    <label i18n for="create_desktop_shortcut">创建桌面快捷方式</label>
                </div>
                <h4 i18n *ngIf="references.length>0">扩展内容</h4>
                <div *ngFor="let reference of references"><label>
                    <input type="checkbox" [(ngModel)]="referencesInstall[reference.id]" name="references"> {{reference.name}}
                </label></div>
                <div *ngIf="currentApp.findDependencies().length">
                    <span i18n>依赖：</span>
                    <span class="dependency" *ngFor="let dependency of currentApp.findDependencies()">{{dependency.name}}</span>
                </div>
            </div>
            <div class="modal-footer">
                <button i18n type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button i18n type="submit" [disabled]="!theForm.form.valid" class="btn btn-primary">安装</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="import-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" *ngIf="installOption">
    <div class="modal-dialog" role="document">
        <form id="import-form" class="modal-content" (ngSubmit)="importGame(currentApp,installOption,referencesInstall)" #theForm="ngForm">
            <div class="modal-header">
                <h5 i18n class="modal-title">导入 {{currentApp.name}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p i18n>选择主程序 {{currentApp.actions.get('main').execute}}</p>
                <label class="custom-file" lang="en">
                    <input (click)="$event.preventDefault();selectImport(currentApp)" type="file" id="file" class="custom-file-input">
                    <span class="custom-file-control">{{import_path || currentApp.actions.get('main').execute}}</span>
                </label>

                <h4 i18n>导入到</h4>
                <div class="form-group">
                    <select class="form-control" name="installPath" (change)="selectLibrary()" [(ngModel)]="installOption.installLibrary" title="path">
                        <option *ngFor="let library of libraries" value="{{library}}"> {{library}}</option>
                        <option *ngFor="let library of availableLibraries" value="create_{{library}}">在 {{library}}\ 盘新建 MyCard 库</option>
                    </select>
                </div>
                <!--<h4 i18n>快捷方式</h4>-->
                <!--<div class="checkbox">-->
                <!--<input id="create_application_shortcut" type="checkbox" name="application" [(ngModel)]="installOption.createShortcut">-->
                <!--<label i18n *ngIf="platform == 'darwin'" for="create_application_shortcut">创建 LaunchPad 快捷方式</label>-->
                <!--<label i18n *ngIf="platform == 'win32'" for="create_application_shortcut">创建开始菜单快捷方式</label>-->
                <!--</div>-->
                <!--<div class="checkbox">-->
                <!--<input id="create_desktop_shortcut" type="checkbox" name="desktop" [(ngModel)]="installOption.createDesktopShortcut">-->
                <!--<label i18n for="create_desktop_shortcut">创建桌面快捷方式</label>-->
                <!--</div>-->
                <h4 i18n *ngIf="references.length>0">扩展内容</h4>
                <div *ngFor="let reference of references"><label>
                    <input type="checkbox" [(ngModel)]="referencesInstall[reference.id]" name="references"> {{reference.name}}
                </label></div>
                <div *ngIf="currentApp.findDependencies().length">
                    <span i18n>依赖：</span>
                    <span class="dependency" *ngFor="let dependency of currentApp.findDependencies()">{{dependency.name}}</span>
                </div>
            </div>
            <div class="modal-footer">
                <button i18n type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button i18n type="submit" [disabled]="import_path && !theForm.form.valid" class="btn btn-primary">导入</button>
            </div>
        </form>
    </div>
</div>


<div class="modal fade" id="purchase-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" *ngIf="!currentApp.isBought()">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 i18n class="modal-title">购买 {{currentApp.name}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-between">
                    <img *ngIf="currentApp.cover" [src]="currentApp.cover" class="banner">
                    <span class="p-2">{{currentApp.name}}</span>
                    <span class="p-2 ml-auto">{{currentApp.price.cny | currency:'CNY':true}}</span>
                </div>
                <form id="purchase-form" class="form-inline">
                    <!--<fieldset class="form-group">-->
                    <legend>支付方式</legend>
                    <div class="form-check">
                        <input id="alipay" type="radio" class="form-check-input" name="optionsRadios" value="alipay" checked>
                        <label for="alipay" class="form-check-label">支付宝</label>
                    </div>
                    <div class="form-check">
                        <input id="wechat" type="radio" class="form-check-input" name="optionsRadios" value="alipay" checked>
                        <label for="wechat" class="form-check-label">微信</label>
                    </div>
                    <!--<div class="form-check">-->
                    <!--<input id="paypal" type="radio" class="form-check-input" name="optionsRadios" value="alipay" checked>-->
                    <!--<label for="paypal" class="form-check-label">PayPal</label>-->
                    <!--</div>-->
                    <!--</fieldset>-->
                </form>

            </div>
            <div class="modal-footer">
                <button i18n type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button i18n type="submit" [disabled]="import_path && !theForm.form.valid" class="btn btn-primary">购买</button>
            </div>
        </div>
    </div>
</div>