ng-apimock-with-presets/templates/interface/partials/ngapimock.tpl.html

An ng-apimock fork with preset functionality

<h4>Currently the following mocks have been detected</h4>

<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>Expression</th>
        <th>Method</th>
        <th>Name</th>
        <th>Scenario</th>
        <th>Delay</th>
        <th>Echo</th>
        <th>Record&nbsp;<input type="checkbox" data-ng-model="$ctrl.record" data-ng-change="$ctrl.toggleRecording()"></th>
    </tr>
    </thead>
    <tbody>
    <tr data-ng-repeat-start="mock in $ctrl.mocks track by mock.identifier"
        data-ng-init="selected = mock.responses[$ctrl.selections[mock.identifier]]; delay = $ctrl.delays[mock.identifier] || selected.delay;"
        identifier="{{::mock.name}}">
        <td><span data-ng-bind="::mock.expression.toString()"></span></td>
        <td><span data-ng-bind="::mock.method"></span></td>
        <td><span data-ng-bind="::mock.name"></span></td>
        <td><select name="{{::mock.expression.toString()}}$${{::mock.method}}"
                    data-ng-options="response.name for response in mock.responses"
                    data-ng-model="selected"
                    data-ng-change="$ctrl.selectMock(mock, selected.name); delay = $ctrl.delays[mock.identifier] || selected.delay;">
            <option value="">passThrough</option>
        </select></td>
        <td>
            <input type="number" min="0" data-ng-model="delay" data-ng-value="delay" data-ng-model-options="{debounce: 500}" data-ng-change="$ctrl.delayMock(mock, delay)">
        </td>
        <td>
            <input data-ng-if="mock.method === 'POST'" data-ng-init="echo = !!$ctrl.echos[mock.identifier];" type="checkbox" data-ng-value="true" data-ng-model="echo" data-ng-change="$ctrl.echoMock(mock, echo)">
        </td>
        <td>
            <div>
                <label>
                    <a data-ng-show="!mock.openDetails" data-ng-click="mock.openDetails = true">Show</a>
                    <a data-ng-show="mock.openDetails" data-ng-click="mock.openDetails = false">Hide</a>
                </label>
            </div>
        </td>
    </tr>
    <tr data-ng-repeat-end data-ng-if="mock.openDetails" identifier="{{::mock.name}}-recordings">
        <td colspan="6">
            <table class="table table-striped table-bordered table-hover">
                <tr><th>Date/time</th><th>Path</th><th>Method</th><th>Statuscode</th><th>Request/Response</th></tr>
                <tr data-ng-if="!$ctrl.recordings[mock.identifier]"><td colspan="5">No recordings found</td></tr>
                <tr data-ng-repeat-start="recording in $ctrl.recordings[mock.identifier] track by $index">
                    <td data-ng-bind="::recording.datetime | date:'dd-MM-yyyy HH:mm:ss'"></td>
                    <td data-ng-bind="::recording.url"></td>
                    <td data-ng-bind="::recording.method"></td>
                    <td data-ng-bind="::recording.statusCode"></td>
                    <td>
                        <a data-ng-show="!recording.openDetails" data-ng-click="recording.openDetails = true">Show</a>
                        <a data-ng-show="recording.openDetails" data-ng-click="recording.openDetails = false">Hide</a>
                    </td>
                </tr>
                <tr data-ng-repeat-end data-ng-show="recording.openDetails">
                    <td data-ng-if="mock.method !== 'GET'" colspan="2"><strong>Request:</strong><br/><span data-ng-bind="::recording.payload"></span></td>
                    <td colspan="5"><strong>Response:</strong><br/><span data-ng-bind="::recording.data"></span></td>
                </tr>
            </table>
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="7" class="text-right">
            <button data-ng-click="$ctrl.exportAsPreset()">Export selection as preset</button>
            <button data-ng-click="$ctrl.defaultMocks()">Reset to defaults</button>
            <button data-ng-click="$ctrl.passThroughMocks()">All to passThrough</button>
        </td>
    </tr>
    <tr ng-if="$ctrl.exportPreset">
        <td colspan="7">
            Save the following as a .json file in your presets directory to save this preset:
            <pre>{{$ctrl.exportPreset}}</pre>
            <button data-ng-click="$ctrl.exportPreset = null">Hide export panel</button>
        </td>
    </tr>
    </tfoot>
</table>



<h4>Currently the following presets have been detected</h4>
<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>Name</th>
        <th>Options</th>
    </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="preset in $ctrl.presets" id="preset-{{preset.name}}">
            <td>{{preset.name}}</td>
            <td>
                <button data-ng-click="$ctrl.applyPreset(preset.name)">Apply preset</button>
            </td>
        </tr>
    </tbody>
</table>

<h4>Currently the following global variables have been detected</h4>
<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>Key</th>
        <th>Value</th>
        <th>Options</th>
    </tr>
    </thead>
    <tbody>
    <tr data-ng-repeat="(key, value) in $ctrl.variables track by key" id="{{key}}">
        <td><span data-ng-bind="::key"/></td>
        <td><input type="text" data-ng-model="value" style="width: 100%;" data-ng-model-options="{debounce: 500}" data-ng-change='$ctrl.updateVariable(key, value)'/></td>
        <td class="text-right"><button data-ng-click="$ctrl.deleteVariable(key)">x</button></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td><input type="text" data-ng-model="$ctrl.variable.key" style="width: 100%;"/></td>
        <td><input type="text" data-ng-model="$ctrl.variable.value" style="width: 100%;"/></td>
        <td class="text-right"><button data-ng-click="$ctrl.addVariable()" data-ng-disabled="$ctrl.variable.key === undefined">Add variable</button> </td>
    </tr>
    </tfoot>
</table>