Was gonna uninstall and reinstall and realized there was a new sensor (amazon delivered), I was missing. 
Let’s see how it works no
Ah yes, breaking change from b11 i think it was
1 Like
I have a quick question about the lovelace card. I’ve had this same thing happen to me a few times, and I’m perplexed. I’ve removed it from hacs. Verfifed all files are deleted. I create a folder under www and edit the .js files. My changes seems to be there, then when I refresh, they are gone. Reverted.
I feel like I should be able to copy the .js file. put it anywhere under www in its own folder, and make changes to text (very minor, no code), and save it and point to it and it should work. but it definitely does not behave that way. I’m no developer, so maybe I’m missing something.
That sounds like a HACS thing honestly, no idea what’s going on there.
If you have the card installed and go into it’s directory, all you should have to do is delete the .gz file and any changes you make should stay.
Thanks, at least I know that is how it should work. I removed the card from HACS. I removed the repository as well. I then installed manually following the steps in github. What I was trying to do was to change the USPS working and icon to Amazon, since I dont have informed delivery. I only changed the icon, and Text for mail, and the URL I then browsed to
https://MYURL/local/Home-Assistant-Mail-And-Packages-Custom-Card/Home-Assistant-Mail-And-Packages-Custom-Card.js
I see the file. But my changes are either there and then gone, or not at all. It’s like it’s caching somewhere and I cannot figure out how to get the cached file to go away. I did try earlier to delete the .gz files and had the same basic behavior. It;s like it realy really wants to use a cached version of that file. haha
Try https://MYURL/local/Home-Assistant-Mail-And-Packages-Custom-Card/Home-Assistant-Mail-And-Packages-Custom-Card.js?v=1
That works, as in it shows the file, but then the custom card fails to load anymore. I changed the path in dashboards too. Just get this in my dashboard - Custom element doesn’t exist: mail-and-packages-card.
It’s fine thanks for confirming that overall it should work. I tied the v=1 addition a while back too.
So just for my sanity. I “Should” be able to create folder under www, lets say “mail_dashboard”
I should be able to put the two .js files from the git hub repository in that folder, making sure the permissions are correct, etc. I should be able to point to it via the lovelace resources. And I should be able to make minor text changes of that file. And Should be able to add the card using the same “type: ‘custom:mail-and-packages-card’” as the card type.
Back before hacs and even still now. I added and still have added a few lovelace cards manually. mostly to a folder I created a year ago or more named lovelace-custom under www. This is the first one I’ve had this issue with. I’ll keep plugging away. Thanks again
Seems highly like a caching thing. 
@ptdalen When creating the card I had to empty the cache between all changes or bump the version number in the query string to changes to appear. This was before they added the resources to the front end. I’m not sure how it handles changes now.
1 Like
Well, that is indeed really interesting. You are correct, when using a filter, it does seem to forward without changing the From: or the Subject: fields. I have had forward filters for years and never noticed this behavior with Gmail. So far, I am waiting for some amazon orders to test this, but based on your experience, looks like it may work!
1 Like
Please post your results once you’ve tested.
Seems like good news for gmail users. We would need me people to test on other services to see if it is the same. Otherwise another solution would need to be built.
Ok, sorry last question, since I think this is really an issue with me and lovelace and not your card.
So, here is my conffig
Here are the actual files
If I visit this URL
https://myURL/local/custom-lovelace/mail_card/mail_card.js?v=1.1.0 (with or with the version to force new version. I am able to view the .js file
I updated the editor filename
I the mail card I changed only a couple things, and have checked and doublechecked. I changed the icon for USPS to Amazon. I changed the URLs to point to amazon from USPS. And the Text that shows on the card to amazon.
I did not change any variable names, etc
But I still receive this
I even went back and replaced my minor changes (shown below) with the originial js file and still does not come up.
Here is the code with the very minor changes I made
const LitElement = Object.getPrototypeOf(customElements.get("hui-view")); const html =
LitElement.prototype.html; const curDatetime = new Date(); const datetime = curDatetime.getMonth().toString() +
curDatetime.getDate().toString() + curDatetime.getFullYear().toString() + curDatetime.getHours().toString() +
curDatetime.getMinutes().toString(); const fireEvent = (node, type, detail, options) => {
options = options || {}; detail = detail === null || detail === undefined ? {} : detail; const event = new
Event(type, {
bubbles: options.bubbles === undefined ? true : options.bubbles, cancelable:
Boolean(options.cancelable), composed: options.composed === undefined ? true : options.composed
});
event.detail = detail; node.dispatchEvent(event); return event;
};
function hasConfigOrEntityChanged(element, changedProps) { if (changedProps.has("_config")) { return true;
}
return true;
}
class MailAndPackagesCard extends LitElement { static get properties() { return { _config: {}, hass: {}
};
}
static async getConfigElement() { await import("./mail_card_editor.js");
return document.createElement("mail-and-packages-card-editor");
}
static getStubConfig() { return {};
}
setConfig(config) { if (!config.updated) { throw new Error("The sensor sensor.mail_updated is not found or
not defined in lovelace.");
}
this._config = config;
}
shouldUpdate(changedProps) { return hasConfigOrEntityChanged(this, changedProps);
}
render() { if (!this._config || !this.hass) { return html ``;
}
this.numberElements = 0; const stateObj = this.hass.states[this._config.updated]; if (!stateObj) {
return html `
<style> .not-found { flex: 1; background-color: yellow; padding: 8px;
}
</style> <ha-card> <div class="not-found"> Entity not available: ${this._config.updated} </div>
</ha-card>
`;
}
return html ` ${this.renderStyle()} <ha-card @click="${this._handleClick}"> ${this._config.details !==
false ? this.renderDetails(stateObj) : ""} ${this._config.image !== false ? this.renderImage(stateObj) :
""} ${this._config.camera !== false ? this.renderCamera(stateObj) : ""} <span
class="usps_update">Checked: ${stateObj.state}</span>
</ha-card> `;
}
renderDetails(stateObj) { const deliveries_message = this._config.deliveries_message ?
this.hass.states[this._config.deliveries_message].state : false; const packages_delivered =
this._config.packages_delivered ? this.hass.states[this._config.packages_delivered].state : false; const
packages_in_transit = this._config.packages_in_transit ?
this.hass.states[this._config.packages_in_transit].state : false; const fedex_packages =
this._config.fedex_packages ? this.hass.states[this._config.fedex_packages].state : false; const
ups_packages = this._config.ups_packages ? this.hass.states[this._config.ups_packages].state : false;
const usps_packages = this._config.usps_packages ? this.hass.states[this._config.usps_packages].state
: false;
const usps_mail = this._config.usps_mail ? this.hass.states[this._config.usps_mail].state : false;
const mail_icon = usps_mail > 0 ? 'mailbox-open-up' : 'mailbox-outline'; const usps_icon = usps_packages
> 0 ? 'amazon' : 'amazon'; const ups_icon = ups_packages > 0 ?
'package-variant' : 'package-variant-closed'; const fedex_icon = fedex_packages > 0 ? 'package-variant'
: 'package-variant-closed';
this.numberElements++; return html ` <div class="details"> ${this._config.name ? html` <div
class="title"> ${this._config.name} </div> `
: ""}
<br> <ul class="items space-evenly"> ${packages_delivered ? html` <li><span class="mail-ha-icon"><ha-icon
icon="mdi:package"></ha-icon>
</span>Deliveries: ${packages_delivered}</li> `
: ""}
${packages_in_transit ? html` <li><span class="mail-ha-icon"><ha-icon icon="mdi:truck-delivery"></ha-icon>
</span>In Transit: ${packages_in_transit}<li> `
: ""}
</ul> ${deliveries_message ? html` <p>${deliveries_message}</p> `
: ""}
<ul class="items space-evenly"> ${usps_mail ? html` <li><span class="mail-ha-icon"> <ha-icon
icon="mdi:${mail_icon}"></ha-icon> </span><a href="https://informeddelivery.usps.com/" title="Open the
USPS Informed Delivery site" target="_blank"><span class="no-break">Mail: ${usps_mail}</span></a></li>
`
: ""}
${usps_packages ? html` <li><span class="mail-ha-icon"> <ha-icon icon="mdi:${usps_icon}"></ha-icon>
</span><a href="https://www.amazon.com/gp/css/order-history?ref_=nav_orders_first/" title="Open the
Amazon Orders Site" target="_blank"><span class="no-break">Amazon: ${usps_packages}</span></a></li>
`
: ""}
${ups_packages ? html` <li><span class="mail-ha-icon"> <ha-icon icon="mdi:${ups_icon}"></ha-icon> </span><a
href="https://wwwapps.ups.com/mcdp" title="Open the UPS MyChoice site" target="_blank"><span
class="no-break">UPS: ${ups_packages}</span></a></li>
`
: ""}
${fedex_packages ? html` <li><span class="mail-ha-icon"> <ha-icon icon="mdi:${fedex_icon}"></ha-icon>
</span><a href="https://www.fedex.com/apps/fedextracking" title="Open the Fedex site"
target="_blank"><span class="no-break">Fedex: ${fedex_packages}</span></a></li> `
: ""}
</ul> </div> `;
}
renderImage(image) { const gif = this._config.gif; if (!image || image.length < 2 || !gif || gif.length < 2)
{
return html ``;
}
const lang = this.hass.selectedLanguage || this.hass.language; this.numberElements++; return html ` <img
class="MailImg clear" src="${this._config.gif + "?v=" + datetime}" />
`;
}
renderCamera(camera) { const camera_entity = this._config.camera_entity; if (!camera || camera.length === 0
|| !camera_entity || camera_entity.length === 0) {
return html ``;
}
const cameraObjt = this._config.camera_entity in this.hass.states ?
this.hass.states[this._config.camera_entity] : null; const camera_url =
this.hass.states[this._config.camera_entity].attributes.entity_picture; const lang =
this.hass.selectedLanguage || this.hass.language; this.numberElements++; return html ` <img
class="MailImg clear" src="${camera_url}&interval=30" />
`;
}
_handleClick() { fireEvent(this, "hass-more-info", { entityId: this._config.updated
});
}
getCardSize() { return 3;
}
renderStyle() { return html ` <style> ha-card { cursor: pointer; margin: auto; padding: 1em; position:
relative;
}
a { color: var(--secondary-text-color)
}
.spacer { padding-top: 1em;
}
.clear { clear: both;
}
.title { position: relative; font-weight: 300; font-size: 2em; color: var(--primary-text-color);
}
.details { margin-bottom: .5em;
}
.items { list-style: none; padding: 0; margin: 0; display: flex;
}
.no-break { white-space: nowrap;
}
.space-evenly { justify-content: space-evenly;
}
.space-between { justify-content: space-between;
}
.mail-clear { clear: both;
}
.mail-and-packages { margin: auto; padding-top: 2em; padding-bottom: 2em; padding-left: 2em;
padding-right: 2em; position: relative;
}
.mail-ha-icon { height: 18px; padding-right: 5px; color: var(--paper-item-icon-color);
}
.MailImg { position: relative; width: 100%; height: auto; margin-top: 1em;
}
.usps_update { font-size: .7em;
}
</style> `;
}
}
customElements.define("mail-and-packages-card", MailAndPackagesCard);
Actually, I see an error in the logs, I’ll have to dig into.
Uncaught SyntaxError: Invalid or unexpected token
EDIT: It was me, somehow the formatting of the .js file was messed up between the copies, etc. I was able to make the changes and now have my own “copy” of it working.
Thanks
Confirming that with Gmail to Gmail filter based forwards, sensor.mail_amazon_packages seems to be reporting all the packages on the way and sensor.mail_amazon_packages_delivered seems to be accurate as well so far. This makes a feasible work around for Gmail users at least. Thank you for the tip @helpless_automaton
2 Likes
I’m on the latest Home Assistant. I am so confused on how to install/use this. These are the steps I followed:
- Went to https://github.com/moralmunky/Home-Assistant-Mail-And-Packages
- Installed via HACS as an integration: https://github.com/moralmunky/Home-Assistant-Mail-And-Packages
- Rebooted my Home Assistant. Confirmed I see the integration in HACS
- Read the configuration steps at: https://github.com/moralmunky/Home-Assistant-Mail-And-Packages/blob/5906bffa83a41600ea098a8a5f458cc446e5278a/info.md#configuration
- Tried the following, but I cannot see the integration: “Once you have finished installing through HACS or manually go into
Configuration -> Integrationselect the+and add theMail And Packagesintegration. You first be prompted to input your mail server settings and then additonal settings.”
What am I missing?
you need to add the repositoty to HACS
1 Like
I did, like I mentioned in my steps. Image taken from HACS shown below.
sorry misread. Now go to configuration (not in HACS) then integrations, then click the + and find mail and packages.
Part of the instructions seem to have gone missing.
“Once you have finished installing through HACS or manually go into Configuration -> Integration select the + and add the Mail And Packages integration. If the integration does not show up, refresh the Integrations page. You first be prompted to input your mail server settings and then additonal settings.”
Edit: I’ve updated the Wiki thank you.
2 Likes