Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
IoT Edge Marketplace (#389)
* IoT Edge Marketplace * Parse module tag and repository url (#388) * CSS for light theme * Better naiming, handle edge case * Code cleanup * More code cleanup * Resolve comments * Pass nessessary info to Marketplace class * Provide an internal command 'azure-iot-edge.internal.addModule' and some UI update
- Loading branch information
1 parent
1ab77bc
commit 0138cf8
Showing
15 changed files
with
1,337 additions
and
170 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
|
||
<head> | ||
<link rel="stylesheet" href="{{root}}/assets/marketplace/main.css"> | ||
<link rel="stylesheet" href="./main.css"> | ||
</head> | ||
|
||
<body> | ||
<div id="app" data-endpoint="{{endpoint}}"> | ||
<div id="content"> | ||
<div id="main-content"> | ||
<div v-if="!errorMessageInitialization"> | ||
<header> | ||
<div id="title-area"> | ||
<h1>You are importing IoT Edge modules from Azure Marketplace</h1> | ||
<input id="search-box" v-model="searchInput" placeholder="Search"> | ||
</div> | ||
</header> | ||
<div class="modules"> | ||
<div v-for="module in filteredModules" class="module" :class="{selected:selectedModule.id == module.id}" | ||
v-on:click="showModule(module)"> | ||
<div class="image"> | ||
<img :src="module.icon"> | ||
</div> | ||
<div class="info-area"> | ||
<div class="title">{{ module.displayName }}</div> | ||
<div class="publisher">By {{ module.publisherDisplayName }}</div> | ||
<div class="description">{{ module.summary }}</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div v-else id="error-initialization"> | ||
Fail to fetch IoT Edge modules from Azure Marketplace. Please retry. <br /> | ||
Error message: {{ errorMessageInitialization }} | ||
</div> | ||
</div> | ||
<div id="module-detail" v-if="selectedModule.id"> | ||
<div class="title"> {{ selectedModule.displayName }} </div> | ||
<div class="publisher">By {{ selectedModule.publisherDisplayName }}</div> | ||
<div class="description">{{ selectedModule.longSummary }}</div> | ||
<div class="inputs"> | ||
<div class="input"> | ||
<label>Module Name: </label> | ||
<input v-model="moduleName"> | ||
</div> | ||
<div class="error" v-if="errorMessageModuleName"> | ||
{{ errorMessageModuleName }} | ||
</div> | ||
<div class="input"> | ||
<label>Tags: </label> | ||
<select v-model="selectedTag"> | ||
<option v-for="tag in selectedModule.metadata.tagsOrDigests">{{ tag }}</option> | ||
</select> | ||
</div> | ||
</div> | ||
<div class="action"> | ||
<button v-on:click="importModule()">Import</button> | ||
<button v-on:click="selectedModule.id=''">Cancel</button> | ||
</div> | ||
<div class="term-of-use"> | ||
I agree to the provider's <a :href="selectedModule.legalTermsUri">Term of Use</a> and <a :href="selectedModule.privacyPolicyUri">Privacy | ||
Policy</a> and understand that the rights to use this product do not come from Microsoft, | ||
unless Microsoft is the provider. Use of Azure Marketplace is governed by separate <a href="https://aka.ms/azuremarketplaceterms">terms</a>. | ||
</div> | ||
<div v-if="selectedModule.links && selectedModule.links.length > 0"> | ||
<div class="learn-more"> Learn more </div> | ||
<div class="learn-more-links"> | ||
<div v-for="link in selectedModule.links" class="link"> | ||
<a :href="link.uri">{{ link.displayName }}</a> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div id="sidebar"> | ||
</div> | ||
</div> | ||
<script type="text/javascript" src="{{root}}/assets/marketplace/vue.min.js"></script> | ||
<script type="text/javascript" src="./vue.min.js"></script> | ||
<script type="text/javascript" src="{{root}}/assets/marketplace/axios.min.js"></script> | ||
<script type="text/javascript" src="./axios.min.js"></script> | ||
<script type="text/javascript" src="{{root}}/assets/marketplace/main.js"></script> | ||
<script type="text/javascript" src="./main.js"></script> | ||
</body> | ||
|
||
</html> |
Oops, something went wrong.